ESLint + Prettier + Lint-Staged

eslint: 检查js代码规范
prettier: 代码格式化
lint-staged: git 缓存区 提交前的检查
commitlint: git commit 注释规范

1. ESLint

1. 安装

npm i eslint -D

2. 初始化

npx eslint --init

回答一系列问题生成配置文件.eslintrc.*

3. 验证

npx eslint <文件名>

看到检查结果，则 ESLint 生效。

2. Prettier

1. 安装

npm i preiiter -D

2. 新建一个.prettierrc.json配置文件。如果无需自定义配置，直接{}, 如果有需要，可以进行配置，如：

module.exports = {
  printWidth: 100, // 一行代码的最大字符数
  semi: false, // 尾部分号
  singleQuote: true, // 单引号
  ...
}

3. 关闭 ESLint 中的冲突规则，避免格式问题在编辑器报错。

npm i eslint-config-prettier eslint-plugin-prettier -D

并在 ESLint 中继承配置，以.eslintrc.json为例：

{
  "extends": [..., "plugin:prettier/recommended"]
}

4. 验证

npx prettier <文件名>

查看是否输出格式化后的代码

3. lint-staged

3.1 快速方案

npx mrm@2 lint-staged

这个命令会根据package.json的相关依赖自动安装、配置 lint-staged。所以，前提必须先完成 ESLint 和 Prettier 安装。

命令完成后，随便提交一个 commit 验证结果。

3.2 手动方案

也可以手动完成整个过程，更加清晰可控：

1. 安装相关依赖

npm install --save-dev husky lint-staged pretty-quick

其中，husky 方便 git hooks 管理，pretty-quick 可以更高效执行 Prettier。

2. 在package.json中配置 pre-commit：

"lint-staged": {
  // 匹配要检查的文件
  "*.(js|css|md)": "pretty-quick --staged"
}

3. 项目使用husky

npx husky install

4添加husky install到package.json scripts中, 然后跑一次 npm run prepare

npm pkg set scripts.prepare="husky install"
npm run prepare

执行之后会在package.json的script中会增加一个prepare。

5. 添加husky hook

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

执行之后会增加文件.husky/pre-commit

4. CommitLint

1. 安装插件

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

2. 在项目根目录添加commitlint.config.js配置文件
   commitlint.config.js

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

3. 添加git commit钩子

npx husky add .husky/commit-msg 'npx --no -- commitlint --edit ${1}'

4. commit 基本格式

type[(scope)]: subject
示例格式: feat: message 或 feat(scope): message

• type （必填）
  fix - Bug 修复
  feat - 新增功能
  build - 构建工具或项目依赖的改动，如 webpack/rollup 配置
  docs - 文档相关内容改动，如添加注释
  style - 不会影响系统功能的代码格式相关改动，如删除/添加空格
  refactor - 代码重构改动, 如 vue2 -> vue3
  test - 添加单元测试
  chore - 开发工具变动(构建、脚手架工具等)
  perf - 性能相关改动
  revert - 执行 git revert 之后的 revert 信息
• subject （必填）
  提交信息概述，能够简短概述本次提交的主体内容即可
• scope （可选）
  代码修改范围

参考

commitlint