ESLint
代碼規(guī)范校驗使用ESLint眠屎，但是一開始 ESLint 只有檢測告訴你哪里有問題，后來 ESLint 提供了$ ESLint filename --fix的命令梳毙，可以自動幫你修復(fù)一些不符合規(guī)范的代碼布讹。
Prettier
Prettier 是一個代碼格式化工具橙依，可以幫你把代碼格式化成可讀性更好的格式尺铣，比如加分號，或者換行之類的酗洒。
husky
husky是強制git commit按照標準規(guī)則來提交士修。
項目實踐（pnpm + monorepo）
- 下載ESLint和prettier
pnpm i eslint -D -w
pnpm i prettier -D -w
- 初始化ESLint
npx eslint --init
- 下載ESLint解析器
pnpm i @typescript-eslint/parser -D -w
- 安裝plugin
- eslint-config-prettier 的作用是關(guān)閉eslint中與prettier相互沖突的規(guī)則。
- eslint-plugin-prettier 的作用是賦予eslint用prettier格式化代碼的能力樱衷。 安裝依賴并修改.eslintrc文件
pnpm i eslint-config-prettier -D -w
pnpm i eslint-plugin-prettier -D -w
pnpm i @typescript-eslint/eslint-plugin -D -w
- .eslintrc.json配置
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:prettier/recommended"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": ["@typescript-eslint", "prettier"],
"rules": {
"prettier/prettier": "error"
}
}
- package.json文件中添加一個腳本命令棋嘲，這個腳本意思是指執(zhí)行packages文件下的所有ts,js,jsx,tsx文件，并且自動按照prettier配置進行修復(fù)矩桂。
"scripts": {
"lint": "eslint --ext .ts,.js,.jsx,.tsx --fix ./packages"
},
- 安裝husky
pnpm i husky -D -w
- 初始化husky
npx husky install
8)將pnpm lint 納入commit時husky將執(zhí)行的腳本
npx husky add .husky/pre-commit "pnpm lint"
- 安裝lint-staged沸移，因為項目比較大后，每次掃描全部代碼侄榴，就會很慢雹锣，而它則可以讓我們只掃描本次提交的代碼的規(guī)范
- 針對每次提交信息進行檢查，看是否規(guī)范癞蚕，安裝commit-lint
pnpm i @commitlint/cli @commitlint/config-conventional -D -w
- 創(chuàng)建.commitlintrc.js文件
module.exports = { extends: ['@commitlint/config-conventional'] }
- 添加到husky中蕊爵，每次提交代碼時進行檢查
npx husky add .husky/commit-msg 'npx --no -- commitlint --edit ${1}'
