該配置用於vue開發，最終效果是儲存時自動根據eslint對js、html和css程式碼進行格式化。

vscode Vetur外掛

Vetur外掛用於識別vue檔案，原本vetur自帶格式化功能，但是和eslint會有衝突，所以沒用上。

vscode ESlint外掛

Eslint外掛用於根據工程目錄的.eslintrc.js配置檔案在編輯器中顯示一些錯誤提示，後面的自定格式化根據這裡的錯誤提示進行格式化操作。

基於vue-cli建立的專案 以下相關步驟需要注意：

建立的時候把Linter/Formatter選上(預設已選上)

下一步選擇Eslint+Prettier

下一步選擇Lint on save (在編輯儲存之後根據對程式碼格式進行檢測)

下一步選擇In dedicated config files(將eslint和prettier的配置抽離到獨立的檔案中)

建立完在package.json裡面可看到和eslint與prettier相關的依賴

在.eslintrc.js可以看到總體的eslint規則合併了vue、eslint和prettier的一些外掛庫進行語法分析(eslint針對js,vue、prettier針對js、html和css,這裡eslint和prettier的一些衝突已經處理)

到這一步，編譯的時候就能看到eslint報錯和警告了，但是還不能實現儲存自動格式化功能。

在檔案根目錄下建立.prettierrc對prettier格式化進行自定義規則設定，以下為我新增的規則

{
 /* 單引號包含字串 */
 "singleQuote": true,/* 不新增末尾分號 */
 "semi": false,/* 在物件屬性新增空格 */
 "bracketSpacing": true,/* 優化html閉合標籤不換行的問題 */
 "htmlWhitespaceSensitivity": "ignore"
}

在使用者設定新增自定義設定

mac中的位置

根據需要選擇全域性(User)或者工程(Workspace)的配置，點選右上角的編輯按鈕，開啟settings.json檔案

新增以下配置,使編輯器在儲存時自動eslint規則格式化

"editor.codeActionsOnSave": {
 "source.fixAll": true
},/* 關閉編輯器自帶儲存格式化功能，此功能會用Vetur進行格式化。*/
"editor.formatOnSave": false

這是我自己的自定義配置

非vue-cli建立的專案

單獨引入以下紅框中的幾個依賴

新增vscode Vetur和ESlint,.eslintrc.js、.prettierrc 和 settings.json的內容和上面一樣，這樣就可以實現儲存自動根據eslint進行格式化了。

總結

引入eslint、vue和prettier的一些相關的依賴

@vue/cli-plugin-eslint
@vue/eslint-config-prettier
babel-eslint
eslint
eslint-plugin-prettier
eslint-plugin-vue
prettier

• 安裝vscode Vetur和ESlint外掛
• 配置.eslintrc.js檔案
• 配置.prettierrc檔案
• 配置.settings.json檔案

到此這篇關於vscode 配置vue+vetur+eslint+prettier自動格式化功能的文章就介紹到這了,更多相關vscode vue vetur eslint prettier內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！