使用VSCode 官方原版寫VueJs 的代碼時候，總是會遇到一大段的紅色，點開來仔細查看，發現是原來 不符合ESLint風格問題 ，百度了一波解決方案，這裏 看到一個比較好的解決方案，
1.安裝插件
首先我們需要安裝如下三個插件：
eslint，prettier-Code formatter，vetur
我們需要在VSCode的左上角點擊這個像 一個箱子一樣的東西
我這裏全部安裝好了
2.覆寫VSCode Setting.json文件
找到你的setting.json文件，這個 需要 點擊 文件-》首選項-》設置
然後在 打開的setting界面，我們點擊右上角這個小括號
表明我們要打開setting.json文件，而不是在界面裏面去設置這些屬性值
然後，使用 下面的代碼 覆蓋掉你的屬性值：
{
"editor.fontSize": 18,
"editor.insertSpaces": false,
"workbench.editor.enablePreview": false, //打開文件不覆蓋
"search.followSymlinks": false, //關閉rg.exe進程
"editor.minimap.enabled": false, //關閉快速預覽
"files.autoSave": "afterDelay", //打開自動保存
"editor.lineNumbers": "on", //開啓行數提示
"editor.quickSuggestions": {
//開啓自動顯示建議
"other": true,
"comments": true,
"strings": true
},
"editor.tabSize": 2, //製表符符號eslint
"editor.formatOnSave": true, //每次保存自動格式化
"eslint.autoFixOnSave": true, // 每次保存的時候將代碼按eslint格式進行修復
"prettier.eslintIntegration": true, //讓prettier使用eslint的代碼格式進行校驗
"prettier.semi": false, //去掉代碼結尾的分號
"prettier.singleQuote": true, //使用帶引號替代雙引號
"javascript.format.insertSpaceBeforeFunctionParenthesis": true, //讓函數(名)和後面的括號之間加個空格
"vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html
"vetur.format.defaultFormatter.js": "vscode-typescript", //讓vue中的js按編輯器自帶的ts格式進行格式化
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned" //屬性強制折行對齊
}
},
"eslint.validate": [
//開啓對.vue文件中錯誤的檢查
"javascript",
"javascriptreact",
{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
}
]
//"workbench.colorTheme": "Kimbie Dark"
}
保存退出
3.重啓生效
重啓完成之後，有的時候根本不需要重啓，現在就能愉快的寫(裝)代(逼)碼了.
感謝大神們的博客支持
參考博客：