从零开始配置 react + typescript（二）：linters 和 formatter
内容提要
本文介绍 React + TypeScript 项目的代码规范配置：使用 ESLint 检查 TypeScript 代码并解决与 Prettier 的规则冲突，使用 Stylelint 检查样式，使用 Prettier 统一格式化，使用 husky 配合 lint-staged 在提交时只检查暂存代码，使用 commitlint 规范 commit message，并配置自动生成 changelog。
延伸解读
为什么选择 ESLint 而不是 TSLint
文章指出 TSLint 团队已于 2019 年 2 月宣布废弃 TSLint，转而维护将 TypeScript 集成到 ESLint 的工具。作者认为 2020 年新项目没有理由选择 TSLint，因为 ESLint 的 TypeScript 插件已比较成熟，尽管仍有不少 bug。因此项目采用 ESLint 配合 @typescript-eslint/parser 和插件来检查 TypeScript 代码。
解决 linters 与 Prettier 的规则冲突
由于 ESLint 和 Stylelint 的规则可能与 Prettier 的格式化结果冲突，文章建议安装 eslint-config-prettier 和 stylelint-config-prettier，并将它们添加到 extends 数组的最后，以禁用所有冲突规则。这样 Prettier 负责格式化，linters 负责代码质量检查，避免格式化后 linter 报错。
提交时只检查暂存代码的实践
通过 husky 配置 pre-commit 钩子调用 lint-staged，可以只对 git 暂存区的文件运行 ESLint、Stylelint 和 Prettier。lint-staged 从 V10 开始会自动 git add 修改后的文件，因此无需手动添加 git add 步骤。这能确保每次提交的代码都经过检查和格式化，同时避免全量检查耗时。
commitlint 与 changelog 自动化的注意事项
使用 commitlint 配合 @commitlint/config-conventional 可以规范 commit message，项目还扩展了 deps 类型。通过 conventional-changelog-cli 能根据 fix、feat 等类型的提交自动生成 changelog。但若在 commit message 中插入 emoji，需注意格式，否则可能无法通过 commitlint 或不被 changelog 工具识别。
Q&A
为什么新项目应该选择 ESLint 而不是 TSLint？
TSLint 团队已于 2019 年 2 月宣布废弃 TSLint，转而维护将 TypeScript 集成到 ESLint 的工具。ESLint 的 TypeScript 插件已经比较成熟，因此新项目没有理由再选择 TSLint。
如何配置 ESLint 来支持 TypeScript 和 React？
使用 npx eslint --init 交互式生成配置，选择使用 TypeScript、React、Airbnb 风格等。生成的 .eslintrc.js 中会使用 @typescript-eslint/parser 作为解析器，并添加 @typescript-eslint 插件。还需添加 extends: 'plugin:@typescript-eslint/recommended' 和 'airbnb/hooks' 等。
如何解决 ESLint 和 Prettier 的规则冲突？
安装 eslint-config-prettier，并在 .eslintrc.js 的 extends 数组最后添加 'prettier'、'prettier/react'、'prettier/@typescript-eslint'。对于 stylelint，安装 stylelint-config-prettier 并添加到 extends 最后。这样会禁用所有与 Prettier 冲突的规则。
husky 和 lint-staged 如何配合实现提交时只检查暂存代码？
安装 husky 和 lint-staged，在 package.json 中配置 husky 的 pre-commit 钩子为 lint-staged，然后在 lint-staged 字段中针对不同文件类型配置 eslint、stylelint、prettier 命令。这样每次 commit 时只会对暂存区的文件执行 lint 和格式化。
commitlint 有什么作用？如何配置？
commitlint 用于检查 commit message 是否符合规范，便于团队协作和生成 changelog。安装 @commitlint/cli 和 @commitlint/config-conventional，创建 .commitlintrc.js 继承配置，并在 husky 中配置 commit-msg 钩子执行 commitlint。
如何自动生成 changelog？
安装 conventional-changelog-cli，在 package.json 的 scripts 中添加 "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s"，运行 npm run changelog 即可根据提交历史中的 feat、fix 等类型自动生成 angular 风格的 changelog。
