前言
本次环境皆为 @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内容请搜索阿兔在线工具以前的文章或继续浏览下面的相关文章希望大家以后多多支持阿兔在线工具!