eslint和prettier自动保存冲突

Question

问题一：在js代码中，写了setup() {}函数，并且vscode编辑器已经设置了保存时自动格式化代码，但是eslint规则要求setup后边必须有个空格，但是prettier没有这个规则，所以每次保存后，都会自动去掉这个空格，然后eslint又开始报错，就形成了个死循环了，难道只能禁用掉eslint校验么？问题二：就算我不安装prettier，vscode安装了eslint插件，然后再vscode的首选项配置中，修改defaultFormat为eslint，然后勾选保存时自动格式化代码，同样能够根据.eslintrc中的规则，来格式化代码，那这样的话，安装prettier的意义在哪里呢?

Answer 1

Sunday 2021-12-17 18:46:57

你好

首先我们需要先明确，eslint 的作用在于维护代码格式规范，但是这个规范针对于不同团队是不一样的，每个团队都有对规范不同的定义，也就是说这个规范是 《人为主观定义的》，而非 《所有开发者都完全统一的》。

基于这样的一个基本思路，所以每个团队都有对代码规范的不同“调性”，也就是不同的习惯。

那么明确好了上面的基础概念之后，我们再来看这两个问题。

首先问题一：只能禁用掉eslint校验么？  肯定不是的。就像之前有同学提到过这个问题，并给出了其他的方案：https://coding.imooc.com/learn/questiondetail/Dg8m5PZLVlxXWa4B.html  。这种不同的方案，就可以理解为不同的“调性”

然后是问题二：可以不安装 perttier 吗？当然可以！你可以使用任何的格式化工具，都没有问题。之所以安装 prettier 还是因为所谓的 “习惯问题”。因为无论任何的一种格式化方案都只是代表了 《部分团队的习惯》，而绝非是 《所有开发者都完全统一的》。

此处同样代表了 后面《git 提交规范：https://coding.imooc.com/lesson/542.html#mid=48122  》所描述的《约定式提交规范》理念。

• 提问者 Lemon甜橙君 #1

  看了下问题一 另外一个人的回答，也尝试了一下，发现虽然能解决冲突问题，但是eslint的报错，编辑器并不会显示出来，而是在保存的时候会自动修复，感觉还是很不友好，也查了一下ESLint fix自动修复的只是js ts代码，而prettier还能修复css和html等的代码，所以对于我个人而言，还是选择使用ESLint fix进行代码修复，如果需要使用prettier的时候，再从首选项里配置一下，把默认的editor.defaultFormatter改为prettier，哎，对于想要看到报错，并且又能格式化代码的强迫症患者来说，真的太艰难了，大概只能用这种方法了

• Sunday #2

  兵无常势，水无常形。对于格式化配置方案是非常灵活可控的。

• 提问者 Lemon甜橙君 #3

  非常感谢！