浏览器中自动规范你的前端团队！

前端

2022-12-10 22:17:21

提升前端代码质量：Husky + Lint-Staged + Commitlint 三剑客

前端代码质量至关重要，但经常面临着不一致的提交和低质量代码的问题。为了解决这些痛点，Husky 、Lint-Staged 和 Commitlint 携手出击，为您带来无忧无虑的代码提交体验。

Husky：提交前的卫士

Husky 就像一位尽职尽责的卫士，在您提交代码前自动执行特定的检查，确保其符合既定的标准。它会仔细检查代码是否存在潜在错误或不规范之处，及时发现问题并阻止提交，让您有充裕的时间进行修复，保证代码质量始终如一。

Lint-Staged：分阶段的代码卫士

Lint-Staged 是一位更为细致的卫士，它逐个文件地检查代码，确保每个文件都符合既定的规范。在提交代码之前，它会对您修改过的文件进行逐一扫描，及时发现并修复问题，防止不合格的代码提交，保障代码的整洁和规范。

Commitlint：提交消息的卫士

Commitlint 是专门针对提交消息的卫士。它会检查您的提交消息是否符合既定的规范，例如长度、格式和内容等。如果发现任何不符合规范之处，它也会毫不留情地阻止提交，让您重新修改提交消息，保证提交消息的一致性和可读性，让代码提交井然有序。

三剑客携手出击

这三剑客完美配合，为您提供全方位的代码质量保障。Husky 在提交前把关，Lint-Staged 分阶段检查，Commitlint 校验提交消息，共同打造一支规范、高效的前端团队，让协作和代码管理变得更加轻松。

具体操作步骤

安装 Husky、Lint-Staged 和 Commitlint。
在项目根目录下创建 .husky 目录。
在 .husky 目录下创建 pre-commit 文件，内容如下：

#!/bin/sh
npx lint-staged

在项目根目录下创建 .lintstagedrc 文件，内容如下：

{
  "*.js": [
    "eslint --fix"
  ]
}

在项目根目录下创建 .commitlintrc.js 文件，内容如下：

module.exports = {
  rules: {
    'header-max-length': [2, 'always', 100],
    'body-max-line-length': [2, 'always', 100],
    'footer-max-line-length': [2, 'always', 100],
    'type-enum': [
      2,
      'always',
      ['feat', 'fix', 'docs', 'style', 'refactor', 'test', 'chore']
    ],
    'scope-enum': [
      2,
      'always',
      ['component-a', 'component-b', 'component-c']
    ]
  }
};