概述
随着 nodejs 和前端工程化的发展，前端圈内产出了很多成熟的 Lint 工具，主要包括：
- eslint 规范并校验 ECMAScript/JavaScript code 的编写
- tslint 规范并校验 TypeScript code 的编写
- stylelint 规范并校验 css/scss/less code 的编写
- commitlint 负责校验 commit msg 是否符合规范
- prettier 或 beautifyjs 统一代码排版格式
除此之外，我们还需要一些辅助的工具：
- husky 能够监听 git hooks 的 nodejs 包，让 nodejs 开发者处理 git hooks 任务变得更加容易
- lint-staged 可以将 git" 已暂存 (staged)" 的文件作为参数传入你要执行的 shell script 之中
eslint
eslint 是一个开源的 JavaScript 的 linting 工具，使用 espree 将 JavaScript 代码解析成抽象语法树 (AST)，然后通过 AST 来分析我们代码，从而给予我们两种提示：
- 代码质量问题：使用方式有可能有问题****(problematic patterns)
- 代码风格问题：风格不符合一定规则 (doesn't adhere to certain style guidelines)
// .eslintrc
{
"extends": ["airbnb"] // Airbnb 公司
}prettier
- 一个 " 有态度 " 的代码格式化工具
- 支持大量编程语言
- 已集成到大多数编辑器中
- 几乎不需要设置参数
eslint 和 prettier 区别
eslint 主要解决的是代码质量问题，代码风格问题主要有 prettier 处理，即 使用 prettier 做格式化， eslint 做代码校验
eslint 中配置 prettier
// 关掉 (disable) 所有和 Prettier 冲突的 ESLint 的配置
// 把 Prettier 推荐的格式问题的配置以 ESLint rules 的方式写入，这样相当于可以统一代码问题的来源
{
"extends": ["prettier"],
"plugins": ["prettier"],
"rules": {
"prettier/prettier": "error"
}
}// 统一简写
// .eslintrc
{
"extends": ["prettier"] // prettier 一定要是最后一个，才能确保覆盖
}husky
当提交或推送时，可以使用 husky 来检查提交消息、运行测试、检查代码等，支持所有 [git 钩子]( Git - githooks Documentation )
git hooks
顾名思义 hooks 为 " 钩子 " 之意，它是 " 发布订阅模式 " 的一种实现，和前端中的 DOM 事件 (click、hover 等) 相似，Git 也预先定义了一些 " 事件钩子 " 如 "commit-msg"、"pre-commit" 等
当我们执行对应的 Git 操作时会触发它们，从而通知订阅该事件的 shell script 文件处理我们要进行的任务，这些 shell 脚本文件存放在项目根目录下的.git/hooks 目录中
lint-staged
每次检查代码我们不需要检查全项目的文件，那样只会增加时间成本，这时候就需要用到 lint-staged，一个仅仅过滤出 Git 代码暂存区文件（被 git add 的文件）的工具
// 对src下的所有.js和.vue文件先代码检查，然后代码修复，最后添加至缓存区。此修复只会修复一些简单的eslint格式错误，修复不了的格式错误，就会报错提交失败。随后在校验提交信息的格式
"lint-staged": {
"src/**/*.{js,vue}": [
"eslint --fix --ext .js,.vue",
"git add"
]
}commitlint
检查提交消息是否符合传统的提交格式
通过在 commitlint.config.js 文件中，制定提交信息的规范，详情参考：Rules
使用
yarn add husky --dev # must install
npx husky-init install # npm
npx husky-init # Yarn 1
yarn dlx husky-init # Yarn 2+
pnpm dlx husky-init # pnpm它将设置 husky，修改 package.json 并创建一个 pre-commit，用以可以编辑的示例挂钩
——默认情况下，它将 npm test 在提交时运行
把示例 npm test 修改成 yarn lint-staged 或者 自己定义的命令
——在 package.json 中添加 lint-staged 命令
"lint-staged": "lint-staged --allow-empty",
"lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx ",
"lint-staged": {
"**/*.{js,jsx,ts,tsx}": "yarn run lint-staged:js",
"**/*.{js,jsx,tsx,ts,less,md,json}": [
"prettier --write"
]
},在 git commit 的时候，就会触发 .husky/pre-commit 文件下 的命令行 yarn lint-staged 或者 自己定义的命令
在检查代码成功的时候会自动格式化代码然后自动提交，如果检测到错误就会停止提交并告知错误行，及时改正后可以再次提交
参考
贡献者
jiechen