VSCode中ESLint、Prettier 配置冲突问题原因及解决方案

开发前端项目时接手了别人的项目，然后保存的时候遇到了如下的鬼畜缩进 问题。当时摸不到头脑，只是通过关闭VSCode的editor.formatOnSave 配置来临时解决了这个问题。当时对ESLint和 Prettier 还不太了解，只是随大流的用了，前段时间对这两个内容进行了学习，通过尝试发现了这个问题出现的原因，并给出解决方案。

“鬼畜缩进”发生背景：

VSCode 使用了 ESLint 插件和 Prettier 插件。编辑器的setting.json 相关配置如下：

{
  "editor.formatOnSave": true, // 保存时自动格式化
    "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode", // 格式化时使用 prettier
  },
  "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true // 保存时使用eslint校验文件
    }
}

项目里安装了eslint、prettier、eslint-config-prettier、eslint-plugin-prettier

.prettierrc

{
    "singleQuote": true,
    "semi": true,
}

.eslintrc

module.exports = {
    extends: ["eslint:recommended", "plugin:prettier/recommended"],
	...其它配置
};

问题产生原因

经试验发现，“鬼畜缩进”是由于配置冲突导致的。

根据上面在setting.json 和项目中的配置，保存时，

1. 编辑器使用Prettier插件根据.prettierrc文件中的配置来美化代码，
2. 同时，ESLint插件也根据.eslintrc文件中的配置对代码进行美化和校验，而这里由于使用了eslint-plugin-prettier，该eslint插件用prettier替代了eslint本身对于代码美化部分的功能，而其中的配置是官方默认配置，并且不从.prettierrc文件中读取配置
3. 因此当.prettierrc的配置和官方默认配置不一致的时候，就会出现上面那种问题。编辑器不知道听谁的啦

解决方案：

1. 如果可以接受prettier的默认设置的话，可以不使用Prettier插件。

   编辑器配置

   {
     "editor.formatOnSave": false
     "editor.codeActionsOnSave": {
           "source.fixAll.eslint": true // 保存时使用eslint校验文件
       }
   }
   

   或者

     "editor.formatOnSave": true,
     "[javascript]": {
       "editor.defaultFormatter": "dbaeumer.vscode-eslint"
     },
     "eslint.format.enable": true
   

   项目下

   .eslintrc

   module.exports = {
       extends: ["eslint:recommended", "plugin:prettier/recommended"],
   	...其它配置
   };
   

   此配置，使用了编辑器的ESLint插件，当自动保存时，通过在eslint项目中配置的prettier插件对代码格式进行美化。

   在这种情况下，想要修改prettier的默认配置，在.eslintrc.js中覆盖prettier插件的设置。需要配置rules 。

   module.exports = {
   	extends: ["eslint:recommended", "plugin:prettier/recommended"],
       rules: {
           'prettier/prettier': ['error', { singleQuote: true, parser: 'flow' }],
       },
   	...其它配置
   };
   

2. 使用编辑器的Prettier插件来美化代码，ESLint插件来检查代码质量。

   编辑器配置

   {
     "editor.formatOnSave": true,
     "editor.codeActionsOnSave": {
       "source.fixAll.eslint": true
     },
     "[javascript]": {
       "editor.defaultFormatter": "esbenp.prettier-vscode",
     },
   }
   

   .prettierrc （根据自己喜欢的配置来）

   {
       "singleQuote": true,
       "semi": true,
   }
   

   .eslintrc

   module.exports = {
       extends: ["eslint:recommended", "prettier"], // 这里没有使用 eslint-plugin-perttier,只使用了eslint-config-prettier
   	...其它配置
   };