VScode 格式化代碼保存時使用ESlint修復代碼

前言

eslint  vs code

VScode 配置格式化代碼保存時使用ESlint修復代碼頭快炸了，不建議初學者用eslint，太費時間了；用慣了才發現真香～～

終於搞定～～不再要擔憂縮進，函數(名)和後面的括號之間沒空格啦，代碼末尾有分號了， 

首先 下載插件  Prettier - Code formatter 

而後 設置中配置settings.json

 

 代碼：

{

"editor.lineNumbers": "on", //開啓行數提示

"editor.quickSuggestions": { //開啓自動顯示建議

"other": true,

"comments": true,

"strings": true

},

"prettier.useTabs": true,//使用製表符縮進

"editor.tabSize": 2, //製表符符號eslint

"editor.formatOnSave": true, //每次保存自動格式化

"prettier.semi": true, //去掉代碼結尾的分號

"prettier.singleQuote": true, //使用單引號替代雙引號

"prettier.trailingComma": "none", //去除對象最末尾元素跟隨的逗號

"javascript.format.insertSpaceBeforeFunctionParenthesis": true, //讓函數(名)和後面的括號之間加個空格

"vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html

"vetur.format.defaultFormatter.js": "vscode-typescript", //讓vue中的js按編輯器自帶的ts格式進行格式化

"[vue]": {

"editor.defaultFormatter": "esbenp.prettier-vscode"

},

"[javascript]": {

"editor.defaultFormatter": "esbenp.prettier-vscode"

},

"eslint.run": "onSave",

"editor.codeActionsOnSave": {

"source.fixAll.eslint": true

},

"prettier.printWidth": 200,//指定代碼長度，超出換行

"prettier.requireConfig": true,//須要prettier.requireConfig格式化

"prettier.useEditorConfig": false,

"eslint.validate": [

//開啓對.vue文件中錯誤的檢查

 "javascript",

"javascriptreact",

 {

"language": "html",

 "autoFix": true

 },

 {

 "language": "vue",

 "autoFix": true

 }

 ],

"terminal.integrated.rendererType": "dom",

"[typescript]": {

"editor.defaultFormatter": "esbenp.prettier-vscode"

}

}