vscode中vue文件保存時(shí)怎么自動(dòng)格式化？下面本篇文章給大家介紹一下vscode保存按照eslint規(guī)則自動(dòng)格式化的方法，希望對(duì)大家有所幫助！

最近寫(xiě)vue用了vue-admin-template，npm run dev跑起來(lái)總是有eslint報(bào)錯(cuò)，每次檢查耗時(shí)耗力，記錄解決方法。【推薦學(xué)習(xí)：《vscode入門(mén)教程》】

1.安裝插件

vscode安裝以下插件：

• eslint
• Vetur
• Prettier – Code formatter

2.vue文件保存時(shí)格式化

按住·commond+shift+p·，搜索 perferences open setting(json)。

在配置文件中添加以下內(nèi)容，注意不要直接所有拷貝進(jìn)去，可能會(huì)覆蓋到你自己的配置。建議拷貝進(jìn)去然后去除重復(fù)的key即可。

{  "editor.suggestSelection": "first",  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",  "explorer.confirmDelete": false,  "editor.tabSize": 2,  "files.autoSave": "onFocusChange",  "editor.fontSize": 14, // 設(shè)置字體  "editor.tabCompletion": "on", // 用來(lái)在出現(xiàn)推薦值時(shí)，按下Tab鍵是否自動(dòng)填入最佳推薦值  "editor.codeActionsOnSave": {  "source.fixAll.eslint": true,  "source.organizeImports": true // 這個(gè)屬性能夠在保存時(shí)，自動(dòng)調(diào)整 import 語(yǔ)句相關(guān)順序，能夠讓你的 import 語(yǔ)句按照字母順序進(jìn)行排列  },  "editor.formatOnSave": true,  // #讓vue中的js按"prettier"格式進(jìn)行格式化  "vetur.format.defaultFormatter.html": "js-beautify-html",  "vetur.format.defaultFormatter.js":"prettier-eslint",  "vetur.format.defaultFormatterOptions": {  "js-beautify-html": {  // #vue組件中html代碼格式化樣式  "wrap_attributes": "auto", //也可以設(shè)置為“auto”，效果會(huì)不一樣  "wrap_line_length": 200,  "end_with_newline": false,  "semi": false,  "singleQuote": true  },  "prettier": {  "semi": false,  "singleQuote": true,  "editor.tabSize": 2  },  "prettyhtml": {  "printWidth": 160,  "singleQuote": false,  "wrapAttributes": false,  "sortAttributes": false  }  },  "[vue]": {  "editor.defaultFormatter": "octref.vetur"  },  "bracketPairColorizer.depreciation-notice": false,  "editor.mouseWheelZoom": true  }

問(wèn)題記錄

格式化目錄下所有文件

下載插件Start Format Files，然后右鍵目錄選擇 開(kāi)始格式化文件即可。

忽略文件配置見(jiàn) https://marketplace.visualstudio.com/items?itemName=jbockle.jbockle-format-files&ssr=false#overview