如何集成 Prettier 和 ESLint

随着现代前端开发工具化和团队协作的推进，代码风格的规范性和一致性变得越来越重要。Prettier 和 ESLint 作为前端领域中比较流行的代码风格工具，它们可以使开发者在编辑代码的时候，自动格式化和校验代码标准，从而提高开发效率和代码质量。

本文将介绍如何将 Prettier 和 ESLint 集成到项目中，让我们一起来学习！

安装 Prettier 和 ESLint

要使用 Prettier 和 ESLint，首先需要在项目中安装它们。我们可以使用 npm 或者 yarn 安装。

# 使用 npm 安装
npm install --save-dev prettier eslint

# 使用 yarn 安装
yarn add prettier eslint --dev

配置 Prettier

Prettier 配置文件的文件名为 .prettierrc，它使用 JSON 格式来设定选项。可以在 package.json 文件中添加一个字段名为 prettier 来配置 Prettier。

例如，我们添加以下选项来保持 2 个缩进和单引号。

"prettier": {
  "tabWidth": 2,
  "singleQuote": true
}

当然，此处只是一个示例，你可以根据你的需求来配置选项。

配置 ESLint

与 Prettier 不同，ESLint 的配置文件格式不限于 JSON，也可以是 YAML、JavaScript 等格式。可以在项目根目录下创建一个 .eslintrc 或者 .eslintrc.{js|json|yml} 文件来配置 ESLint。

以下是一个基本的 .eslintrc.js 配置，它启用了 eslint:recommended 规则，并且禁止了 console 和 debugger 语句：

module.exports = {
  extends: ['eslint:recommended'],
  rules: {
    'no-console': 'error',
    'no-debugger': 'error',
  },
};

集成 Prettier 和 ESLint

在这一步，我们将让 Prettier 和 ESLint 一起协作，对我们的代码进行格式化和校验。我们可以使用 eslint-plugin-prettier 和 eslint-config-prettier 这两个插件来简化配置。

首先，安装这两个插件：

# 使用 npm 安装
npm install --save-dev eslint-plugin-prettier eslint-config-prettier

# 使用 yarn 安装
yarn add eslint-plugin-prettier eslint-config-prettier --dev

然后，在 .eslintrc.js 配置文件中添加以下配置：

module.exports = {
  extends: ['eslint:recommended', 'prettier'],
  plugins: ['prettier'],
  rules: {
    'prettier/prettier': 'error',
  },
};

这里我们给 extends 和 plugins 字段添加了 prettier 配置，同时也添加了一个 prettier/prettier 规则，它会将 Prettier 中的选项添加到 ESLint 中，所有与 Prettier 冲突的 ESLint 规则都会被禁用掉。

最后，为了防止编码时误操作，我们可以在 package.json 文件中添加一个脚本来调用 prettier 和 eslint。

"scripts": {
  "format": "prettier \"**/*.+(js|json|md)\" --write && eslint . --fix"
}

在命令行中运行 npm run format 或 yarn format 即可执行格式化和校验命令。

总结

通过本文的介绍，我们可以学会如何集成 Prettier 和 ESLint，以提高前端项目的代码风格规范性和可维护性。当然，这只是一个基础的示例，我们可以根据实际项目的需求，来定制化更加严谨和贴近团队开发的配置。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6535e9037d4982a6ebda3783