Husky + Prettier + ESLint + Commitlint：打造规范化代码世界

前端

2023-09-24 11:21:54

迈出第一步：认识Husky

Husky 是一位忠实的代码卫士，它驻扎在代码库中，时刻监视代码的变化，并根据既定的规则采取行动。当代码库发生提交时，Husky会敏锐地捕捉到这一动作，并按照预先配置好的指令执行相应的操作，确保代码符合既定的规范。

代码美化师：Prettier

Prettier 是代码美化领域的专家，它能够将杂乱无章的代码转换为整洁美观的形式，同时保持代码语义不变。Prettier 秉承着“一致性就是美”的理念，通过一套统一的格式化规则，让代码焕然一新，让开发者们赏心悦目。

资深代码批评家：ESLint

ESLint是一位资深代码批评家，它对代码质量有着严格的要求。它会仔细检查代码的语法、风格和最佳实践，并根据预先设定的规则提出改进建议。ESLint 的目标是帮助开发者编写出高质量的代码，让代码更加健壮和可靠。

提交代码前的最后一道关口：Commitlint

Commitlint 是提交代码前的最后一道关口，它会检查提交信息是否符合规范，确保提交信息清晰、简洁、有意义。Commitlint 的作用是帮助开发者养成良好的提交习惯，让代码库的提交历史更加清晰易读，便于团队协作和代码维护。

四剑合璧，规范代码世界

当 Husky、Prettier、ESLint 和 Commitlint 四剑合璧，它们将共同打造出一个规范化代码世界，帮助开发者们编写出高质量、整洁美观、符合最佳实践的代码。这将极大地提高团队协作效率，确保代码质量，并让代码库更加易于维护和理解。

实践出真知，打造规范代码世界

要打造规范代码世界，实践是关键。以下步骤将指导您完成整个过程：

安装必要的工具：

npm install husky prettier eslint commitlint --save-dev

配置 Husky：

在项目根目录下创建 .huskyrc 文件，并添加以下内容：
```
{
  "hooks": {
    "pre-commit": "npx lint-staged"
  }
}
```

配置 Prettier：

在项目根目录下创建 .prettierrc 文件，并添加以下内容：

{
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all"
}

配置 ESLint：

在项目根目录下创建 .eslintrc 文件，并添加以下内容：

{
  "extends": ["eslint:recommended"],
  "rules": {
    "semi": ["error", "always"],
    "quotes": ["error", "single"],
    "no-trailing-spaces": ["error"]
  }
}

配置 Commitlint：

在项目根目录下创建 .commitlintrc.js 文件，并添加以下内容：

module.exports = {
  rules: {
    'body-leading-blank': [1, 'always'],
    'footer-leading-blank': [1, 'always'],
    'subject-case': [2, 'always', ['lower-case']],
    'subject-empty': [2, 'never'],
    'subject-full-stop': [2, 'never', '.'],
    'type-case': [2, 'always', 'lower-case'],
    'type-empty': [2, 'never'],
    'type-enum': [
      2,
      'always',
      ['feat', 'fix', 'docs', 'style', 'refactor', 'test', 'chore']
    ]
  }
};