让你的前端开发流程更加规范! 使用eslint、prettier、commitlint、commitzen、husky、lint-staged、changlog

niceTJH
1,070 阅读5分钟

一、简介

  • eslint。代码检查工具。
  • prettier。代码格式化工具。
  • commitlint。git提交内容规范校验工具。
  • commitzen。帮助标准化提交git内容工具。
  • husky。git hooks工具。
  • lint-staged。git暂存文件执行lint的工具。
  • changelog。项目更新日志
  • .editorconfig。定义了编码样式的文件。

二、用途介绍

eslint 用作代码开发时的检验。如果代码不符合自己配置的规则，就给出错误提示。所以公司项目中有时候代码是正确的，却出现红色下划线，就可能是eslint在起作用，提示你改成符合规则的代码。

prettier 用来格式化你的代码，例如：配置规则强制优先单引号，你写的代码定义字符串用双引号包裹，格式化后就自动改成单引号。

commitlint 用来检测git commit的提交内容，如果不符合规则，则报错提交失败。直到内容符合规范，才真正完成git commit这一步骤。这对于git历史提交的查阅是非常有帮助的，避免出现git提交记录乱七八糟，也方便生成changelog和查找关键提交记录。

commitzen 帮助你编写出符合提交规范的提交内容，以通过commitlint校验。它会提供一个个问答形式的输入步骤，来获取你的提交内容，并生成最后的标准提交文本。所以，你不需要再去浪费时间想怎么让提交内容更加规范，专心做更有意义的事情吧。

husky 是一款处理 git hooks 的工具。一般配合 lint-staged 一起使用，用来在提交前对代码格式化一次。

lint-staged 是用来帮助对git暂存文件执行操作的工具。你说我每次提交都格式化一次代码就好了，为什么要单独对暂存文件做处理呢？其实你不用这个也可以，但每次全盘格式化会浪费不必要的时间。一般已经提交过的代码都是已经做过格式化的，后面每次提交都只需要对修改的内容格式化就好了。lint-staged就是对改动的内容做处理的，节省时间。

changelog 用来记录项目的改动，按时间倒序排列。这个文件本来是人手动去写的，但是为了节省时间，我们交给插件自动处理了。为了让插件能自动处理，所以我们需要规范提交内容的格式，这也是我们使用commitlint和commitzen的原因。

.editorconfig 只是一个记载了编码样式的文件，并没有什么实际意义。vscode 和 webstorm 已经支持读取它的内容来作为自身格式化配置了。如果编辑器不支持，这个文件也就失去作用。

三、在项目中使用

此处以常见的 React + TypeScript 项目为例。

1. 添加 eslint

pnpm add -D eslint@^8

接下来，可以使用:

npx eslint --init

一步步操作下去，我这里后面选了React、TS，过程中需要安装几个插件：

pnpm add -D eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest

pnpm add -D eslint-config-prettier eslint-plugin-prettier

最后会在根目录生成一个.eslintrc.js。这里，已经成功添加了 eslint.
这里，我们可以运行格式化命令来检查代码语法问题： npx eslint .。

注：npx 可以用来运行已安装的局域命令。

// ts-rules: https://typescript-eslint.io/rules/no-explicit-any/
// es-rules: https://eslint.org/docs/latest/rules/no-console

module.exports = {
  env: {
    browser: true,
    node: true,
    jest: true,
    es6: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react/recommended',
    'prettier',
  ],
  settings: {
    react: {
      pragma: 'React',
      version: 'detect',
    },
  },
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['@typescript-eslint', 'react', 'prettier'],
  rules: {
    // typescript
    '@typescript-eslint/no-explicit-any': 'off',
    '@typescript-eslint/ban-ts-comment': 'off',
    '@typescript-eslint/no-unused-vars': 'error',

    // react
    'react/react-in-jsx-scope': 'off',

    // common
    semi: 'error',
    quotes: ['error', 'single'],
    'no-debugger': 'error',
    'no-inner-declarations': 'off',
  },
};

2. 添加 prettier

pnpm add -D prettier@^2.8.7

在根目录创建 .prettierrc文件，里面写入类似下面的配置规则（可参考官网）：

{
  "printWidth": 100,
  "tabWidth": 2,
  // ...
}

这里，可以使用命令来格式化代码: npx prettier --write . 。

3. 添加 husky

pnpm add -D husky@^8

首先，配置 husky，执行

npx husky install

会在根目录下创建一个.husky文件夹


我们再去 package.json下加个script，"postinstall": "husky install"

这样，每次我们执行pnpm install类似的安装命令，都会在.husky下面生成_目录，这是用来执行githooks的基础脚本文件。

4. 添加 lintstaged

pnpm add -D lint-staged@^13.2.1

再执行下面命令以在提交代码前执行lint-staged：

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

上述命令会在.husky目录下创建pre-commit脚本，并在githooks触发时执行 "npx lint-staged"这一操作。

为了npx lint-staged这一操作可以生效，我们还需要在package.json文件最顶层加如下配置项（对暂存文件先 prettier 再 eslint）：

{
    ...
    "lint-staged": {
       "**/*.{js,jsx,ts,tsx}": [
           "prettier --write",
           "eslint --fix",
           "git add"
       ]
    },
    ...
}

4. 添加 commitlint、commitzen

由于commitlint 和 commitzen 一起使用会因为某些规则产生冲突，所以我们使用 @commitlint/cz-commitlint来让两者得以兼容。

pnpm add -D @commitlint/cz-commitlint commitizen inquirer@8  
pnpm add -D @commitlint/config-conventional @commitlint/cli

然后，在 package.json 最顶层加如下配置项：

{
   ...
   "scripts": {
      "commit": "git add . && git-cz"
   },
   "config": {
      "commitizen": {
      "path": "@commitlint/cz-commitlint"
    }
  }
  ...
}

再执行下列命令去写入commitlint配置文件

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

// 添加提交时校验格式拦截
npx husky add .husky/commit-msg "commitlint -e $HUSKY_GIT_PARAMS"

这个时候，就配置好了！
如果你想要提交标准的git commit内容，可以使用 pnpm commit 命令调用commitzen的填写流程。你也可以自己git commit -m "xxx"，只要内容符合提交规范就能通过。
因为最终在git commit时，会使用commitlint进行校验拦截。

5. 添加 changelog

pnpm add -D conventional-changelog-cli

追加一条changelog（必须有CHANGELOG.md文件否则报错）：

conventional-changelog -p angular -i CHANGELOG.md -s -r 0

6. 配置 .editorconfig

只需要包含配置内容即可，被编辑器自动读取，无需额外设置！
这里提供一份参考文件：

# http://editorconfig.org
root = true

[*]
indent_style = space              # 空格格式缩进
indent_size = 2                   # 缩进2字符
end_of_line = lf                  # lf 结尾符
charset = utf-8                   # 字符集
max_line_length = 100             # 每行最大字符数量
trim_trailing_whitespace = true   # 不保留行末空格
insert_final_newline = true       # 文件末尾添加一个空行

[*.md]
trim_trailing_whitespace = false  # 不保留行末空格
insert_final_newline = true       # 文件末尾添加一个空行

参考 GitHub 示例

React 组件库项目：github.com/tangjiahui-…

avatar
文章
阅读
粉丝