VSCode中ESLint 与 Prettier 冲突问题

·  阅读 6262

ESLint 与 Prettier

在描述两者冲突前,我们先了解一下两者各自的作用,为啥非要两个一起用。

  • ESLint

ESLint 解决的是代码质量问题。比如末尾是否空行,箭头函数是否需要括号,定义变量是否定义未使用,变量是否使用在定义之前等等。

  • Prettier

Prettier 解决是代码“美丽”问题。比如末尾是否空行,箭头函数是否需要括号。但是他没有变量是否定义未使用,,变量是否使用在定义之前等检查代码质量的功能,它仅有的是代码格式化的美观功能。

看到这里你就应该清楚,其实我们可以选择不要prettier,但是eslint是必须的,因为代码质量远比代码美观来的重要的多。

冲突

从上面的各自作用及功能,可以发现他们同时具备代码“美观”功能,这也是导致出现冲突的原因。

现象

在VSCode中配置了保存自动格式化后,eslint中将代码进行格式化后,会重新被prettier再次格式化。因此最终的格式化效果是Prettier提供的,然而我们代码校验使用的是ESLint,因此往往会出现冲突,最常见的冲突就是:eslint fix后变成单引号,保存(prettier)自动格式化后变成双引号,导致代码校验异常。

通过前面分析我们知道,解决方法各种各样,不过本质上都是一样的,就是将格式化的代码与eslint要求的保持一致。

比如前面说到的单引号和双引号问题有几种解决方法:

  • .prettierrc.json
  "singleQuote": true,
复制代码
  • .editorconfig
[*.{js,jsx}]
quote_type = single 
复制代码
  • .setting.config
  "prettier.singleQuote": true,
  "prettier.jsxSingleQuote": true
复制代码

如前面所说,不管哪种方式都是让格式化插件(prettier,editorconfig)格式化后的代码效果与eslint保持一致。

解决

先手动prettier格式化,在自动ESLint Fix

为什么不能保存自动格式化呢?因为保存自动格式化的操作是所有格式化操作执行完成之后在执行,因此如果配置了"editor.formatOnSave": true,eslint Fix之后的代码会重新替换回去。

这种实现方式思路是:先手动执行一下格式化(快捷键:alt + shift + F),在自动通过eslint fix 解决不符合eslint问题的代码。

虽然这种方式需要手动格式化,但是对我来说无疑是最简单最快捷的解决方式,而且不需要太多的配置。

.vscode/setting中增加下面配置即可。

"eslint.codeActionsOnSave": true, // 每次保存的时候将代码按eslint格式进行修复
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
复制代码

将prettier配置成与eslint格式一样

这种方式存在一些问题,因为prettier和eslint的参数并非完全一致,比如:'space-before-function-paren':0,配置,在eslint中有,prettier中没有。这样就不得不折中处理,让eslint忽略这种报错。

但是这种方式有个好处就是可以保存自动格式化("editor.formatOnSave":true)。使用方式配置如下:

  • .vscode/setting.json
{
  "prettier.eslintIntegration": true, // prettier 集成eslint
  "editor.formatOnSave": true // 保存自动格式化
}
复制代码
  • .prettierrc.json

注意:需要与你项目的eslint保持一致。

{
  "trailingComma": "all",
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true,
  "bracketSpacing": false,
  "arrowParens":"always"
}
复制代码
  • .eslintrc.js

这个步骤是可选的,主要是针对eslint中存在的配置,但是prettier中不存在,必须让eslint适应prettier(即:prettier后如果有报错,又没有参数,只能忽略报错。)

rules: {
    'space-before-function-paren': 0, // 忽略报错
  },
复制代码

吐槽:感觉先好多文章都是抄来抄去,关键不分析原因。搜了几篇文章都没说原因,就扔个解决方案,草率的很。

分类:
开发工具
标签:
分类:
开发工具
标签:
收藏成功!
已添加到「」, 点击更改