ESLint 和 Prettier 配合使用

CSDN 中文章不一定能及时更新，欢迎点击前往我的博客查看最新版本：许盛的博客

ESLint 是一款 Lint 工具，包含了代码质量检查等等。

而 Prettier 仅仅只是一个代码风格的约束工具，对于代码可能产生的 Bug 等并不关心。

虽然说 ESLint 其实也具备一定的代码风格的格式化能力，但是在实践中，我们一般采用 ESlint 来做代码质量的约束，用 Prettier 来做代码风格的约束。

那么如何避免两者规则不一致导致的冲突？以及如何将两者更好的整合起来使用呢？

规则冲突

当 ESLint 的规则和 Prettier 的规则相冲突时，就会发现一个尴尬的问题，用其中一种来格式化代码，另一种就会报错。

prettier 官方提供了一款工具 eslint-config-prettier 来解决这个问题。

本质上这个工具其实就是禁用掉了一些不必要的以及和 Prettier 相冲突的 ESLint 规则。

安装依赖：

npm install --save-dev eslint-config-prettier

修改 eslintrc 文件

// 在 extends 部分加入 prettier 即可
{
  "extends": [
    "...",
    "prettier"
  ]
}

整合使用

上面介绍的工具，仅仅只是将部分 ESLint 规则给禁用了，避免 Prettier 格式化之后的代码导致 ESLint 报错而已，如何将两者结合起来使用呢？

prettier 官方提供了一个 ESLint 插件 eslint-plugin-prettier。

这个插件的主要作用就是将 prettier 作为 ESLint 的规则来使用，相当于代码不符合 Prettier 的标准时，会报一个 ESLint 错误，同时也可以通过 eslint --fix 来进行格式化。

例如：

这样就相当于将 Prettier 整合进了 ESLint 中。

安装依赖：

npm install --save-dev eslint-plugin-prettier
npm install --save-dev prettier

修改 eslintrc 文件

{
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

简化配置

经过上面两步配置后， ESLint 的配置文件大概如下：

 {
  "extends": [
    "prettier"
  ],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

其实可以简化一下，直接 extend 一下 plugin:prettier/recommended 即可。

如下：

{
  "extends": ["plugin:prettier/recommended"]
}

上面这行配置，实际上相当于：

{
  "extends": ["prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error",
    "arrow-body-style": "off",
    "prefer-arrow-callback": "off"
  }
}

可以参考文档：https://github.com/prettier/eslint-plugin-prettier#recommended-configuration

总结

总结一下，将 ESLint 和 Prettier 整合起来使用，其实非常简单。

1. 安装依赖

npm i --save-dev prettier
npm i --save-dev eslint-plugin-prettier eslint-config-prettier

2. 修改配置

{
  "extends": [
		"plugin:prettier/recommended" // 添加到数组的最后一个元素
	]
}

相关链接：

• prettier 官方文档：https://prettier.io/docs/en/integrating-with-linters.html#docsNav
• eslint-config-prettier：https://github.com/prettier/eslint-config-prettier
• eslint-plugin-prettier：https://github.com/prettier/eslint-plugin-prettier
• typescript-eslint：https://github.com/typescript-eslint/typescript-eslint/blob/master/docs/getting-started/linting/README.md#usage-with-prettier