react 项目统一代码风格的相关配置

react 项目统一代码风格的相关配置 1. 相关自动化工具简介 1.1 Prettier

Prettier 这个工具能够格式化，规范化代码，使其更加工整。它一般不会检查我们代码具体的写法，而是在"可读性"上做文章。目前支持包括 JavaScript、JSX、Angular、Vue、Flow、TypeScript、CSS(Less、SCSS)、HTML、JSON 等多种语言。

总的来说，它能够将原始代码风格移除，并替换为团队统一配置的代码风格。使用它的优点如下：

构建并统一代码风格

帮助团队新成员快速融入团队

开发者可以完全聚焦业务开发，不必在代码整理上花费过多心思

方便，低成本灵活接入，并快速发挥作用

清理并规范已有代码

减少潜在 Bug

丰富强大的社区支持

试一试： https://prettier.io/playground/

1.2 ESLint

下面来看一下以 ESLint 为代表的 Linter。Code Linting 表示基于静态分析代码原理，找出代码反模式的过程。多数编程语言都有 Linter，它们往往被集成在编译阶段，完成 Coding Linting 的任务。

对于 JavaScript 这种动态、宽松类型的语言来说，开发者更容易犯错。由于 JavaScript 不具备先天编译流程，往往会在运行时暴露错误，而 Linter，尤其最具代表性的 ESLint 的出现，允许开发者在执行前发现代码错误或不合理的写法。

ESLint 最重要的几点哲学思想：

所有规则都插件化

所有规则都可插拔（随时开关）

所有设计都透明化

使用 Espree 进行 JavaScript 解析

使用 AST 分析语法

配置文件.eslintrc.js 主要由六个字段组成：

module.exports = {
  env: {},

  extends: {},

  plugins: {},

  parser: {},

  parserOptions: {},

  rules: {},
};

env：表示指定想启用的环境。

extends：指定额外配置的选项，如 [‘airbnb’] 表示使用 Airbnb 的 Linting 规则。

plugins：设置规则插件。

parser：默认情况下 ESLint 使用 Espree 进行解析。

parserOptions：如果将默认解析器更改，需要制定 parserOptions。

rules：定义拓展并通过插件添加的所有规则。

注意，上文中 .eslintrc 文件我们采用了 .eslintrc.js 的 JavaScript 文件格式，此外还可以采用 .yaml、.json、yml 等格式。如果项目中含有多种配置文件格式，优先级顺序为：

.eslintrc.js

.eslintrc.yaml

.eslintrc.yml

.eslintrc.json

.eslintrc

package.json

1.3 Linter VS Prettier

我们应该如何对比以 ESLint 为代表的 Linter 和 Prettier 呢，它们到底是什么关系？就像开篇提到的那样，它们解决不同的问题，定位不同，但是又可以相辅相成。

所有的 Linter 类似 ESLint，其规则都可以划分为两类。

格式化规则（Formatting Rules）

这类“格式化规则”典型的有 max-len、no-mixed-spaces-and-tabs、keyword-spacing、comma-style，它们“限制一行的最大长度”“禁止使用空格和 Tab 混合缩进”等代码格式方面的规范。事实上，即便开发者写出的代码违反了这类规则，如果在 Lint 阶段前，先经过 Prettier 处理，这些问题会在 Prettier 阶段被纠正，因此 Linter 不会抛出提醒，非常省心，这也是 Linter 和 Prettier 重叠的地方。

代码质量规则（Code Quality Rules）

这类“代码质量规则”类似 no-unused-vars、no-extra-bind、no-implicit-globals、prefer-promise-reject-errors，它们限制“声明未使用变量”“不必要的函数绑定”等代码写法规范。这个时候，Prettier 对这些规则无能为力，而这些规则对于代码质量和强健性至关重要，还是需要 Linter 来保障的。

如同 Prettier，ESLint 也可以集成到编辑器或者 Git pre-commit 阶段。

1.4 husky 和 lint-staged

其实，husky 就是 Git 的一个钩子，在 Git 进行到某一时段时，可以交给开发者完成某些特定的 *** 作。比如每次提交（commit 阶段）或者推送（push 阶段）代码时，就可以执行相关 npm 脚本。需要注意的是，在整个项目上运行 Lint 会很慢，我们一般只想对更改的文件进行检查，此时就需要使用到 lint-staged。比如如下代码：

.husky/pre-commit

#!/usr/bin/env sh
. "$(dirname ""lint-staged": {
    ".(js|jsx|ts|tsx)": [
      "prettier --write",
      "eslint --cache --fix"
    ]
  }
")/_/husky.sh"

npx lint-staged

package.json

git commit -m 'feat: 增加 xxx 功能'
git commit -m 'bug: 修复 xxx 功能'

上述代码表示在 pre-commit 阶段对于 js、jsx、ts、tsx 后缀且修改的文件执行 ESLint 和 Prettier *** 作。

1.5 Commitlint

在有了 Husky 赋能之后，我们有能力在 Git 的钩子里做一些事情，首先不得不提的是代码的提交规范和规范的校验，优雅的提交，方便团队协作和快速定位问题。
commitlint 就是检查提交消息是否符合传统的提交格式的工具。

常用的 type 类别

build：编译相关的修改，例如发布版本、对项目构建或者依赖的改动chore：构建过程或辅助工具的变动ci：持续集成修改docs：文档（documentation）feat：新功能（feature）fix：修补 bugperf：优化相关，比如提升性能、体验refactor：代码重构revert：回滚到上一个版本style： 格式（不影响代码运行的变动）test：增加测试

例子：

npx create-react-app my-app --template typescript

commitlint.config.js 文件配置

2. 搭建 React+TypeScript 项目，并添加相关配置 2.1 初始化项目

npm install --save-dev --save-exact prettier

npx mrm@2 lint-staged

2.3 安装依赖包

module.exports = {
  extends: [],
}

2.4 添加 eslint 配置文件.eslintrc.js

"printWidth"

参考：https://git.woa.com/standards/javascript

添加上述 1.4 的 package.json 中 lint-staged 的配置，这时我们提交代码的时候会自动按照 Prettier 和 Eslint 规则格式化我们修改的代码。如果代码中存在 eslint 无法修复的错误，则会提交失败，直到我们手动修改完所有错误后才可以成功提交。

2.5 创建.prettierrc.json 配置文件

{
  :120 ,"tabWidth"
  :2 ,"useTabs"
  :false ,"semi"
  :true ,"singleQuote"
  :true ,"quoteProps"
  :"as-needed" ,"jsxSingleQuote"
  :false ,"trailingComma"
  :"all" ,"bracketSpacing"
  :true ,"jsxBracketSameLine"
  :false ,"arrowParens"
  :"always" ,"rangeStart"
  :0 ,"rangeEnd"
  :null ,"requirePragma"
  :false ,"insertPragma"
  :false ,"proseWrap"
  :"preserve" ,"htmlWhitespaceSensitivity"
  :"css" ,"vueIndentScriptAndStyle"
  :false ,"endOfLine"
  :"lf" ,"embeddedLanguageFormatting"
  :"auto" }
npm install --save-dev @commitlint/config-conventional @commitlint/cli

npx husky add .husky/commit-msg 'npx --no -- commitlint --edit ""'

2.6 配置 commitlint

.

新建一个 commitlint.config.js 配置文件

module=exports extends {
  :[ '@commitlint/config-conventional'],}
;{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

注意：使用下面官网提供命令创建的配置文件，由于字符的问题在提交代码的时候会报错。所以推荐手动创建配置文件。
官网链接 https://github.com/conventional-changelog/commitlint

echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

这时，在提交不符合提交规范的 message 就会提交失败。

3. VSCode 自动保存格式化的相关配置 3.1 添加 ESLint 和 Prettier 插件

3.2 添加 vscode 配置文件.vscode/settings.json

4. 总结项目配置步骤 初始化 React+TypeScript 项目强制统一使用内源 tnpm安装 eslint prettier 相关依赖，并初始化 lint-staged添加配置.eslintrc.js、.prettierrc.json、package.json 中 lint-staged 的配置配置 commitlintVSCode 添加 ESLint 和 Prettier 插件, 在.vscode/settings.json 中添加保存自动格式化配置