解决 ESLint 和 Prettier 冲突问题

一、首先明确两者的联系及区别

1、联系：

        两者都是用来帮助开发者规范代码风格的工具。

2、区别：

        ESLint：只能作用于js代码及文件，html、css、json、vue代码及文件的相关格式处理不了；

        Prettier：全部代码都可以自定义格式化。

二、冲突原因及机制

1、原因        

        由两者的区别可以看到，ESLint和Prettier都可以作用于js代码及文件，由于两个插件默认配置存在差异，所以在公共域必然也就存在冲突了。

        例：1、ESLint默认语句结尾不加分号，Prettier默认语句结尾加分号；

                2、ESLint默认强制使用单引号，Prettier默认使用双引号；

                3、ESLint默认句末减少不必要的逗号，Prettier默认尽可能多使用逗号；

                4、。。。。。。

2、机制

        保存之后，先执行了ESLint的配置，然后再执行Prettier的配置。不管前面的ESLint怎样设置的规则，只要和Prettier的设置冲突了，就直接会被Prettier覆盖，所以最后呈现的代码效果都是Prettier格式化的结果。

三、配置规则

        我们只需要将Prettier的格式化规则配置成和ESLint一样的就好了。

        （1）首先在 “C:\Users\自己的用户文件夹” 目录下创建 .prettierrc 文件，如下图

        （2）右击 .prettierrc 文件，用VScode打开，在里面添加以下规则（根据需求可添加其他）。

 {
   "semi": false, //句末禁止使用分号
   "singleQuote": true, //使用单引号
   "printWidth": 300,//单行长度
   "trailingComma": "none",//禁止使用尾逗号
   "arrowParens":"avoid"//函数体一个参数的时候禁止使用括号
  }

        （3）打开VScode--设置--打开设置json（VScode页面右上角），里面添加以下配置。

        【注】：.prettierrc 文件路径一定要写对！！！

  // ESLint 插件的配置
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "eslint.alwaysShowStatus": true,

  //导入.prettierrc文件 （路径根据自己的实际路径填写）
  "prettier.configPath": "C:\\Users\\111\\.prettierrc",

  // 设置 .vue 文件中，HTML代码的格式化插件
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.ignoreProjectWarning": true,
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": false
    },
    "prettier": {
      "printWidth": 300,
      "semi": false,
      "singleQuote": true,
      "arrowParens": "avoid",
      "trailingComma": "none"
    }
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }

 四、搞定啦！

        祝大家的代码都可以写得像诗一样，嘻嘻嘻，加油！