VSCode中 Eslint 和 Prettier 冲突问题最新解决方法

准静止疯

前言

本次环境皆为

1. @vue/cli

复制代码

默认安装带有的

1. eslint@7.32.0

复制代码

，

1. VSCode

复制代码

插件版本：

• 1. Eslint v2.4.0

  复制代码
• 1. Prettier v9.10.4

  复制代码

为什么会冲突

首先我们需要知道为什么使用

1. Eslint

复制代码

和

1. Prettier

复制代码

，下面先介绍两者的单独用法

Eslint

1. Javascript

复制代码

1. Vue

复制代码

1. Typescript

复制代码

等文件的代码规范检测工具，当代码写法不符合时，会在终端进行报错提醒，阻止你的

1. serve

复制代码

服务。为了在

1. VSCode

复制代码

中检测到我们代码不规范时，能自动修复错误写法，我们需要安装

1. VSCode

复制代码

的插件

1. ESLint

复制代码

安装后在

1. setting.json

复制代码

中配置如下并重启编辑器：

1. {
   
2.         "editor.codeActionsOnSave": {
   
3.     "source.fixAll.eslint": true
   
4.         }
   
5. }

复制代码

之后再编写

1. js

复制代码

等文件保存时都会自动格式化，保证

1. Eslint

复制代码

再也不会报错

Prettier

一种规范化的写法规则，包含各种类型文件，其中部分

1. Javascript

复制代码

等规则，会和

1. Eslint

复制代码

不一样，使用时只要在

1. VSCode

复制代码

中安装

1. Prettier

复制代码

插件即可

安装后在

1. setting.json

复制代码

中配置如下并重启编辑器：

1. {
   
2.         "editor.formatOnSave": true,
   
3.         "editor.defaultFormatter": "esbenp.prettier-vscode",
   
4. }

复制代码

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

1. Prettier

复制代码

冲突

如果两者都启用，则因为规则冲突，在

1. JS

复制代码

等文件中，会出现保存时，先运行了

1. ESLint

复制代码

，然后再运行了

1. Prettier

复制代码

，导致

1. @eslint

复制代码

检测依然报错

解决

既然使用

1. eslint

复制代码

规范，我的理解上当然是不能去修改

1. eslint

复制代码

，因为这是共用规范，修改了就没有再使用的必要了，所以我是不推荐修改

1. eslint

复制代码

的方式。
我的做法也很简单，在

1. eslint

复制代码

作用的文件类型中，继续使用

1. eslint

复制代码

进行格式化，在其他类型文件中，使用

1. prettier

复制代码

进行格式化

1. eslint

复制代码

继续使用

1. codeActionsOnSave

复制代码

进行设置，把

1. eslint

复制代码

作用范围的文件类型的

1. formatOnSave

复制代码

关闭

1. {
   
2.   "editor.tabSize": 2,
   
3.         // 开启eslint
   
4.   "editor.codeActionsOnSave": {
   
5.     "source.fixAll.eslint": true
   
6.         },
   
7.   // 开启自动格式化
   
8.   "editor.formatOnSave": true,
   
9.   // 设置所有文件默认格式化工具为prettier
   
10.   "editor.defaultFormatter": "esbenp.prettier-vscode",
    
11.   // eslint范围内的文件类型，关闭保存时格式化
    
12.   "[javascript]": {
    
13.     "editor.formatOnSave": false
    
14.   },
    
15.   "[typescript]": {
    
16.     "editor.formatOnSave": false
    
17.   },
    
18.   "[vue]": {
    
19.     "editor.formatOnSave": false
    
20.   },
    
21.   "[javascriptreact]": {
    
22.     "editor.formatOnSave": false
    
23.   }
    
24. }

复制代码

到此这篇关于VSCode如何保证 Eslint 和 Prettier 不冲突的文章就介绍到这了,更多相关VSCode内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/article/276284.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！