引言

VsCode + Vue + ESLint + Prettier 實(shí)現(xiàn) 代碼格式規(guī)范 + 保存自動(dòng)修復(fù)代碼(js+vue)

先上圖看效果

前言

刪繁就簡，字斟句酌，只寫通俗易懂的文章；

我曾在很長一段時(shí)間里，都沒有搞清楚 ESLint 的正確配置方法。網(wǎng)上的文章質(zhì)量也是一言難盡，造成了許多的誤導(dǎo)。現(xiàn)在，我理清楚了 ESLint 的配置邏輯。撰寫此文，以作日后查漏補(bǔ)缺之用，也希望能對同樣迷惑的你帶來幫助；

親測，歷經(jīng)多次測試。不管是在創(chuàng)建新項(xiàng)目，還是改造舊項(xiàng)目時(shí)，跟著教程進(jìn)行配置都是 ok 的；

系統(tǒng)環(huán)境:

node.js 版本是：v12.14.0
npm 版本是：6.13.4
vue-cli 版本是：vue/cli 4.5.11

安裝 VsCode 插件

首先安裝兩個(gè) VsCode 插件

ESLint

Prettier - Code formatter

配置 VsCode "Workspace.json"

路徑：組合鍵 ctrl+shift+p -> 首選項(xiàng)：打開用戶設(shè)置 -> 切換到工作區(qū)標(biāo)簽 -> 鼠標(biāo)點(diǎn)擊右上角打開設(shè)置(json)

如果編輯器是英文狀態(tài)下就是

路徑：組合鍵 ctrl+shift+p -> Preferences: Open User Settings -> 切換到Workspace標(biāo)簽 -> 鼠標(biāo)點(diǎn)擊右上角Open Settings(json)

復(fù)制粘貼下面的 json 代碼并保存即可

Workspace(工作區(qū)).json

{
  // 將prettier設(shè)置為默認(rèn)格式化程序(在編輯器中有可能被其他Formatter占用，所以將prettier設(shè)置為默認(rèn)Formatter)
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // 保存時(shí)自動(dòng)格式化 (根據(jù)根目錄下‘.prettierrc文件配置項(xiàng)')
  "editor.formatOnSave": true,
  // Enable per-language
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  // 為ESLint啟用“保存時(shí)自動(dòng)修復(fù)”，并且仍然具有格式和快速修復(fù)功能
  "editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.fixAll.eslint": true
  }
}

配置 vue 的 "package.json"

完整的配置項(xiàng)一共需要下面 6 個(gè) ESLint 相關(guān)的插件

{
  ...
  "devDependencies": {
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.8.0",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^6.2.2"
  }
  ...
}

如果缺少對應(yīng)的插件就在 devDependencies 對象內(nèi)加上（多余的 ESLint 插件可以刪掉）

不要忘記重新 npm install 哦

配置 vue 的 ".eslintrc.js"

• 在 vue2.x 版本中，".eslintrc.js" 文件代碼為

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    "plugin:vue/essential",
    "plugin:vue/recommended",
    "eslint:recommended",
    "@vue/prettier",
  ],
  parserOptions: {
    parser: "babel-eslint",
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
  },
};

在 vue3.x 版本中，".eslintrc.js" 文件只有一點(diǎn)不同，其它代碼都一致。不同處為

module.exports = {
  ...
  extends: [
    "plugin:vue/vue3-essential",
    "plugin:vue/vue3-recommended",
  ],
  ...
};

當(dāng)然，你的舊項(xiàng)目也有可能把 Eslint 配置寫在了其它文件里面，注意檢查沖突

如果同一目錄下有多個(gè)配置文件，ESLint 只會使用一個(gè)。優(yōu)先順序如下：

.eslintrc.js
.eslintrc.cjs
.eslintrc.yaml
.eslintrc.yml
.eslintrc.json
package.json

配置 vue 的 ".prettierrc"

在 vue3.x 中還需要配置 .prettierrc文件。在項(xiàng)目根目錄添加，跟.eslintrc.js 文件同級

為什么 2.x 版本不需要配置，而 3.x 需要呢？因?yàn)?3.x 版本中，ESLint 和 Prettier 會有末尾逗號的沖突。ESLint 默認(rèn)規(guī)則是結(jié)尾不加逗號，Prettier 規(guī)則結(jié)尾要加逗號。代碼保存的時(shí)候互相打架，誰也不服誰。所以就新增.prettierrc文件，配置結(jié)尾不加逗號；

{
"trailingComma": "none"
}

當(dāng)然，你若是想要在 vue2.x 版本中配置.prettierrc，我也攔不住你，純看個(gè)人喜好

注意，你的舊項(xiàng)目也有可能把 Prettier 配置寫在了其它文件里面，注意檢查沖突

配置 "eslint --fix" 一鍵修復(fù)

package.json文件，改造 lint 為如下代碼

package.json

  "scripts": {
    "lint": "eslint --fix --ext .js,.vue src/",
  },

需要進(jìn)行一鍵修復(fù)的時(shí)候就執(zhí)行命令

npm run lint

ESLint 就會自動(dòng)一件修復(fù)項(xiàng)目中所有不符合規(guī)則的頁面， 對于不能自動(dòng)修復(fù)的頁面，將在控制臺打印出報(bào)錯(cuò)頁面位置和修復(fù)意見，需要自己手動(dòng)更改

項(xiàng)目龐大、頁面多的的時(shí)候，運(yùn)行 Npm run lint，執(zhí)行一鍵修復(fù)的時(shí)間比較久，耐心等待

備注：src/ 是將要要進(jìn)行校驗(yàn)的代碼目錄，若想要添加多個(gè)目錄，用空格隔開

配置 ESlint 提交時(shí)檢測

"package.json" 文件中添加代碼

"gitHooks": {
  "pre-commit": "lint-staged"
},
"lint-staged": {
  "*.{js,jsx,vue}": [
    "vue-cli-service lint",
    "git add"
  ]
}

測試配置效果

上面的流程都配置完畢之后，記得重啟編輯器

把下面這段測試代碼復(fù)制到項(xiàng)目中，然后 ctrl+s 保存，檢測配置是否成功

<template>
        <div class="testPage">
    <div
          v-for="(item, index) in 10"
        :key="index"
      class="test"
  ref="test"
       @click="test"
    >
    </div>
</div>
</template>
<script>
export default {
  data() {
    return {};
  },
  watch: {},
  mounted() {},
  destroyed() {},
  methods: {
  methods: {
    test() {
      ({greeting = "hello", greeted = '"World"', silent = false, onMouseOver,})=> {
  if(!greeting){return null};
     // TODO: Don't use random in render
  let num = Math.floor (Math.random() * 1E+7).toString().replace(/\.\d+/ig, "")
  return <div className='HelloWorld' title={`You are visitor number ${ num }`} onMouseOver={onMouseOver}>
    <strong>{ greeting.slice( 0, 1 ).toUpperCase() + greeting.slice(1).toLowerCase() }</strong>
    {greeting.endsWith(",") ? " " : <span style={{color: 'grey'}}>", "</span> }
    <em>
	{ greeted }
	</em>
    { (silent)
      ? "."
      : "!"}
    </div>;
}
    },
  },
  },
  name: "testPage",
};
</script>

問題排查

如果還是配置不成功，檢查下面幾處文件

User(用戶).json

路徑：組合鍵 ctrl+shift+p -> 首選項(xiàng)：打開用戶設(shè)置 -> 切換到用戶標(biāo)簽 -> 鼠標(biāo)點(diǎn)擊右上角打開設(shè)置(json)

看看有沒有 ESLint 和 Prettier 等配置代碼，有的話就刪除。下面是我的配置（僅供參考）

{
  // 修改多行編輯快捷鍵
  "editor.multiCursorModifier": "ctrlCmd",
  // 以像素為單位控制字號
  "editor.fontSize": 16,
  // 設(shè)置縮進(jìn)為兩個(gè)空格
  "editor.tabSize": 2,
  "explorer.confirmDelete": false,
  "editor.wordSeparators": "`~!@#$%^&*()=+[{]}\\|;:'\",.<>/?",
  // 關(guān)閉警告（Vetur在 /xxxx/xxxxxx 中找不到tsconfig.json,jsconfig.json）
  "vetur.ignoreProjectWarning": true,
  "security.workspace.trust.untrustedFiles": "open",
  "terminal.integrated.profiles.windows": {
    "PowerShell": {
      "source": "PowerShell",
      "icon": "terminal-powershell"
    },
    "Command Prompt": {
      "path": [
        "${env:windir}\\Sysnative\\cmd.exe",
        "${env:windir}\\System32\\cmd.exe"
      ],
      "args": [],
      "icon": "terminal-cmd"
    },
    "Git Bash": {
      "source": "Git Bash"
    },
    "Windows PowerShell": {
      "path": "C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe"
    }
  },
  "terminal.integrated.defaultProfile.windows": "Windows PowerShell"
}

.prettierrc

檢查項(xiàng)目根目錄是否有 .prettierrc 文件，也許會跟 ESLint 規(guī)則沖突，如果出現(xiàn)沖突，自行搜索文檔解決

{
  "endOfLine": "auto"
}

.eslintrc.js

.eslintrc.js 文件同理

package.json

曾經(jīng)碰到過這樣的一個(gè)報(bào)錯(cuò)

npm ERR! code EJSONPARSE
npm ERR! file D:\我自己的項(xiàng)目名\package.json
npm ERR! JSON.parse Failed to parse json
npm ERR! JSON.parse Unexpected token } in JSON at position 218 while parsing near '... .js,.vue src/",
npm ERR! JSON.parse   },
npm ERR! JSON.parse   "dependencies"...'
npm ERR! JSON.parse Failed to parse package.json data.
npm ERR! JSON.parse package.json must be actual JSON, not just JavaScript.

檢查發(fā)現(xiàn)，結(jié)果竟然是 lint 這一行結(jié)尾多加了一個(gè)逗號，如下所示

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "eslint --fix --ext .js,.vue src/",
  },

你可能會問，為啥沒有自動(dòng)格式化呢？情景如下

電腦剛拉下來倉庫代碼；

想運(yùn)行 npm run serve，結(jié)果沒有 node_modules，無法運(yùn)行，所以執(zhí)行 npm install；

之后執(zhí)行 npm run serve，發(fā)現(xiàn)一大片的告警提示(Delete ?eslint)；

打算進(jìn)行一鍵修復(fù)，又想到?jīng)]有做 ESLint 一鍵修復(fù)配置，所以想把 npm run lint 加上；

加 lint 的過程中，結(jié)尾多了一個(gè)逗號，報(bào)錯(cuò)；

重啟編輯器

VsCode 插件是否禁用

檢查一下兩個(gè)插件，如果禁用請打開

VsCode 插件 —— ESLint

VsCode 插件 —— Prettier - Code formatter

報(bào)錯(cuò) Delete ?eslint

有幾種處理方式，目前為止我也沒有得出哪種更好的結(jié)論，大家可以各自斟酌

全局更改 git

在 .prettierrc配置 "endOfLine": "auto"

尾聲

建議創(chuàng)建項(xiàng)目初期就使用 ESLint ，否則后期項(xiàng)目日益龐大，免不了會出現(xiàn)許多需要手動(dòng)優(yōu)化的語法錯(cuò)誤，改動(dòng)起來麻煩

建議代碼格式規(guī)范，在 ESLint 配置初期就定好規(guī)則，后面就不要再修改了。避免來回折騰，產(chǎn)生不必要的麻煩（畢竟不是所有的團(tuán)隊(duì)成員都樂于接受這玩意）

如果要在舊項(xiàng)目中新增 ESLint 配置，建議先讓團(tuán)隊(duì)成員把已有代碼全部都提交到 git 倉庫，然后由一人負(fù)責(zé)拉取合并代碼，運(yùn)行 npm run lint 進(jìn)行全局格式化處理以后，再讓團(tuán)隊(duì)成員拉取一次代碼，再進(jìn)行后續(xù)開發(fā)。否則，別人一提交就到處報(bào)錯(cuò)，體驗(yàn)感很差

建議團(tuán)隊(duì)成員使用同一個(gè) IDE，IDE 建議使用 VScode.本人沒有做過其他 IDE 下的 自動(dòng)格式化 ESLint 配置，如果需要請自行摸索

以上就是vue基礎(chǔ)ESLint Prettier配置教程詳解的詳細(xì)內(nèi)容，更多關(guān)于vue ESLint Prettier配置的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論