集成CommitLInt+ESLint+Prettier+StyleLint+LintStaged

代碼可讀性低代碼

代碼規范落地難
代碼格式難統一
代碼質量低下

配置 ESLint

ESLint 是一個用來識別 ECMAScript 并且按照規則給出報告的代碼檢測工具，使用它可以避免低級錯誤和統一代碼的風格。它擁有以下功能：
- 查出 JavaScript 代碼語法問題。
- 根據配置的規則，標記不符合規范的代碼。
- 自動修復一些結構、風格問題。
防止代碼很難維護，可以幫我們檢查有沒有死循環，有沒有定義但未使用的變量等等。
ESLint官方文檔：ESLint - Pluggable JavaScript linter - ESLint中文

安裝依賴

pnpm install -D eslint @eslint/create-config

@eslint/create-config：eslint配置文件初始化工具

生成配置文件

#  生成 ESLint 配置文件模板
npx eslint --init

# 出現如下選擇# 選擇2 我們會使用 prettier 進行代碼風格校驗
How would you like to use ESLint?
1.只檢查語法
2.檢查語法并提示問題
3.檢查語法、提示問題并且強制使用一些代碼風格# 你的項目用的哪一種模塊化方式 選擇1
What type of modules does your project use?
1.ES6
2.CommonJS
3.None# 使用的框架 選擇2
Which framework does your project use?
1.React
2.Vue.js
3.None# 項目是否使用TS yes
Does your project use TypeScript?# 項目在哪里跑的 選擇1
Where does your code run?
1.browser
2.node# 項目用哪種配置文件 選擇1
What format do you want your config file to be in?
1.JavaScript
2.YAML
3.JSON# 是否立即安裝需要的依賴
Would you like to install them now?
# 會幫我們安裝如下插件
# pnpm install -D eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest

熟悉之后我們就可以不使用配置生成工具
直接新建配置文件進行配置即可
ESLint配置文件名稱可以為：.eslintrc.js、.eslint.config.js （根據個人習慣選擇即可）

這里是我常用的配置規則，更多配置規則請查閱ESLint中文。
單獨的語法配置需要在rules中編寫，全部配置請參考：List of available rules - ESLint中文

module.exports = {// 使 eslint 支持 node 與 ES6env: {browser: true,es2021: true,node: true,},// 引入推薦的語法校驗規則extends: ['plugin:vue/vue3-recommended','plugin:@typescript-eslint/recommended',],overrides: [],/* 這里一定要配置對 先使用vue-eslint-parser 再使用@typescript-eslint/parser先解析 <template> 標簽中的內容 然后再解析 vue <script> 標簽中的 TS 代碼*/// 選擇使用的解析器parser: 'vue-eslint-parser',// 解析器的詳細配置parserOptions: {// 使用最新版 ES 語法ecmaVersion: 'latest',// 使用 ESLint TS 解析器parser: '@typescript-eslint/parser',// 使用 ES 模塊化規范sourceType: 'module',},// 使用的插件plugins: ['vue', '@typescript-eslint'],// 自定義規則rules: {},
};

配置完規則后我們配置一條指令用于代碼質量的修復

// package.json
// --cache 為僅檢測改動過的代碼
// --max-warnings 0 表示出現超過0個警告強制eslint以錯誤狀態推出
"scripts": {"lint:eslint": "eslint --cache --max-warnings 0 {src,mock}/**/*.{vue,ts,tsx} --fix",
},

我們還可以配置忽略文件，讓 ESLint 不對這些文件進行校驗。
新建 .eslintignore 進行配置。

node_modules
*.md
.vscode
.idea
dist
/public
/docs
.husky
.local
/bin

自動修復

大部分IDE支持在修改代碼后進行自動修復

WebStorme：直接在Setting中搜索ESLint即可進行配置
VSCode：需要在項目目錄下加入如下配置文件，還需要下載ESLint插件

/.vscode/settings.json

{"editor.codeActionsOnSave": {"source.fixAll": true}
}

配置 Prettier

多人協作的項目開發中，保持統一的代碼風格是一件很重要的事。
Prettier就可以幫我們做到這個事情，但是ESLint不是也能規范代碼風格么？可以是可以，但是相比Prettier差了很多，術業有專攻，Prettier可以讓我們擁有超級整齊的代碼。可以幫助我們配置是否使用分號，縮進的格式等等。
官方文檔：Prettier 中文網 · Prettier 是一個“有態度”的代碼格式化工具

安裝依賴

pnpm install -D prettier

添加配置文件

Prettier配置文件名稱可以為：.ptettierrc.js、.ptettier.config.js （根據個人習慣選擇即可）
下面是我常用的一些配置，更多配置規則大家可以前官網查看：Options · Prettier 中文網

module.exports = {printWidth: 120, //單行長度tabWidth: 4, //縮進長度useTabs: true, //使用空格代替tab縮進semi: true, //句末使用分號singleQuote: true, //使用單引號endOfLine: "auto",trailingComma: "none", // 對象最后一個屬性末尾是否要逗號
};

配置一個指令便于我們使用prettier進行修復代碼風格

{"script": {"lint:prettier": "prettier --write **/*.{js,json,tsx,css,less,scss,vue,html,md}",}
}

解決ESLint與Prettier沖突問題

安裝依賴

pnpm install -D eslint-config-prettier eslint-plugin-prettier

eslint-config-prettier 的作用是關閉eslint中與prettier相互沖突的規則。
eslint-plugin-prettier 的作用是賦予eslint用prettier格式化代碼的能力。安裝依賴并修改.eslintrc文件。

配置ESLint

/ 此配置在eslint配置文件中新增 
"extends": ["eslint:recommended","plugin:vue/vue3-recommended","plugin:@typescript-eslint/recommended","plugin:prettier/recommended" // 在最后面新增extends
],

配置完成之后我們對代碼風格的配置只會使用prettier的配置，相當于將eslint中沖突的規則覆蓋掉了。
我們還可以配置忽略文件，讓 Prettier 不對這些文件進行校驗。
新建 .prettierignore 進行配置。

/dist/*
/node_modules/**

配置 StyleLint

tylelint 是一個強大、先進的 CSS 代碼檢查器（linter），可以幫助你規避 CSS 代碼中的錯誤并保持一致的編碼風格。
你可能會想：WTF😓，怎么有有一個配置編碼風格的，不是已經有Prettier了么。StyleLint，是專用于規范樣式代碼的工具，可以做到一些Prettier做不到的功能，有了它能讓我們的樣式代碼（CSS/Less/Scss）更加美觀，比如說對CSS樣式代碼進行順序規定。
但是 StyleLint 與 Prettier 也有配置沖突，所以我們也要將 StyleLint 中與 Prettier 沖突的配置關閉。

安裝依賴

pnpm install -D stylelint stylelint-config-standardpnpm install -D stylelint-config-prettier stylelint-config-html stylelint-order stylelint-less postcss-html postcss-less stylelint-config-standard-vue

stylelint-config-standard：StyleLint 推薦配置
stylelint-config-prettier：關閉與 prettier 沖突的配置
stylelint-config-standard-vue：StyleLint Vue 項目推薦配置
postcss-html postcss-less：支持檢查 less 與 html
stylelint-order：支持 css 樣式排序

添加配置文件

Prettier配置文件名稱可以為：.stylelintrc.js、.stylelint.config.js （根據個人習慣選擇即可）
更多詳細配置規則請查看官方文檔：List of rules | Stylelint 中文文檔 (bootcss.com)

module.exports = {// 繼承推薦規范配置extends: ['stylelint-config-standard','stylelint-config-prettier','stylelint-config-recommended-scss','stylelint-config-standard-vue',],// 添加規則插件plugins: ['stylelint-order'],// 不同格式的文件指定自定義語法overrides: [{files: ['**/*.(scss|css|vue|html)'],customSyntax: 'postcss-scss',},{files: ['**/*.(html|vue)'],customSyntax: 'postcss-html',},],// 忽略檢測文件ignoreFiles: ['**/*.js','**/*.jsx','**/*.tsx','**/*.ts','**/*.json','**/*.md','**/*.yaml',],// 自定義配置規則rules: {// 便于配置變量 關閉未知屬性檢測'property-no-unknown': null,// 指定類選擇器的模式'selector-class-pattern': null,// 允許 Vue 的 global'selector-pseudo-class-no-unknown': [true,{ignorePseudoClasses: ['global'],},],// 允許 Vue 的 v-deep'selector-pseudo-element-no-unknown': [true,{ignorePseudoElements: ['v-deep'],},],// 允許對應內核前綴'property-no-vendor-prefix': null,// 指定樣式的排序 修復后會幫我們自動整理CSS樣式的順序'order/properties-order': ['position','top','right','bottom','left','z-index','display','justify-content','align-items','float','clear','overflow','overflow-x','overflow-y','padding','padding-top','padding-right','padding-bottom','padding-left','margin','margin-top','margin-right','margin-bottom','margin-left','width','min-width','max-width','height','min-height','max-height','font-size','font-family','text-align','text-justify','text-indent','text-overflow','text-decoration','white-space','color','background','background-position','background-repeat','background-size','background-color','background-clip','border','border-style','border-width','border-color','border-top-style','border-top-width','border-top-color','border-right-style','border-right-width','border-right-color','border-bottom-style','border-bottom-width','border-bottom-color','border-left-style','border-left-width','border-left-color','border-radius','opacity','filter','list-style','outline','visibility','box-shadow','text-shadow','resize','transition',],},
};

我們還可以配置忽略文件，讓 StyleLint 不對這些文件進行校驗。
新建 .stylelintignore 進行配置。

/dist/*
/public/*
public/*
/mock/*
/node_modules/*
/types/*

配置 Husky

團隊協作時，我們會遇到多種問題，最讓人難受的就是每個人書寫的代碼風格不一致😅，使用的規范不一致，導致團隊協作效率極低，代碼可讀性差。
這時候就需要 Husky 來幫忙了，它可以幫助我們在代碼提交前后進行一些自定義的操作，像是代碼風格的校驗，并且它支持所有的 Git 鉤子（鉤子是你可以放在鉤子目錄中觸發的程序在 Git 執行的某些點執行的操作）。

Git全部鉤子的詳細介紹：Git - githooks Documentation (git-scm.com)
本文用到的鉤子：

在 pre-commit 觸發時進行代碼格式驗證，在 commit-msg 觸發時對 commit 消息和提交用戶進行驗證。
| git hook | 執行時期 | 備注 |
| — | — | — |
| pre-commit | git commit 執行前 | git commit --no verify 命令可以繞過該鉤子 |
| commit-msg | git commit 執行前 | git commit --no verify 命令可以繞過該鉤子 |

安裝依賴

pnpm install -D husky

然后配置一個初始化 Hysky 的命令

// package.json
{"script": {"prepare": "husky install"}
}

運行這個命令

# 運行后會初始化husky
pnpm run prepare

運行之后就會出現.husky文件夾，之后我們就可以配置在GItHook中執行的操作啦😀。

配置 LintStaged

有些同學感覺使用IDE的保存自動修復相當麻煩，我每次改完之后都需要等他修復一下😡，太不方便啦！
接下來就要請出我們的好幫手：lint-staged，它可以幫助我們在 git 緩存中進行代碼質量與風格的修復，在代碼提交前進行統一校驗，通過后才可以提交。

安裝依賴

pnpm install -D lint-staged

配置

在 package.json 配置一個指令方便我們使用

{"script":{"lint:lint-staged": "lint-staged",}
}

使用 husky 配置一個 pre-commit 鉤子

# --no-install 代表強制使用本地模塊
npx husky add .husky/pre-commit "npm run lint:lint-staged"

LintStaged 的配置文件方式也有多種：

在 package.json 中配置
lint-staged.js 或 lint-staged.config.js
.lintstagedrc.json 或 .lintstagedrc.yaml

這里我們直接在 package.json 中配置

// 我們直接配置在 package.json 中
/*
配置的含義：
<需要執行的文件>: <對應文件需要執行的命令數組>
*/
"lint-staged": {"*.{js,jsx,ts,tsx}": ["eslint --fix","prettier --write"],"{!(package)*.json,*.code-snippets,.!(browserslist)*rc}": ["prettier --write--parser json"],"package.json": ["prettier --write"],"*.vue": ["eslint --fix","prettier --write","stylelint --fix"],"*.{scss,less,styl,html}": ["stylelint --fix","prettier --write"],"*.md": ["prettier --write"]
}

這樣就配置完畢啦，當我們使用 git commit -m “xxx” 時，lint-staged 會自動執行幫我們進行代碼質量與風格的修復。

配置 CommitLint

每次看 Github 倉庫的時候，總感覺有些不順眼。原來是提交附帶的信息亂糟糟的，都是"新增xx功能"，“修復xxBUG”，非常的不工整，看著太不舒服啦🤯。
不要慌，我們可以使用 CommitLint 對提交的信息進行規范。
官方文檔：commitlint - Lint commit messages

安裝依賴

pnpm install -D @commitlint/cli  @commitlint/config-conventional

@commitlint/config-conventional：commitlint自定義配置規則插件

配置

規則配置

CommitLint配置文件名稱可以為：.commitlintrc.js、.commitlint.config.js （根據個人習慣選擇即可）

配置文件內容如下

官方文檔的配置規則講解：Rules (commitlint.js.org)

規則由名稱和配置數組組成：
<配置名稱>: [<警報級別>, <是否啟用>, <規則對應的值>]

警報級別
- 0 無提示 disable
- 1 警告 warning
- 2 錯誤 error
是否啟用
- always 啟用
- never 禁用
規則對應的值：查看官方文檔進行配置

// 這里是通俗的解釋 詳情請前往官方文檔查閱
module.exports = {ignores: [(commit) => commit.includes('init')],extends: ['@commitlint/config-conventional'],rules: {// 信息以空格開頭'body-leading-blank': [2, 'always'],'footer-leading-blank': [2, 'always'],// 信息最大長度'header-max-length': [2, 'always', 108],// 信息不能未空'subject-empty': [2, 'never'],// 信息類型不能未空'type-empty': [2, 'never'],// 提交信息的類型 下文有介紹'type-enum': [2,'always',['feat','fix','perf','style','docs','test','refactor','build','ci','chore','revert','wip','workflow','types','release','temp'],],},
};

提交信息的類型一般有如下規范（可根據團隊習慣進行更改）：

feat : 增加一個新特性
fix : 修復一個 bug
perf : 更改代碼以提高性能
build : 更改構建系統和外部依賴項（如將 gulp 改為 webpack，更新某個 npm 包）
ci : 對 CI 配置文件和腳本的更改
docs : 僅僅修改文檔說明
refactor : 代碼重構時使用
style : 不影響代碼含義的改動，例如去掉空格、改變縮進、增刪分號
test : 增加新的測試功能或更改原有的測試模塊
temp: 臨時的提交

git .png

鉤子配置

# 配置 commit-msg 鉤子 運行 commitlint
# --no-install 代表強制使用本地模塊
npx husky add .husky/commit-msg "npx --no-install commitlint --edit $1"

配置完成后我們就可以在git commit時進行信息的規范
我們需要按照以下格式進行提交：

# git commit -m "類型: 信息"
# 新增功能示例
git commit -m "feat: 新增用戶登錄功能"
# 修復Bug示例
git commit -m "fix: 修復首頁用戶頭像不顯示問題"