前端代码规范配置
涉及到了
eslint
、
prettier
、
husky
、
lint-staged
等工具包的使用。
代码规则校验
使用
eslint
定义代码风格
安装
eslint
并在
.eslintrc.js
文件中配置。
npm i eslint -D
这个代码风格可以使用公司团队内的规范，如果没有可以在
github
中找到一些主流的规则，比如说
eslint-config-google
或者
eslint-config-alloy
。
这里使用
eslint-config-alloy
（需要通过
npm
引入）
module.exports = {
extends: [
'alloy'
]
}
虽然配置了
eslint
但是每次都需要手动执行
eslint xxx
命令去校验代码中是否存在错误、不规范的写法。如果使用
vscode
这个编辑器的话可以直接安装
Eslint
这个插件，这样在编写代码的时候就会实时监测代码中存在的异常并标红，不需要执行
eslint xxx
命令。
自动格式化
prettier
是一个代码格式化工具，可以通过自定义规则来重新规范项目中的代码，去掉原始的代码风格，确保团队的代码使用统一相同的格式。
安装
prettier
并在
.prettierrc.js
文件中进行配置。
npm i prettier -D
具体配置看团队，以下仅为示例：
module.exports = {
useTabs: true,
tabWidth: 2,
printWidth: 80,
trailingComma: 'all'
}
配置好后执行
npx prettier --check .
可以查看当前所有文件是否符合配置，执行
npx prettier --write .
则可以直接在原文件上格式化。在
vscode
上也存在
prettier
插件，安装后在保存文件的时候就会根据根目录下的
.prettierrc.js
配置自动执行
prettier
进行格式化。
解决prettier和eslint冲突
在代码格式化时采用
Perttier
规则，而我们代码校验使用的是
ESLint
，如果同一个规则配置不一致，往往就会出现冲突问题；
安装
eslint-config-prettier
插件配置集，把其配置到
.eslintrc.*
规则的尾部。执行
ESLint
命令，会禁用那些和
Prettier
配置有冲突的规则。
安装
eslint-plugin-prettier
插件，先使用
Prettier
对代码进行格式化，再并对不一致的地方进行标记；
这两个包配合使用，可以达到运行
eslint --fix
时，采用
Prettier
的配置规则来格式化文件。
.eslintrc.js
文件最终变成：
module.exports = {
plugins: ["prettier"],
extends: ["alloy", "plugin:prettier/recommended"],
};
提交校验
虽然通过
eslint
、
prettier
可以控制代码风格，但是配置依旧容易被篡改，这个时候需要做一些防范措施。
在提交代码时校验代码
安装
husky
、
lint-staged
，可以在提交代码的时候校验暂存区里的代码，只有通过校验的代码才允许提交，通过还可以规范
commit
的注释。
安装：
cnpm i husky lint-staged -D
执行
npx husky install
创建
.husky
目录并指定该目录为
git hooks
所在的目录。
添加
git hooks
，
husky
支持
git
的所有钩子，示例只使用
pre-commit
、
commit-msg
创建
pre-commit
钩子
npx husky add .husky/pre-commit "npx lint-staged"
npx husky add .husky/commit-msg "npx --no-install commitlint --edit "$1""
可以看到
.husky
目录下生成
commit-msg
、
pre-commit
两个文件。
在这两个文件中都只是配置了一个指令，比如说
pre-commit
就是一个
npx lint-staged
用于检查暂存区的文件。
在
package.json
中配置
lint-staged
。
{
"lint-staged": {
"*.js": [
"prettier --write ."
"eslint --cache"
]
},
}
校验commit
而
commit-msg
这里可以自定义一套
git
提交规范（比如说
vuejs/core
），也可以使用
commitlint
vuejs/core
的代码提交规范:
import chalk from 'chalk'
import { readFileSync } from 'fs'
import path from 'path'
const msgPath = path.resolve('.git/COMMIT_EDITMSG')
const msg = readFileSync(msgPath, 'utf-8').trim()
const commitRE =
/^(revert: )?(feat|fix|docs|dx|style|refactor|perf|test|workflow|build|ci|chore|types|wip|release)(\(.+\))?: .{1,50}/
if (!commitRE.test(msg)) {
console.log()
console.error(
` ${chalk.bgRed.white(' ERROR ')} ${chalk.red(
`invalid commit message format.`
)}\n\n` +
chalk.red(
` Proper commit message format is required for automated changelog generation. Examples:\n\n`
) +
` ${chalk.green(`feat(compiler): add 'comments' option`)}\n` +
` ${chalk.green(
`fix(v-model): handle events on blur (close #28)`
)}\n\n` +
chalk.red(` See .github/commit-convention.md for more details.\n`)
)
process.exit(1)
}
使用commitlint
安装
npm install -D @commitlint/cli @commitlint/config-conventional
新建
commitlint.config.js
以下是示例，可以自行配置
module.exports = {
extends: ["@commitlint/config-conventional"],
rules: {
"type-enum": [
2,
"always",
[
"feat",
"fix",
"style",
"refactor",
"perf",
"test",
"build",
"chore",
"revert",
],
],
"subject-max-length": [1, "always", 150],
},
};