vue項(xiàng)目配置eslint保存自動(dòng)格式化問題

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

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

vue配置eslint保存自動(dòng)格式化

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

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

2，如何找到配置文件

3，setting.json

4，需要安裝的插件

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

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

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

如何找到配置文件位置

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

setting.json配置

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

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

這個(gè)是我百度貼了一些上去

{
? // vscode默認(rèn)啟用了根據(jù)文件類型自動(dòng)設(shè)置tabsize的選項(xiàng)
? "editor.detectIndentation": false,
? // 重新設(shè)定tabsize
? "editor.tabSize": 2,
? // #每次保存的時(shí)候自動(dòng)格式化
? "editor.formatOnSave": true,
? "editor.formatOnType": true,
? // #每次保存的時(shí)候?qū)⒋a按eslint格式進(jìn)行修復(fù)
? "eslint.autoFixOnSave": true,
? "eslint.format.enable": true,
? // 添加 vue 支持
? "eslint.validate": [
? ? "javascript",
? ? "javascriptreact",
? ? {
? ? ? "language": "vue",
? ? ? "autoFix": true
? ? }
? ],
? // ?#讓prettier使用eslint的代碼格式進(jìn)行校驗(yàn)
? "prettier.eslintIntegration": true,
? // ?#去掉代碼結(jié)尾的分號(hào)
? "prettier.semi": false,
? // ?#使用帶引號(hào)替代雙引號(hào)
? "prettier.singleQuote": true,
? // ?#讓函數(shù)(名)和后面的括號(hào)之間加個(gè)空格
? "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
? // #這個(gè)按用戶自身習(xí)慣選擇
? "vetur.format.defaultFormatter.html": "js-beautify-html",
? // #讓vue中的js按編輯器自帶的ts格式進(jìn)行格式化
? "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, // 是否插入冒號(hào)
? "stylusSupremacy.insertSemicolons": false, // 是否插入分好
? "stylusSupremacy.insertBraces": false, // 是否插入大括號(hào)
? "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 // 兩個(gè)選擇器中是否換行
}

需要安裝的vscode插件

Eslint
Prettier ESLint
Vetur

選擇自動(dòng)格式化程序

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

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

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

1. 需求插件

ESLint （讀取 ESLint 配置文件進(jìn)行語法檢測(cè)）
Prettier ESLint（按照 ESLint 配置文件進(jìn)行格式化）

2. 修改默認(rèn)格式化插件

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

2.2 選擇「配置默認(rèn)格式化程序」

2.3 選擇「Prettier ESLint」

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

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

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

3.2 點(diǎn)擊用戶區(qū)的設(shè)置 JSON 圖標(biāo) 打開 JSON 文件

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

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

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

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

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

3.4 粘貼后如下圖