使用 husky、lint-staged、prettier 和 stylelint 设置 git precommit hook

开始

在处理前端项目时，我总是会设置一些东西：ESLint、Prettier、husky 和 ​​lint-staged。

ESLint

ESLint用于对前端文件进行 lint 检查：JavaScript、JSX 和 TypeScript（如果项目使用TypeScript）。市面上有各种各样的规则和插件，但使用 lint 的要点是确保你的代码符合项目的标准/样式。

Prettier

Prettier用于格式化代码。它功能强大，提供了一些配置选项，但功能比较简单，例如单引号和双引号的区分。

stylelint

stylelint，正如包名所暗示的，是一个用于层叠样式表 (CSS) 的 linter。

副作用：改进代码审查

ESLint、stylelint 和 Prettier 让你能够从代码审查中移除任何关于它们功能的讨论，因为规则已经设定好了。这非常棒，因为它让你能够专注于实际的代码审查，也就是你试图修复的 bug 或正在实现的功能。

沙哑

注意：从 Husky 7 开始，设置完全不同。请按照4 到 7 迁移指南中的步骤操作。

husky是一个 Node 包，它让创建Git 钩子变得轻松有趣。什么是 Git 钩子？它是一个在仓库事件发生期间运行的脚本。例如，在提交之前。安装 husky 包后，只需进行配置即可决定使用哪些 Git 钩子以及针对特定钩子运行哪些操作。

这是一个示例配置。

"husky": {
  "hooks": {
    "pre-commit": "echo 'hi'"
  }
}

当文件提交到存储库时，上述配置将echo 'hi'在文件提交之前运行。

lint-staged

lint-staged是一个 Node 包，它能更轻松地为 Git 仓库中的暂存文件运行任务。回到上面 echo hi 的示例，我们可以将该命令改为lint-staged。

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
}

如果我们提交一个文件，Git 的预提交钩子会运行 lint-staged，但什么也不会发生。我们需要让 lint-staged 知道我们在预提交期间要做什么。让我们来设置一下 lint-staged 的​​配置。

"lint-staged": {
  "*.{js}": [
    "prettier --write"
  ]
}

现在，如果我们提交一个文件，预提交钩子就会运行，如果有任何 JavaScript 文件被提交，预提交钩子（感谢 lint-staged）将在文件上运行 prettier 并使用任何格式更改更新文件，然后提交文件。

整合起来

所有这些工具共同构成了与项目编码标准/样式指南相关的出色的自动化工作流程。

现在让我们将它们整合在一起，以便您可以在自己的项目中使用它。

您需要安装上面提到的所有依赖项，以及其他一些依赖项。我稍后会解释原因。

npm install -D eslint prettier eslint-config-prettier eslint-plugin-prettier husky lint-staged stylelint stylelint-config-standard

eslint-config-prettier并且eslint-plugin-prettier stylelint stylelint-config-standard是必需的，以便 eslint 仅负责与格式无关的规则，因为 prettier 处理格式。

如果你好奇 是干什么-D用的，那是为了让它们被安装到 package.json 中，而devDependencies不是直接安装dependencies在 package.json 中。更多信息，请参阅在 package.json 文件中指定依赖项和 devDependencies。

在项目根目录中，创建一个名为 的文件.eslintrc.js。它将存储我们所需的 eslint 配置。我们将遵循 eslint 推荐的规则。

/* eslint-env node */
module.exports = {
  extends: ['eslint:recommended', 'prettier'],
  plugins: ['prettier'],
  parserOptions: {
    ecmaVersion: 2018, // Put whatever version you want here
  },
  env: {
    browser: true,
  }, 
};

注意：/* eslint-env node */由于这是一个前端项目，并且 .eslintrc.js 文件是 Node.js 文件，因此我们可以说“这是一个 Node.js 文件”。感谢Rafi指出了这一点。

这是一个基本的 eslint 配置。例如，如果你在项目中使用了 React，那么 React eslint 规则还需要额外的配置。

在项目根目录下，创建一个名为 的文件.stylelintrc.json。它将存储我们所需的 stylelint 配置。我们将遵循 stylelint 推荐的规则。

{
  "extends": "stylelint-config-standard"
}

这是基本的 stylelint 配置。您可以随意扩展这些标准 stylelint 规则。

接下来我们需要配置 husky 和 ​​lint-staged。在 package.json 文件中添加以下两个配置部分。

"lint-staged": {
    "*.js": [
        "eslint —-fix",
        "prettier --write"
    ],

    "*.{css,scss}": [
        "stylelint"
    ]
},
"prettier": {
    "singleQuote": true,
    "trailingComma": "all",
    "printWidth": 80,
    "tabWidth": 4
}

如果您不相信机器人能够修复您的代码，请—-fix从 eslint 命令中删除该参数。

上面更漂亮的配置是我使用的，但您可以随意根据自己的喜好进行调整。

所有部件现在都已运行。如果您最终使用样板，这些工具可能已经包含在内。例如，Create React App工具链就自带了 eslint。

奖励：运行 jest 测试

我将其添加为额外提示，因为并非所有项目都使用 jest。

但是...如果您的项目使用jest，您还可以运行与正在提交的文件相关的测试。

"lint-staged": {
    "*.js": [
        "eslint —-fix",
        "prettier --write",
        "jest --findRelatedTests"
    ]
}

了解有关您的工具的更多信息

我强烈建议你深入研究所有讨论过的工具。真正了解你的工具是一种超能力。

ESLint、prettier、stylelint、husky 和 ​​lint-staged 都是前端的绝佳工具，现在就使用这些设置来做一些伟大的事情吧！

下次再见！