前端项目的编程规范链集成

在团队项目中，一个好的规则是提升开发效率、合作效率的利器。

本篇文章对于编程规范链的集成在于三个方面。

代码规范检查
代码风格规范
提交命令检查

用到的工具包：eslint、prettier、husky、commitlint、lint-staged。

包管理工具：pnpm（用yarn/npm都可以）

框架：React

ESlint

使代码更加一致并避免错误。

ESLint 是完全可插拔的。每个规则都是一个插件，您可以在运行时添加更多规则。还可以添加社区插件、配置和解析器来扩展 ESLint 的功能。

首先安装

pnpm i eslint eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/parser @typescript-eslint/eslint-plugin -D

eslint：不解释。
eslint-plugin-react、eslint-plugin-react-hooks、@typescript-eslint/eslint-plugin:react、react-hooks、typescript的语法集，用于检查react、hooks、typescript是否正确使用。
@typescript-eslint/parser：typescript解析器的语法。

在项目根目录中中先创建.eslintrc.cjs文件

//.eslintrc.cjs
module.exports = {
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
  ],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
    ecmaFeatures: {
      jsx: true,
    },
  },
  plugins: ["react", "@typescript-eslint", "react-hooks"],
  rules: {
    quotes: ["error", "single"],
    semi: ["error", "always"],
    "react/react-in-jsx-scope": "off",
  },
  settings:{
    react:{
      version:"detect"
    }
  }
};

extends：扩展选项，可以继承另一个配置文件的所有特征（包括规则、插件和语言选项）并修改所有选项。
parser：使用解析器将JavaScript代码转换为抽象语法树，供ESLint进行评估。这里使用的解析器是typescript解析器。
parserOptions：解析器的配置。
plugins：通过插件形式来引入第三方配置文件。
rules：配置规则,比如说单引号、结束加句号等。配置规则严重性：off或0（关闭规则）、"warn"或1打开规则作为警告（不影响退出代码）、"error"或2 作为错误打开规则（触发时退出代码为1）。
settings：这里用于让eslint知道使用的react版本是哪个。

设置完毕后，对于eslint作用的范围也得限制下，只作用于自己写的模块。

根目录创建.eslintignore(根据自己需要设置忽略文件)

//.eslintignore
.eslintrc.cjs
node_modules
package.json
pnpm-lock.yaml
dist
bin

eslint一般搭配prettier使用。

Prettier

代码风格规范统一工具

安装：

pnpm i prettier eslint-plugin-prettier eslint-config-prettier -D

集成入eslint，需要更改一下.eslintrc.cjs文件。

//.eslintrc.cjs
module.exports = {
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier",
    "plugin:prettier/recommended",
  ],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
    ecmaFeatures: {
      jsx: true,
    },
  },
  plugins: ["react", "@typescript-eslint", "react-hooks", "prettier"],
  rules: {
    "prettier/prettier": "error",
    quotes: ["error", "single"],
    semi: ["error", "always"],
    "react/react-in-jsx-scope": "off",
  },
  settings:{
    react:{
      version:"detect"
    }
  }
};

在package.json中写入脚本命令来执行：

  // package.json
 "lint": "eslint --fix --ext .ts,.tsx,js,jsx ./"

实际开发中，一般不用手动输入lint命令来规范化代码。设置脚本命令是为了在提交阶段，自动执行pnpm lint来检查代码。

当然在开发阶段，可以设置保存代码时，执行一下：

点击vscode设置，搜索formatter，将默认的 formatter 设置为 Prettier。

接着搜索formatter on save，打开。

这样我们就完成了eslint+perttier的设置。

husky

Git hooks 工具。对git执行的一些命令，通过对应的hooks钩子触发，执行自定义的脚本程序

安装：

pnpm i husky -D

初始化Husky的pre-commit钩子内容：

npx husky add .husky/pre-commit "pnpm lint"

这样可以在git commit前执行 lint命令。

接着在package.json中注册 prepare 命令，这样安装依赖后就能自动启用hooks钩子。

"prepare":"husky install"

接着我们需要规范下git commit -m"xxx"的格式。

commitlint

git commit 格式规定工具包

安装

pnpm i commitlint @commitlint/cli @commitlint/config-conventional -D

在项目根目录新建 .commitlintrc.cjs，内容如下:

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

接着初始化husky的commit-msg钩子：

npx husky add .husky/commit-msg "npx --no-install commitlint --edit \"$1\""

目前已经完成了，在commit之前进行代码规范检查，git commit时对于commit命令的规范检查。

需要优化一下，现在是全量的进行代码规范检查的，实际上这是没必要的，只需要对新增的文件内容进行检查即可。这就需要使用到另外一个工具: lint-staged 了。

lint-staged

安装：

pnpm i lint-staged -D

在package.json中添加：

// 不是在script脚本选项中
{
  "lint-staged": {
    "**/*.{js,jsx,tsx,ts}": [
      "eslint --fix"
    ]
  },
}

接着进入.husky/pre-commit 脚本中，修改一下其中的内容:

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx --no -- lint-staged

现在就可以在 git commit 的过程中实现局部的代码风格检查了。