VSCode如何保证 Eslint 和 Prettier 不冲突

前言

本次环境皆为 @vue/cli默认安装带有的 [email protected]VSCode 插件版本:

  • Eslint v2.4.0
  • Prettier v9.10.4

为什么会冲突

首先我们需要知道为什么使用EslintPrettier,下面先介绍两者的单独用法

Eslint

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

VSCode如何保证 Eslint 和 Prettier 不冲突_第1张图片
安装后在 setting.json 中配置如下并重启编辑器:

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

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

Prettier

一种规范化的写法规则,包含各种类型文件,其中部分Javascript 等规则,会和 Eslint不一样,使用时只要在VSCode 中安装Prettier插件即可
VSCode如何保证 Eslint 和 Prettier 不冲突_第2张图片
安装后在 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
  }
}

你可能感兴趣的:(vue,vscode,vue,eslint,prettier)