零配置 Eslint + Prettier + husky + lint-staged 构建前端代码工作流

前言

在前端开发中，代码质量和编码规范非常重要。它们不仅可以提高代码的可读性和可维护性，还可以减少 bug 的出现。为了确保代码质量和编码规范，我们需要使用一些工具来帮助我们检查代码。

Eslint、Prettier、husky 和 lint-staged 就是这样的工具。它们可以帮助我们自动检查代码的语法、格式和编码规范，并及时发现问题，以便我们能够及时修复。

什么是 Eslint

Eslint 是一个用于检查 JavaScript 代码的语法和编码规范的工具。它可以帮助我们发现代码中的错误和潜在问题，并提供修复建议。

Eslint 有很多预定义的规则，我们可以根据自己的需要来选择使用哪些规则。我们也可以自己编写规则来满足自己的特定需求。

什么是 Prettier

Prettier 是一个用于格式化 JavaScript 代码的工具。它可以帮助我们自动将代码格式化为一致的风格，从而提高代码的可读性和可维护性。

Prettier 有很多预定义的格式化规则，我们可以根据自己的需要来选择使用哪些规则。我们也可以自己编写规则来满足自己的特定需求。

什么是 husky

husky 是一个用于管理 git hook 的工具。它可以帮助我们在特定的 git 操作（比如提交代码、推送到远程仓库等）之前或之后执行特定的脚本。

husky 可以与 Eslint 和 Prettier 一起使用，以便在提交代码之前自动检查代码的语法、格式和编码规范，并及时发现问题。

什么是 lint-staged

lint-staged 是一个用于在 git 暂存区中检查代码的工具。它可以帮助我们在提交代码之前自动检查代码的语法、格式和编码规范，并及时发现问题。

lint-staged 可以与 Eslint 和 Prettier 一起使用，以便在提交代码之前自动检查代码的语法、格式和编码规范，并及时发现问题。

如何使用 Eslint、Prettier、husky 和 lint-staged

1. 安装 Eslint

npm install --save-dev eslint

2. 安装 Prettier

npm install --save-dev prettier

3. 安装 husky

npm install --save-dev husky

4. 安装 lint-staged

npm install --save-dev lint-staged

5. 配置 Eslint

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

{
  "extends": ["eslint:recommended"],
  "rules": {
    "semi": ["error", "always"],
    "quotes": ["error", "double"],
    "no-console": "error"
  }
}

6. 配置 Prettier

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

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

7. 配置 husky

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

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

8. 配置 lint-staged

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

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

9. 运行 Eslint 和 Prettier

在项目根目录下运行以下命令：

npm run lint

10. 提交代码

当您要提交代码时，husky 会自动运行 Eslint 和 Prettier 来检查代码的语法、格式和编码规范。如果发现问题，husky 会阻止您提交代码，并提示您修复问题。

总结

通过使用 Eslint、Prettier、husky 和 lint-staged，我们可以构建一个零配置的前端代码工作流，帮助我们提高代码质量、保持编码规范、并实现自动化的代码检查。这将有助于提高开发效率并确保代码质量始终如一。