husky

(./git提交规范.md#自动配置husky (推荐))

简介：

husky 是一个工具，它允许我们轻松地处理 Git Hooks 并在提交代码时运行我们想要的脚本

使用：

安装并初始化 husky

npx husky-init && pnpm install

提示

prepare 会在 install 之后和 prepublishOnly 之前触发。

添加一个 git 钩子

npx husky add .husky/commit-msg 'pnpm commitlint --edit $1'

添加完成后会生成 .husky/commit-msg 文件如下：

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

pnpm commitlint --edit $1

当你 git commit 提交代码时会执行 pnpm commitlint 命令，通过 commitlint.config.js 配置规则校验你的 commit 内容是否规范

警告

使用老版本的 husky 时，可以在 pacaage.json 中加入相关的 hook 配置，但是新版不行了。

# git commit 时检查提交信息是否符合规范
npx husky add .husky/commit-msg  'npx --no -- commitlint --edit ${1}'

# git commit 时触发 lint-staged，使用上面的那些 lint 工具检查并格式化一遍有改动的代码文件。
npx husky add .husky/pre-commit "npx lint-staged"

上面这个 $1 有坑，加不进去，需要自己去文件里改改

Prettier

简介：

Prettier 是一款流行的代码格式化工具。 它支持的语言相当多。 它很纯粹，就一个代码格式化工具，并不会做代码质量的检查（比如声明了一个未被使用的变量）。 Prettier 会强制使用统一的代码风格，原理就是解析语言生成AST 抽象语法树，然后用自己的一套风格写回到文件。

使用：

安装

pnpm install --save-dev --save-exact prettier

编写配置文件 .prettierrc.js, 配置项说明：https://prettier.io/docs/en/options.html

module.exports = {
  printWidth: 100,       // 指定换行的行长度。
  semi: false,           // 不在语句末尾打印分号。
  trailingComma: 'es5',  // 在ES5（对象、数组等）中添加有效的结尾逗号。TypeScript中的类型参数中没有结尾逗号。
  tabWidth: 2,           // 指定每个缩进级别的空格数。
  singleQuote: true,     // 字符串统一使用单引号
  bracketSameLine: false,// 元素不是位于最后一行的末尾，而是单独位于下一行
  jsxSingleQuote: true,  // 在JSX中使用单引号而不是双引号。
  arrowParens: 'avoid',  // 避免在唯一的箭头函数参数周围包含括号。
  proseWrap: 'never',    // 将每一段markdown文本拆分成一行。
}

添加 git 钩子

npx husky add .husky/pre-commit 'pnpm pretty-quick --staged'

添加完成后会生成 .husky/pre-commit 文件如下：

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

pnpm pretty-quick --staged

当你 git commit 提交代码前会先执行 pnpm pretty-quick --staged 命令，通过 .prettierrc.js 配置规则校验并修复不符合规则的代码内容

eslint

简介：

eslint 是一种用于识别和报告 ECMAScript/JavaScript 代码中发现的模式的工具，其目标是查找并修复代码中的问题使代码更加一致并避免错误。

使用：

1. 安装

// 安装 eslint
pnpm install --save-dev eslint
// 安装 react 的 eslint 推荐规则
pnpm install --save-dev eslint-plugin-react
// 安装 prettier 的 eslint 配置文件与插件，目的将 pretier 规则转为 esLint 规则运行，合并两边不统一的一些规则
pnpm install --save-dev eslint-config-prettier eslint-plugin-prettier
// 安装 eslint 的 typescript 解析器与插件推荐规则
pnpm install --save-dev typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin

yarn add --dev eslint eslint-plugin-react eslint-config-prettier eslint-plugin-prettier typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin

2. 编写配置文件 .eslintrc.js, 配置项说明：https://eslint.org/docs/user-guide/configuring

module.exports = {
  root: true, // 当前是根 eslint 配置
  env: {      // 代码运行环境
    browser: true,
    es6: true,
  },
  extends: [
    'eslint:recommended',       // eslint 自身推荐的规则
    'plugin:react/recommended', // eslint-plugin-react 内的规则
    'plugin:@typescript-eslint/eslint-recommended', // @typescript-eslint/eslint-plugin 内推荐的 eslint 规则
    'plugin:@typescript-eslint/recommended',        // @typescript-eslint/eslint-plugin 内的规则
    'plugin:prettier/recommended',     // eslint-plugin-prettier 内的规则，内已导入了 eslint-config-prettier 内配置的兼容react/@typescript-eslint/...的规则
  ],
  parser: '@typescript-eslint/parser', // 解析器，用于解析 ts 文件
  parserOptions: {                     // 解析器配置
    project: 'tsconfig.json',          // 解析器配置文件
    sourceType: 'module',              // 需要解析器解析的代码类型，代码是 ECMAScript 模块填 module
  },
  plugins: ['@typescript-eslint'],     // 引入 @typescript-eslint/eslint-plugin 内的插件规则函数
  rules: {
    // 规则查询文档：https://eslint.org/docs/latest/rules
    'no-empty': ['error', { allowEmptyCatch: true }], // 不允许空块语句,排除空catch语句。文档：https://eslint.org/docs/latest/rules/no-empty
    '@typescript-eslint/no-explicit-any': 'off',      // 关闭不允许 any 类型。         文档：https://typescript-eslint.io/rules/no-explicit-any
    'no-prototype-builtins': 'off',                   // 关闭不允许直接对对象调用Object.prototype方法。文档：https://eslint.org/docs/latest/rules/no-prototype-builtins
    'react/display-name': 'off',                      // 关闭不允许React组件定义中缺少displayName。   文档：https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/display-name.md
  },
  settings: { // 在所有插件规则中共享的设置
    react: {
      version: 'detect', // React版本。"detect"会自动选择您已安装的版本。
    },
  },
  ignorePatterns: ['/*', '!/src', '/src/**/*.js'], // eslint规则忽略的文件
}

3. package.json 添加规则校验命令

{
  ...
  "scripts": {
     "lint": "eslint .",
  },
  ...
}

4. vscode 安装 dbaeumer.vscode-eslint 插件，设置保存时自动通过 eslint 规则格式化文件 .vscode/settings.json文件：

{
    "editor.formatOnSave": true,     // 开启保存时格式化
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true // 保存时通过项目 .eslintrc.js 配置自动格式化代码
    },
}

Contributors

作者:Long Mo

字数统计:1.3k 字

阅读时长:5 分钟

Long Mo

文章作者：Long Mo

版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Longmo Docs ！