驗證有效，Ctrl+S保存代碼全格式化了。寫這個主要是個人筆記，算不得重復造。
源頭：https://blog.csdn.net/qq_34803821/article/details/84972781
1、安裝插件
VSCode中打開應用商店並搜索、安裝三個插件：ESlint，vetur，Prettier - Code formatter。具體
2、配置VSCode的Settings.json文件
2.1、打開設置界面
路徑打開：File(文件)->Preferences(首選項)->Settings(設置)。
快捷鍵打開：Ctrl+，
2.2、打開Settings.json文件
2.3、配置代碼，// 代碼格式化
1 { 2 // 代碼文件頭部注釋 3 "fileheader.customMade": { 4 "Descripttion": "js", 5 "Version": "1.0", 6 "Author": "name", 7 "Date": "Do not edit", 8 "LastEditors": "name", 9 "LastEditTime": "Do not edit" 10 }, 11 "fileheader.cursorMode": { 12 "name": "", 13 "test": "test font", 14 "msg": "", 15 "param": "", 16 "return": "" 17 }, 18 19 // 代碼格式化 20 // vscode默認啟用了根據文件類型自動設置tabsize的選項 21 "editor.detectIndentation": false, 22 // 重新設定tabsize 23 "editor.tabSize": 2, 24 // #每次保存的時候自動格式化 25 "editor.formatOnSave": true, 26 // #每次保存的時候將代碼按eslint格式進行修復 27 "eslint.autoFixOnSave": true, 28 // 添加 vue 支持 29 "eslint.validate": [ 30 "javascript", 31 "javascriptreact", 32 { 33 "language": "vue", 34 "autoFix": true 35 } 36 ], 37 // #讓prettier使用eslint的代碼格式進行校驗 38 "prettier.eslintIntegration": true, 39 // #去掉代碼結尾的分號 40 "prettier.semi": false, 41 // #使用帶引號替代雙引號 42 "prettier.singleQuote": true, 43 // #讓函數(名)和后面的括號之間加個空格 44 "javascript.format.insertSpaceBeforeFunctionParenthesis": true, 45 // #這個按用戶自身習慣選擇 46 "vetur.format.defaultFormatter.html": "js-beautify-html", 47 // #讓vue中的js按編輯器自帶的ts格式進行格式化 48 "vetur.format.defaultFormatter.js": "vscode-typescript", 49 "vetur.format.defaultFormatterOptions": { 50 "js-beautify-html": { 51 "wrap_attributes": "force-aligned" 52 // #vue組件中html代碼格式化樣式 53 } 54 }, 55 // 格式化stylus, 需安裝Manta's Stylus Supremacy插件 56 "stylusSupremacy.insertColons": false, // 是否插入冒號 57 "stylusSupremacy.insertSemicolons": false, // 是否插入分好 58 "stylusSupremacy.insertBraces": false, // 是否插入大括號 59 "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否換行 60 "stylusSupremacy.insertNewLineAroundBlocks": false, // 兩個選擇器中是否換行 61 "vetur.validation.template": false, 62 "editor.codeActionsOnSave": null //關閉vetur標簽閉合檢查（用於解決iview標簽報錯） 63 }
新版本的vscode需要更改為如下：
1 { 2 // 代碼文件頭部注釋 3 "fileheader.customMade": { 4 "Descripttion": "js", 5 "Version": "1.0", 6 "Author": "name", 7 "Date": "Do not edit", 8 "LastEditors": "name", 9 "LastEditTime": "Do not edit" 10 }, 11 "fileheader.cursorMode": { 12 "name": "", 13 "test": "test font", 14 "msg": "", 15 "param": "", 16 "return": "" 17 }, 18 19 // 代碼格式化 20 // vscode默認啟用了根據文件類型自動設置tabsize的選項 21 "editor.detectIndentation": false, 22 // 重新設定tabsize 23 "editor.tabSize": 2, 24 // #每次保存的時候自動格式化 25 "editor.formatOnSave": true, 26 // 添加 vue 支持 27 "eslint.validate": [ 28 "javascript", 29 "javascriptreact" 30 ], 31 // #讓prettier使用eslint的代碼格式進行校驗 32 "prettier.eslintIntegration": true, 33 // #去掉代碼結尾的分號 34 "prettier.semi": false, 35 // #使用帶引號替代雙引號 36 "prettier.singleQuote": true, 37 // #讓函數(名)和后面的括號之間加個空格 38 "javascript.format.insertSpaceBeforeFunctionParenthesis": true, 39 // #這個按用戶自身習慣選擇 40 "vetur.format.defaultFormatter.html": "js-beautify-html", 41 // #讓vue中的js按編輯器自帶的ts格式進行格式化 42 "vetur.format.defaultFormatter.js": "vscode-typescript", 43 "vetur.format.defaultFormatterOptions": { 44 "js-beautify-html": { 45 "wrap_attributes": "force-aligned" 46 // #vue組件中html代碼格式化樣式 47 } 48 }, 49 // 格式化stylus, 需安裝Manta's Stylus Supremacy插件 50 "stylusSupremacy.insertColons": false, // 是否插入冒號 51 "stylusSupremacy.insertSemicolons": false, // 是否插入分好 52 "stylusSupremacy.insertBraces": false, // 是否插入大括號 53 "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否換行 54 "stylusSupremacy.insertNewLineAroundBlocks": false, // 兩個選擇器中是否換行 55 "vetur.validation.template": false, 56 "editor.codeActionsOnSave": { 57 "source.fixAll.eslint": true 58 }, 59 "scf.python3.path": "", 60 "scf.python2.path": "" //關閉vetur標簽閉合檢查（用於解決iview標簽報錯） 61 }