ESLint+Prettier
1. 引入 ESLint
ESLint 是 JavaScript 和 TypeScript 項目的標準代碼檢查工具。
安裝 ESLint
npm install eslint --save-dev
配置文件示例
.eslintrc.js 文件的 Vue 項目配置示例：
module.exports = {
root: true,
env: {
node: true,
},
extends: ['plugin:vue/essential', 'eslint:recommended', 'plugin:prettier/recommended'],
parserOptions: {
parser: '@babel/eslint-parser',
},
rules: {
// 自定義規(guī)則
'vue/multi-word-component-names': 'off', // vue組件name無需用橫杠連接
'no-unused-vars': ['error', { argsIgnorePattern: '^_' }], // 關(guān)閉未使用變量規(guī)則
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
},
}
2. 引入 Prettier
Prettier 是一款代碼格式化工具剪撬，可以與 ESLint 配合使用试和。
安裝 Prettier
npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev
配置 Prettier
新增 .prettierrc 文件，設置格式化規(guī)則：
module.exports = {
// 一行最多 120 字符
printWidth: 120,
// 使用 4 個空格縮進
tabWidth: 2,
// 不使用 tab 縮進驹吮，而使用空格
useTabs: false,
// 行尾需要有分號
semi: false,
// 使用單引號代替雙引號
singleQuote: true,
// 對象的 key 僅在必要時用引號
quoteProps: 'as-needed',
// jsx 不使用單引號，而使用雙引號
jsxSingleQuote: false,
// 末尾使用逗號
trailingComma: 'all',
// 大括號內(nèi)的首尾需要空格 { foo: bar }
bracketSpacing: true,
// jsx 標簽的反尖括號需要換行
jsxBracketSameLine: false,
// 箭頭函數(shù)，只有一個參數(shù)的時候产禾，也需要括號
arrowParens: 'always',
// 每個文件格式化的范圍是文件的全部內(nèi)容
rangeStart: 0,
rangeEnd: Infinity,
// 不需要寫文件開頭的 @prettier
requirePragma: false,
// 不需要自動在文件開頭插入 @prettier
insertPragma: false,
// 使用默認的折行標準
proseWrap: 'preserve',
// 根據(jù)顯示樣式?jīng)Q定 html 要不要折行
htmlWhitespaceSensitivity: 'css',
// 換行符使用 lf
endOfLine: 'auto',
// 強制元素屬性換行
singleAttributePerLine: false,
}
3. 安裝和配置 Lint-Staged + Husky
這些工具可以在提交代碼前進行自動校驗明棍。
安裝依賴
npm install lint-staged husky --save-dev
初始化 Husky
運行以下命令乡革，初始化 Husky 并創(chuàng)建 .husky 目錄：
npx husky-init
配置 Git 鉤子
- 添加 pre-commit 鉤子
通過以下命令添加一個 pre-commit 鉤子，用于在提交之前運行特定腳本：
npx husky add .husky/pre-commit "npm test"
該命令會在.husky目錄下生成一個名為pre-commit的文件摊腋，內(nèi)容如下：
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npx test
npm test用于集成測試和單元測試
2.在 package.json 文件中添加以下內(nèi)容：
{
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.js": "eslint --fix",
"*.ts": "eslint --fix",
"*.vue": "eslint --fix",
"*.json": "prettier --write",
"*.css": "prettier --write"
}
}
3.將 lint-staged 集成到 pre-commit 鉤子中：
npx husky add .husky/pre-commit "npx lint-staged"
注意：在執(zhí)行上述命令時沸版，終端提示：
husky - add command is DEPRECATED
導致pre-commit文件中并未添加npx lint - staged，故手動添加該內(nèi)容
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npx lint-staged
