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

ESLint 和 Prettier 配合使用相关推荐

更新版-梳理前端开发使用eslint和prettier来检查和格式化代码问题
更新版,之前的版本可以看这里:梳理前端开发使用eslint和prettier来检查和格式化代码问题一.问题痛点在团队的项目开发过程中,代码维护所占的时间比重往往大于新功能的开发.因此编写符合团队编 ...
eslint 保存自动格式化_代码规范之理解ESLint、Prettier、EditorConfig
授权转载自:nowThen https://juejin.cn/post/6895889063111294990 前言团队多人协同开发项目中困恼团队管理一个很大的问题是:无可避免地会出现每个开发者编 ...
【总结】1265- 理解 ESLint、Prettier、EditorConfig 代码规范
前言团队多人协同开发项目中困恼团队管理一个很大的问题是:无可避免地会出现每个开发者编码习惯不同.代码风格迥异,为了代码高可用.可维护性, 如何从项目管理上尽量统一和规范代码呢? [x] 文档约定 - ...
vue项目接入eslint、prettier、husky+lint-staged
引言在vue-cli官方的脚手架创建项目时,会自动让选择Eslint+Prettier,如果是老项目想接入,那么按照下面步骤接入即可 eslint安装 npm i -D eslint eslint- ...
在vscode里配置ESLint和Prettier
在vscode里配置ESLint和Prettier 文章目录在vscode里配置ESLint和Prettier vscode插件和npm包区别解决ESLint和Prettier冲突 vscode环 ...
前端代码规范工具ESLint和Prettier
前端代码规范工具ESLint和Prettier 1. ESLint是什么? ESLint 是一个开源的 JavaScript 代码检查工具,由 Nicholas C. Zakas 于2013年6月创建 ...
安装lint-staged 报错：Cannot add lint-staged: only eslint, stylelint, prettier...
错误背景: 在使用 prettier 格式化插件,我们希望提交代码时,借助 prettier 可以自动格式化所以需要安装: $ npx mrm lint-staged 不过安装过程中出现了错误 Can ...
React 创建项目流程+配置 eslint、 prettier 和 commitlint 规范工程
一. 利用create-react-app创建TS项目 React中文文档 :开始 – React npx create-react-app projectName --template typesc ...
eslint 搭配 prettier 格式化 + husky 搭配 lint-staged 实现提交格式化和检测
eslint 搭配 prettier 格式化 + husky 搭配 lint-staged 实现提交格式化和检测注:本文基本是写给自己看的, 属于一个记录笔记, 避免每次配置都要查, 写得不清晰, ...

ESLint 和 Prettier 配合使用