vscode中eslint插件的配置-prettier配置無效

用vue-cli構建vue項目，會有個eslint代碼檢測的安裝

可vscode自帶代碼格式化是prettier格式（右鍵有格式化文件或alt+shift+f）

這時候要在vscode上裝一個eslint插件

裝完後在文件-----》首選項-------》設置裏找到settings.json（快捷鍵忘了）

 

 eslint配置以下，（配置的·具體詳情還有待研究，我也是網上copy的，不過親測可用）。保存配置後每次寫.vue文件只要control+s保存，就能夠把代碼格式改爲符合eslint標準

"eslint.autoFixOnSave": true,
// 專門寫Vue的eslint配置
"eslint.validate": [
    "javascript",
    "javascriptreact",
    { "language": "html", "autoFix": true },
    { "language": "vue", "autoFix": true }
]

 ---------------------------------------------------------------------------分割線------------------------------------------------------------------------------------------------------

 

在寫vue的時候不少人會選擇prettier+eslint來規範代碼格式

這時候有些人就很奇怪，我明明在setting.json裏配置了prettier的格式化規範，怎麼就不生效呢

其實用vscode作vue開發的時候都會安裝一個Vetur的插件來對.vue格式的文件進行處理，Vetur自帶了格式化，規範就是使用prettier

若是你有裝prettier插件，而且在設置或setting.json裏配置了prettier的話是無效的

如上圖，在設置勾選後配置後就會在setting.json裏生成對應配置代碼，不過因爲Vetur的存在，此時的prettier其實並未起做用（多是優先級問題吧，我也不清楚）

正確配置看下圖和Vetur官方文檔

 

官網連接

 因此說有兩種方法配置，一種是在根目錄下寫一個.prettier文件，文件裏的內容能夠參考網上其它文章。另外一種就是如上圖所示，在setting.json裏配置

------------------------------------------------------------------------------分割線---------------------------------------------------

eslint也是能格式化的，只是有侷限性，因此要prettier來配合