vue項目配置eslint保存自動格式化問題

更新時間：2022年09月13日 14:08:25 作者：深圳最菜的前端

這篇文章主要介紹了vue項目配置eslint保存自動格式化問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue配置eslint保存自動格式化

vue項目中有保存自動格式化，還是很舒服的，滿足了大多數(shù)強迫癥

1，用戶設(shè)置和工作區(qū)設(shè)置

2，如何找到配置文件

3，setting.json

4，需要安裝的插件

5，設(shè)置默認格式化程序

在VSCode中，兩個層級的設(shè)置分別為：

用戶設(shè)置：應(yīng)用于所有工作區(qū)的全局設(shè)置。
工作區(qū)設(shè)置：只對當前工作區(qū)有效的設(shè)置。
相比之下，工作區(qū)設(shè)置具有更高的優(yōu)先級，即當工作區(qū)設(shè)置與用戶設(shè)置相沖突時，以工作區(qū)設(shè)置為準，但是一個用戶設(shè)置就夠了

如何找到配置文件位置

方法一：Ctrl + Shift + P 然后搜索 Preferences: Open Settings (UI)
方法二：Ctrl + Shift + P 然后搜索 Preferences: Open Settings (JSON)

setting.json配置

最重要的代碼，就下面的，其他的都可以根據(jù)自己實際開發(fā)去設(shè)置

? // #每次保存的時候自動格式化
? "editor.formatOnSave": true,
? "editor.formatOnType": true,
? // #每次保存的時候?qū)⒋a按eslint格式進行修復(fù)
? "eslint.autoFixOnSave": true,
? "eslint.format.enable": true,

這個是我百度貼了一些上去

{
? // vscode默認啟用了根據(jù)文件類型自動設(shè)置tabsize的選項
? "editor.detectIndentation": false,
? // 重新設(shè)定tabsize
? "editor.tabSize": 2,
? // #每次保存的時候自動格式化
? "editor.formatOnSave": true,
? "editor.formatOnType": true,
? // #每次保存的時候?qū)⒋a按eslint格式進行修復(fù)
? "eslint.autoFixOnSave": true,
? "eslint.format.enable": true,
? // 添加 vue 支持
? "eslint.validate": [
? ? "javascript",
? ? "javascriptreact",
? ? {
? ? ? "language": "vue",
? ? ? "autoFix": true
? ? }
? ],
? // ?#讓prettier使用eslint的代碼格式進行校驗
? "prettier.eslintIntegration": true,
? // ?#去掉代碼結(jié)尾的分號
? "prettier.semi": false,
? // ?#使用帶引號替代雙引號
? "prettier.singleQuote": true,
? // ?#讓函數(shù)(名)和后面的括號之間加個空格
? "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
? // #這個按用戶自身習慣選擇
? "vetur.format.defaultFormatter.html": "js-beautify-html",
? // #讓vue中的js按編輯器自帶的ts格式進行格式化
? "vetur.format.defaultFormatter.js": "vscode-typescript",
? "vetur.format.defaultFormatterOptions": {
? ? "js-beautify-html": {
? ? ? "wrap_attributes": "force-aligned"
? ? ? // #vue組件中html代碼格式化樣式
? ? }
? },
? // 格式化stylus, 需安裝Manta's Stylus Supremacy插件
? "stylusSupremacy.insertColons": false, // 是否插入冒號
? "stylusSupremacy.insertSemicolons": false, // 是否插入分好
? "stylusSupremacy.insertBraces": false, // 是否插入大括號
? "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否換行
? "stylusSupremacy.insertNewLineAroundBlocks": false,
? "editor.fontSize": 18,
? "[vue]": {
? ? "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
? },
? "editor.codeActionsOnSave": {
? ? "source.fixAll.eslint": true
? },
? "bracketPairColorizer.depreciation-notice": false // 兩個選擇器中是否換行
}

需要安裝的vscode插件

Eslint
Prettier ESLint
Vetur

選擇自動格式化程序

停留在頁面，然后右鍵—選擇使用xxx格式化文檔，然后出現(xiàn)下方圖片

這樣，就能實現(xiàn)保存代碼的時候自動格式化啦

插件實現(xiàn)按照 ESLint 規(guī)則自動格式化

1. 需求插件

ESLint （讀取 ESLint 配置文件進行語法檢測）
Prettier ESLint（按照 ESLint 配置文件進行格式化）

2. 修改默認格式化插件

2.1 找到任意代碼文件右鍵點擊代碼區(qū)域選擇「使用…格式化文檔」

2.2 選擇「配置默認格式化程序」

2.3 選擇「Prettier ESLint」

到此，已經(jīng)可以實現(xiàn)「Alt + Shift + F」進行自動格式化啦！

3. 「Ctrl + S」保存時按照 ESLint 規(guī)則自動格式化

3.1 找到菜單欄的文件 -> 首選項 -> 設(shè)置

3.2 點擊用戶區(qū)的設(shè)置 JSON 圖標打開 JSON 文件

注意: 工作區(qū)和用戶區(qū)的區(qū)別

用戶區(qū)：應(yīng)用于當前操作系統(tǒng)用戶，只要是在當前電腦上開發(fā)，任意項目都會生效該配置（慎重修改）

工作區(qū)：只應(yīng)用于當前項目，如果更換項目配置會失效

3.3 將以下配置粘貼進設(shè)置 JSON 文件中

{
  "eslint.enable": true,
  "eslint.run": "onType",
  "eslint.options": {
      "extensions": [
          ".js",
          ".vue",
          ".jsx",
          ".tsx"
      ]
  },
  "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
  }
}

3.4 粘貼后如下圖