VSCode中Eslint和Prettier冲突问题如何解决

这篇文章主要讲解了“vscode中Eslint和Prettier冲突问题如何解决”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“VSCode中Eslint和Prettier冲突问题如何解决”吧！

前言

本次环境皆为 @Vue/cli默认安装带有的 eslint@7.32.0，VSCode 插件版本：

• Eslint v2.4.0

• Prettier v9.10.4

为什么会冲突

首先我们需要知道为什么使用Eslint 和 Prettier，下面先介绍两者的单独用法

Eslint

javascript Vue typescript 等文件的代码规范检测工具，当代码写法不符合时，会在终端进行报错提醒，阻止你的serve服务。为了在 VSCode 中检测到我们代码不规范时，能自动修复错误写法，我们需要安装 VSCode 的插件 ESLint

安装后在 setting.JSON 中配置如下并重启编辑器：

{"editor.codeActionsOnSave": {    "source.fixAll.eslint": true}}

之后再编写 js等文件保存时都会自动格式化，保证 Eslint再也不会报错

Prettier

一种规范化的写法规则，包含各种类型文件，其中部分Javascript 等规则，会和 Eslint不一样，使用时只要在VSCode 中安装Prettier插件即可

安装后在 setting.json 中配置如下并重启编辑器：

{"editor.fORMatOnSave": true,"editor.defaultFormatter": "esbenp.prettier-vscode",}

表示所有类型的文件的格式化都使用 Prettier

冲突

如果两者都启用，则因为规则冲突，在JS等文件中，会出现保存时，先运行了ESLint，然后再运行了 Prettier，导致 @eslint检测依然报错

解决

既然使用 eslint规范，我的理解上当然是不能去修改eslint，因为这是共用规范，修改了就没有再使用的必要了，所以我是不推荐修改eslint的方式。

我的做法也很简单，在eslint作用的文件类型中，继续使用eslint进行格式化，在其他类型文件中，使用prettier进行格式化

eslint继续使用 codeActionsOnSave进行设置，把 eslint作用范围的文件类型的formatOnSave关闭

{  "editor.tabSize": 2,// 开启eslint  "editor.codeActionsOnSave": {    "source.fixAll.eslint": true},  // 开启自动格式化  "editor.formatOnSave": true,  // 设置所有文件默认格式化工具为prettier  "editor.defaultFormatter": "esbenp.prettier-vscode",  // eslint范围内的文件类型，关闭保存时格式化  "[javascript]": {     "editor.formatOnSave": false  },  "[typescript]": {     "editor.formatOnSave": false  },  "[vue]": {    "editor.formatOnSave": false  },  "[javascriptReact]": {    "editor.formatOnSave": false  }}

感谢各位的阅读，以上就是“VSCode中Eslint和Prettier冲突问题如何解决”的内容了，经过本文的学习后，相信大家对VSCode中Eslint和Prettier冲突问题如何解决这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！