前端代码规范校验工具的搭配

前端开发中，每个人的思路和代码质量或多或少都有不同，所以需要用到eslint、prettier、husky、commitlint等工具对代码格式以及提交流程进行一个规范的约束和校验。

ESLint

ESLint 是一个用于标识 JavaScript 代码错误和强制执行代码风格的工具。它可以帮助开发人员编写更干净、更一致的代码，并避免常见的错误。

安装

npm install eslint --save-dev

使用

在项目根目录下创建 .eslintrc.js 文件，并添加以下配置：

{
  "extends": "eslint:recommended",
  "rules": {
    "indent": ["error", 2],
    "quotes": ["error", "double"],
    "semi": ["error", "always"]
  }
}

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

npx eslint --fix .

这将自动修复代码中的所有 ESLint 错误。

Prettier

Prettier 是一个用于格式化 JavaScript 代码的工具。它可以帮助开发人员编写更一致、更美观的代码。

安装

npm install prettier --save-dev

使用

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

{
  "printWidth": 80,
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "es5"
}

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

npx prettier --write .

这将自动格式化项目中的所有 JavaScript 代码。

Husky

Husky 是一个用于在 Git 提交前运行脚本的工具。它可以帮助开发人员在提交代码前自动执行一些任务，例如运行 ESLint 和 Prettier。

安装

npm install husky --save-dev

使用

在项目根目录下创建 .husky 文件夹，并在其中创建 pre-commit 文件，并添加以下内容：

#!/bin/sh
npx eslint --fix .
npx prettier --write .

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

npx husky install

这将自动在 Git 提交前运行 ESLint 和 Prettier。

Commitlint

Commitlint 是一个用于验证提交消息的工具。它可以帮助开发人员编写更规范、更一致的提交消息。

安装

npm install commitlint --save-dev

使用

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

{
  "extends": ["@commitlint/config-conventional"]
}

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

npx commitlint --edit

这将打开提交消息编辑器，并提示您输入提交消息。

总结

ESLint、Prettier、Husky 和 Commitlint 是前端开发中常用的代码规范检查工具。这些工具可以帮助开发人员编写更干净、更一致的代码，并减少代码错误。通过使用这些工具，开发人员可以提高代码的可读性和维护性，并确保代码风格的一致性。