eslint+prettier+commitlint集成由于eslint等前端代码规范工具版本大更新，新增了扁平化配置，

前端代码规范

代码规范（记得将 node_modules 放到.gitignore 中）

Eslint

项目集成

pnpm i eslint -D
pnpm create @eslint/config@latest

配置文件
- init 命令会自动生成 eslint 配置文件

prettier

项目集成

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

配置文件

创建.prettierrc

{
  "semi": false,
  "tabWidth": 2,
  "trailingComma": "none",
  "singleQuote": true,
  "arrowParens": "avoid"
}

git 规范

Git 有很多的 hooks, 让我们在不同的阶段,对代码进行不同的操作,控制提交到仓库的代码的规范性,和准确性, 以下只是几个常用的钩子

pre-commit: 通过钩子函数,判断提交的代码是否符合规范
commit-msg: 通过钩子函数,判断 commit 信息是否符合规范
pre-push: 通过钩子,执行测试,避免对以前的内容造成影响

工具

husky: 操作 git 钩子的工具
lint-staged: 本地暂存代码检查工具
commitlint: commit 信息校验工具
commitizen: 辅助 commit 信息 ,就像这样,通过选择输入,规范提交信息

安装流程

安装代码校验依赖

pnpm i lint-staged husky -D
pnpm set-script prepare "husky" # 在package.json中添加脚本，不过这个在npm 8.19.4之后就被废弃了，所以可以直接在package.json中添加脚本
pnpm prepare # 初始化husky,将 git hooks 钩子交由,husky执行

{
  "devDependencies": {
    // ...其他配置
  },
  "scripts": {
    "prepare": "husky || true"
    // 如果只安装 dependencies（不是 devDependencies），"prepare": "husky" 脚本可能会失败，因为 Husky 不会被安装。这里通过设置true可以避免出错
  }
}

初始化 husky, 会在根目录创建 .husky 文件夹

echo "npx lint-staged" > .husky/pre-commit

pre-commit 执行 npx lint-staged 指令

根目录创建 .lintstagedrc.json 文件控制检查和操作方式

// .lintstagedrc.json
{
  "*.{js,jsx,ts,tsx}": ["prettier --write .", "eslint  --fix"],
  "*.md": ["prettier --write"]
}

安装提交信息依赖

pnpm i commitlint @commitlint/config-conventional -D

echo 'npx --no-install commitlint --edit "$1"' > .husky/commit-msg

这里我们需要新建 .commitlintrc.js 文件，写入我们的 commitlint/config-conventional 规范

// .commitlintrc.js
module.exports = {
  extends: ["@commitlint/config-conventional"],
};

@commitlint/config-conventional 这是一个规范配置,标识采用什么规范来执行消息校验, 这个默认是 Angular 的提交规范，这里我们也可以用我们自己的方法来校验

echo 'node [dir]/filename.js' > .husky/commit-msg # 指定目录文件

安装辅助提交依赖

安装指令和命令行展示信息

pnpm i commitizen cz-conventional-changelog -D

编写 commit 指令

"scripts": {
	"commit": "git-cz"
}

自定义提交规范

pnpm i -D commitlint-config-cz  cz-customizable

修改.commitlintrc.js配置文件，用来配置提交辅助信息

module.export = {
  extend: ["cz"],
  rules: {
    // 自定义规则
  },
};

配置.cz-config.js

"use strict";
module.exports = {
  types: [
    { value: "✨新增", name: "新增:    新的内容" },
    { value: "🐛修复", name: "修复:    修复一个Bug" },
    { value: "📝文档", name: "文档:    变更的只有文档" },
    { value: "💄格式", name: "格式:    空格, 分号等格式修复" },
    { value: "♻️重构", name: "重构:    代码重构，注意和特性、修复区分开" },
    { value: "⚡️性能", name: "性能:    提升性能" },
    { value: "✅测试", name: "测试:    添加一个测试" },
    { value: "🔧工具", name: "工具:    开发工具变动(构建、脚手架工具等)" },
    { value: "⏪回滚", name: "回滚:    代码回退" },
  ],
  scopes: [
    { name: "leetcode" },
    { name: "javascript" },
    { name: "typescript" },
    { name: "Vue" },
    { name: "node" },
  ],
  // it needs to match the value for field type. Eg.: 'fix'
  /*  scopeOverrides: {
      fix: [
        {name: 'merge'},
        {name: 'style'},
        {name: 'e2eTest'},
        {name: 'unitTest'}
      ]
    },  */
  // override the messages, defaults are as follows
  messages: {
    type: "选择一种你的提交类型:",
    scope: "选择一个scope (可选):",
    // used if allowCustomScopes is true
    customScope: "Denote the SCOPE of this change:",
    subject: "短说明:\n",
    body: '长说明，使用"|"换行(可选)：\n',
    breaking: "非兼容性说明 (可选):\n",
    footer: "关联关闭的issue，例如：#31, #34(可选):\n",
    confirmCommit: "确定提交说明?(yes/no)",
  },
  allowCustomScopes: true,
  allowBreakingChanges: ["特性", "修复"],
  // limit subject length
  subjectLimit: 100,
};

在package.json中修改原来的commit配置

"config": {
    "commitizen": {
      "path": "./node_modules/cz-customizable"
    }
  }

测试

如果有测试文件可以在 pre-push 的时候运行，当然如果想运行的话需要在 package.json 文件中添加 test 脚本

echo 'pnpm test' > .husky/pre-push

小结：由于eslint等前端代码规范工具版本大更新，新增了扁平化配置，导致之前的很多命令现在无法使用，本文主要针对前端规范工具的一次简单配置，集成代码编写规范，代码提交规范，测试功能。