让你的代码更靓丽：ESLint + Prettier + Stylelint + Commitlint + Husky

2022-12-13 08:44:37

前端代码规范利器：ESLint、Prettier、Stylelint、Commitlint 和 Husky

作为一名前端开发人员，你是否经常苦恼于代码风格不统一、代码质量低下，以及在提交代码时需要手动检查和修复代码风格和语法错误？如果你有这样的烦恼，那么你一定要了解一下以下五款强大的工具：ESLint、Prettier、Stylelint、Commitlint 和 Husky。它们可以轻松解决这些问题，让你拥有更规范、更整洁、更可维护的代码。

1. ESLint：代码卫士

ESLint 是一款强大的 JavaScript 代码检查工具。它可以发现代码中的潜在问题，包括语法错误、逻辑错误和代码风格错误。ESLint 提供了丰富的规则集，你可以根据需要选择合适的规则来检查代码。

2. Prettier：代码美化师

Prettier 是一款代码格式化工具，可以自动格式化代码，使其符合统一的代码风格。Prettier 支持多种编程语言，包括 JavaScript、CSS 和 HTML。使用 Prettier，你可以轻松避免代码风格混乱，让代码更加整洁易读。

3. Stylelint：CSS 规范专家

Stylelint 是一款 CSS 代码检查工具，可以发现 CSS 代码中的潜在问题，包括语法错误、逻辑错误和代码风格错误。Stylelint 提供了全面的规则集，你可以选择合适的规则来检查 CSS 代码，确保其符合团队规范和最佳实践。

4. Commitlint：提交信息守门人

Commitlint 是一款提交信息检查工具，可以检查提交信息的格式和内容，确保提交信息符合团队约定。它提供了多种规则，你可以根据需要选择合适的规则来检查提交信息，确保其清晰、简洁、有意义。

5. Husky：提交前卫士

Husky 是一款提交钩子工具，可以在提交代码之前执行一些操作，例如检查代码风格、运行单元测试等。Husky 提供了多种钩子，你可以根据需要选择合适的钩子来执行操作，确保代码符合规范和质量要求。

如何使用

使用这五款工具非常简单，只需要以下几个步骤：

安装工具： 使用 npm 或 yarn 安装 ESLint、Prettier、Stylelint、Commitlint 和 Husky。
配置工具： 创建配置文件，配置工具规则和选项。
使用工具： 使用命令行命令检查和修复代码。
提交代码： 使用 Commitlint 检查提交信息，确保其符合规范。

示例代码

以下代码示例演示了如何使用这些工具检查和修复代码：

// .eslintrc.js
module.exports = {
  rules: {
    "no-console": "error",
    "semi": "error",
    "quotes": ["error", "double"],
  },
};

// package.json
{
  "scripts": {
    "lint": "eslint .",
    "format": "prettier --write .",
    "stylelint": "stylelint .",
    "commitlint": "commitlint -e",
  },
}