Eslint + Prettier：高效保障代码风格与提交内容校验

前言

在团队协作中，代码风格的不一致可能会导致代码可读性差、维护困难和合并冲突。为了避免这些问题，我们需要使用代码风格规范工具来对代码进行格式化和校验。Eslint 和 Prettier 是两种流行的代码风格规范工具，它们可以帮助我们轻松地对代码进行格式化和校验。

1. 代码格式规范

Eslint 是一个 JavaScript 代码风格校验工具，它可以帮助我们检查代码是否符合预定义的规则。Eslint 提供了多种预定义规则，我们可以根据自己的需求选择要遵循的规则。

npm install eslint --save-dev

在项目中创建一个 .eslintrc.js 文件，并添加以下内容：

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

在项目中添加一个 package.json 文件，并添加以下内容：

{
  "scripts": {
    "lint": "eslint ."
  }
}

现在，我们可以运行 npm run lint 命令来检查代码是否符合 Eslint 规则。

2. 代码格式化

Prettier 是一个代码格式化工具，它可以帮助我们自动格式化代码，使其符合预定义的格式。Prettier 提供了多种预定义格式，我们可以根据自己的需求选择要遵循的格式。

npm install prettier --save-dev

在项目中创建一个 .prettierrc.js 文件，并添加以下内容：

{
  "printWidth": 80,
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true
}

在项目中添加一个 package.json 文件，并添加以下内容：

{
  "scripts": {
    "format": "prettier ."
  }
}

现在，我们可以运行 npm run format 命令来格式化代码。

3. 提交内容校验

我们可以使用 Husky 和 Lint-staged 来对提交内容进行校验。Husky 是一个 Git 钩子工具，它可以在提交代码之前运行指定的命令。Lint-staged 是一个工具，它可以帮助我们只对已修改的文件运行 Eslint 和 Prettier。

npm install husky lint-staged --save-dev

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

#!/bin/sh
npx lint-staged

在项目中添加一个 .lintstagedrc.js 文件，并添加以下内容：

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

现在，在提交代码之前，Husky 会自动运行 npm run lint-staged 命令，该命令会对已修改的文件运行 Eslint 和 Prettier。如果代码不符合 Eslint 规则或格式不正确，则提交操作将被阻止。

总结

通过使用 Eslint 和 Prettier 工具链，我们可以轻松地对代码进行格式化和校验，从而提高代码的可读性、维护性和团队协作效率。