前端代码规范配置
涉及到了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],
},
};
