前言

Eslint, 一个根据方案识别并报告 ECMAScript/JavaScript 代码问题的工具，其目的是使代码风格更加一致并避免错误。

Prettier, code formatting tool 风格格式化工具。

husky，一个为 git 客户端增加 hook 的工具。比如 pre-commit 钩子就会在你执行 git commit 的触发。我们可以在 pre-commit 中实现一些比如 lint 检查、单元测试、代码美化等操作。

lint-staged，一个仅仅过滤出 Git 代码暂存区文件(被 git add 的文件)的工具；这个很实用，因为我们如果对整个项目的代码做一个检查，可能耗时很长，如果是老项目，要对之前的代码做一个代码规范检查并修改的话，这可能就麻烦了，可能导致项目改动很大。所以这个 lint-staged，对团队项目和开源项目来说，是一个很好的工具，它是对个人要提交的代码的一个规范和约束。

Commitizen , 提示和格式化 git commit 日志规范的工具,辅助生成标准规范化的 commitMsg,支持多种提交规范，可以安装和配置不同的适配器实现，本文以 conventional-change-log 适配器为例 。

Commitlint，校验 commitMsg 规范的工具。

cz-conventional-changelog , Commitizen 适配器。

初始化项目

创建package.json文件

1
pnpm init

配置 ESlint 和 Prettier

安装相关依赖包

1
pnpm add -D eslint prettier eslint-config-prettier

生成 ESlint 配置文件

1
pnpm init @eslint/config

eslint-config-prettier 用来关闭 ESlint 风格检查，避免和 Prettier风格规则冲突

1
2
3
4
5
6
7
8
9
10
11
12
{
    "env": {
        ...
    },
    "extends": ["eslint:recommended", "prettier"],
    "parserOptions": {
        ...
    },
    "rules": {
        ...
    }
}

创建Prettier的配置文件 . prettierrc 

1
2
3
{
  "tabWidth": 2
}

创建Prettier忽略配置文件 .prettierignore

1
2
3
pnpm-lock.yaml
build
dist

测试ESlint和Prettier

1
2
3
4
5
6
7
8
9
# 使用ESlint检测所有文件
npx eslint .

# 使用Prettier检测所有文件
npx prettier --check .

# 使用prettier检测并修复所有文件
npx prettier --write .

修改package.json ,添加scrit

1
2
3
4
5
6
7
8
9
{
  ...
  "scripts": {
    "prettier:check": "npx prettier . --check",
    "prettier:fix": "npx prettier . --write",
    "eslint": "npx eslint ."
  },
	...
}

Husky

安装

1
pnpm add -D husky

使用

Edit package.json > prepare script and run it once:

1
2
npm set-script prepare "husky install"
npm run prepare

Add a hook:

1
2
npx husky add .husky/pre-commit "npx lint-staged"
git add .husky/pre-commit

或者直接使用 npx husky-init && pnpm i -D 创建以上文件

Lint-staged

安装

1
pnpm add -D lint-staged

配置

在根目录下创建 lint-staged.config.js，内容如下：

1
2
3
4
module.exports = {
  '*.{js,jsx,ts,tsx,vue}': ['eslint --fix', 'prettier --write'],
  '*.{css,scss,less,md,json,yaml}': ['prettier --write'],
}

修改 .husky/pre-commit

1
2
3
4
5
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx lint-staged

Commitizen

安装

1
pnpm add commitizen cz-conventional-changelog -D

修改package.json文件，也可以在根目录创建 .czrc 文件

1
2
3
4
5
6
7
8
9
{
  ...
   "config": {
    "commitizen": {
      "path": "cz-conventional-changelog"
    }
  }
  ...
}

创建husky脚本

.husky/prepare-commit-msg，在执行 git commit时，使用commitizen 的交互式命令来书写commitMsg

1
npx husky add .husky/prepare-commit-msg "exec < /dev/tty && git cz --hook || true"

Commitlint

安装

1
2
3
4
5
6
7
# Install commitlint cli and conventional config
pnpm add -D @commitlint/{config-conventional,cli}
# For Windows:
pnpm add -D @commitlint/config-conventional @commitlint/cli

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

创建 husky 脚本

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

so easy!