關於eslint+prettier+husky的設定及說明

2022-07-31 14:01:08

一.eslint

eslint它規範的是程式碼偏向語法層面上的風格。本篇文章以一個基本的vue專案，來說明eslint+prettier+husky設定專案程式碼規範，為了更好的描述本文，我恢復了vscode的預設設定（即未安裝eslint,prettier等外掛，setting中也沒有相關設定）

1.新建一個空的vue2.x專案(不安裝eslint)

vue create eslint-test

2.單獨安裝selint

npm install eslint --save-dev

npx eslint --init

生成.eslintrc.js檔案：

module.exports = {
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",//繼承Eslint中推薦的（打鉤的）規則項http://eslint.cn/docs/rules/
        "plugin:vue/essential"// 此項是用來設定vue.js風格
    ],
    "parserOptions": {
        "ecmaVersion": 13,
        "sourceType": "module"
    },
    "plugins": [
        "vue"
    ],
    "rules": {
    }
};

3.檢視這個推薦的預設規則

這裡的規則，寫在後面的會覆蓋前面的，並且rules中的規則最後會覆蓋這裡的，所以我們自定義規則就是寫在rules中，才能覆蓋之前的規則，從而生效。

"extends": [
    "eslint:recommended",//繼承Eslint中推薦的（打鉤的）規則項http://eslint.cn/docs/rules/
    "plugin:vue/essential"// 此項是用來設定vue.js風格https://eslint.vuejs.org/rules
],

quotes - Rules - ESLint中文

Available rules | eslint-plugin-vue (vuejs.org)

這個預設規則是怎麼生效的呢？舉個例子，我們點進去連結，可以看到這個no-debugger是打上了對勾（也就是"eslint:recommended"）中生效的規則，然後我們再在專案中寫個debugger，然後命令列執行檢查eslint的命令，就會報錯了。

專案根目錄執行：

npx eslint --ext .vue src/
等價於：./node_modules/.bin/eslint --ext .vue src/
--ext:可以指定在指定目錄/檔案
.vue：vue檔案
src/：在src目錄下匹配

4.自定義規則

Eslint附帶了大量的校驗規則，這些規則的值分別有如下規律：

off | 0 :表示關閉規則。
warn | 1 :表示將該規則轉換為警告。
error | 2 :表示將該規則轉換為錯誤。

常見的rules規則，可以看官網：List of available rules - ESLint中文

// "semi": [2, "always"],//語句強制分號結尾
// "quotes": [2, "double"],//引號型別 ""
//"no-alert": 0,//禁止使用alert
//"no-console": 2,//禁止使用console
//"no-const-assign": 2,//禁止修改const宣告的變數
//"no-debugger": 2,//禁止使用debugger
//"no-duplicate-case": 2,//switch中的case標籤不能重複
//"no-extra-semi": 2,//禁止多餘的冒號
//"no-multi-spaces": 1,//不能用多餘的空格

當我們這樣自定義設定結尾必須分號之後，再執行檢查，專案中就會報對應的錯：

5.package.json中設定檢查命令列

上文中，我們是手動輸入命令列來檢查程式碼是否符合eslint規範的，這樣每次檢查都要輸入一遍，有的人要是記不住這命令怎麼辦？於是可以在package.json的script中寫死這個指令碼：

"lint": "eslint --ext .js --ext .jsx --ext .vue src/",

於是，專案根目錄執行npm run lint，實際上就是執行：

npx eslint --ext .js --ext .jsx --ext .vue src/

從而實現程式碼的檢查：

6.eslint外掛自動檢查規範

難道每次寫完一句程式碼，都要npm run lint來檢查下是否符合規範嘛？那樣太麻煩了。於是有eslint外掛，這裡我用的是vscode，開啟外掛市場，搜尋到eslint，安裝即可：

安裝了之後什麼效果呢？就是它會自動檢查你的程式碼是否符號規範，並且會在編輯器中標識出來哪裡不符合規範，底下終端處還會羅列出問題：

7.package.json中設定自動修復命令列

比如說上文咱們寫了好多這種bug，一個一個手動修復，太麻煩了。eslint提供了一個–fix的命令列，可以實現自動修復不符合規範的程式碼，但是這種修復不是萬能的，官網中說，有這個（扳手）