代码格式配置规范 ESLint + Git Hooks

ESLint 与 Prettier 配合解决代码格式问题

1. 创建 .eslintrc.js文件

module.exports = {
  // 表示当前目录即为根目录，ESLint 规则将被限制到该目录下
  root: true,
  // env 表示启用 ESLint 检测的环境
  env: {
    // 在 node 环境下启动 ESLint 检测
    node: true
  },
  // ESLint 中基础配置需要继承的配置
  extends: [
    "plugin:vue/vue3-essential",
    "@vue/standard",
    "@vue/typescript/recommended"
  ],
  // 解析器
  parserOptions: {
    ecmaVersion: 2020
  },
  // 需要修改的启用规则及其各自的错误级别
  /**
   * 错误级别分为三种：
   * "off" 或 0 - 关闭规则
   * "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
   * "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
   */
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    "space-before-function-paren": "off",
    semi: "off",
    quotes: ["error", "double"]
  }
}

1. ESLint 与 Prettier 配合解决代码格式问题
   21. 在 VSCode 中安装 prettier 插件
   22. 创建.prettierrc文件

{
  "semi": true,
  "singleQuote": false,
  "trailingComma": "none"
}

Commitizen规范化提交代码

1. 全局安装Commitizen

npm install -g commitizen

2. 安装并配置 cz-customizable 插件

npm i cz-customizable --save-dev

3. 添加以下配置到 package.json 中

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

4. 项目根目录下创建 .cz-config.js 自定义提示文件

module.exports = {
  // 可选类型
  types: [
    { value: 'feat', name: 'feat:     新功能' },
    { value: 'fix', name: 'fix:      修复' },
    { value: 'docs', name: 'docs:     文档变更' },
    { value: 'style', name: 'style:    代码格式(不影响代码运行的变动)' },
    {
      value: 'refactor',
      name: 'refactor: 重构(既不是增加feature，也不是修复bug)'
    },
    { value: 'perf', name: 'perf:     性能优化' },
    { value: 'test', name: 'test:     增加测试' },
    { value: 'chore', name: 'chore:    构建过程或辅助工具的变动' },
    { value: 'revert', name: 'revert:   回退' },
    { value: 'build', name: 'build:    打包' }
  ],
  // 消息步骤
  messages: {
    type: '请选择提交类型:',
    customScope: '请输入修改范围(可选):',
    subject: '请简要描述提交(必填):',
    body: '请输入详细描述(可选):',
    footer: '请输入要关闭的issue(可选):',
    confirmCommit: '确认使用以上信息提交？(y/n/e/h)'
  },
  // 跳过问题
  skipQuestions: ['body', 'footer'],
  // subject文字长度默认是72
  subjectLimit: 72
}

5. 使用 git cz 代替 git commit，即可看到提示内容

husky + commitlint 检查提交描述是否符合规范要求

1. 安装依赖

npm install --save-dev @commitlint/config-conventional @commitlint/cli

3. 创建 commitlint.config.js 文件

module.exports = {
  // 继承的规则
  extends: ["@commitlint/config-conventional"],
  // 定义规则类型
  rules: {
    // type 类型定义，表示 git 提交的 type 必须在以下类型范围内
    "type-enum": [
      2,
      "always",
      [
        "feat", // 新功能 feature
        "fix", // 修复 bug
        "docs", // 文档注释
        "style", // 代码格式(不影响代码运行的变动)
        "refactor", // 重构(既不增加新功能，也不是修复bug)
        "perf", // 性能优化
        "test", // 增加测试
        "chore", // 构建过程或辅助工具的变动
        "revert", // 回退
        "build" // 打包
      ]
    ],
    // subject 大小写不做校验
    "subject-case": [0]
  }
};

3. 安装husky

npm install husky --save-dev 

4. 在 package.json 中生成 prepare 指令

npm set-script prepare "husky install"

5. 执行 prepare 指令

npm run prepare

6. 添加 commitlint 的 hook 到 husky中，并指令在 commit-msg 的 hooks 下执行 npx --no-install commitlint --edit "$1" 指令

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

7. package.json文件中，配置lint-staged进行自动修复格式错误，

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

8. 通过 pre-commit 检测提交时代码规范

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