前言

在vscode的vue項目中，關于代碼檢查和格式化，遇到各種各樣的問題，比如：

以下通過自己的實踐，進行了相應配置，目前可以實現：

vscode 拓展安裝

eslint 拓展

該拓展本身不帶任何插件，當前項目要使用該拓展，需要安裝相應的npm包（全局安裝或當前項目安裝）

對于 vue 項目，通常在 vscode 中做如下設置:

 //保存時自動修復代碼 "eslint.autoFixOnSave": true, "eslint.options": {  // 應檢查代碼的文件擴展名數組  "extensions": [   ".js",   ".vue"  ] }, // 配置要驗證的語言標識和自動修復選項，比前面兩個配置的結合更為細粒度話?？梢詢H配置下面代碼 "eslint.validate": [  "javascript",  "javascriptreact",  "html",  {   "language": "vue",   "autoFix": true  } ],

vetur 拓展

vue 工具，主要有以下功能

Syntax-highlighting 語法高亮

Snippet 快速定義腳手架代碼片段，如：寫script后會跳出export default{xxx},style 后面會帶lang、scope等

Emmet 仿css選擇器快速生成 html/css 代碼

Linting / Error Checking vetur的 Linting 僅用于快速啟動，對于規則配置需要用eslint.validate

Linting 不可配置，且自帶了一個固定版本的eslint-plugin-vue，一般我們不用。而是采用以下配置：

vscode中設置"vetur.validation.template": false 安裝ESlint拓展，錯誤處理將走eslint 項目中安裝npm i -D eslint eslint-plugin-vue插件 在.eslintrc.*設置eslint規則,后面會介紹eslintrc相關配置

Formatting 即右鍵的Format Document功能，不支持格式化選中內容。

可以在設置中配置vetur.format.defaultFormatter / 如：默認"vetur.format.defaultFormatter.html": "prettyhtml",也可將值設為 none 就不會格式化該類文件了 / 這個默認設置非常難用，會將vue文件變得很亂，比如默認加分號，屬性按列展開；我們在設置中進行如下配置即可實現格式化vue文件時按eslint的規則來

"vetur.format.defaultFormatterOptions": {"js-beautify-html": {// 屬性列太長才折行,默認的force-expand-multiline不美觀"wrap_attributes": "auto"},"prettier": {//去掉代碼結尾分號"semi": false,//使用eslint的代碼格式進行校驗"eslintIntegration": true,//采用單引號"singleQuote": true}},//格式化.vue中html，js"vetur.format.defaultFormatter.html": "js-beautify-html","vetur.format.defaultFormatter.js": "vscode-typescript",//讓函數(名)和后面的括號之間加個空格"javascript.format.insertSpaceBeforeFunctionParenthesis": true,