VSCode中ESLint和Prettier的冲突解决

相关插件

1. ESLint

   
   
   ESLint插件

2. Prettier

   
   
   截屏2021-01-27 下午3.22.21.png

解决方式一

安装相关依赖

yarn add prettier -D --exact
yarn add eslint-plugin-prettier -D
yarn add eslint-config-prettier -D

修改eslintrc.js

module.exports = {
  extends: [
    // ... 其余配置
    // 增加下面两行
    'plugin:prettier/recommended',
    'prettier/vue'
  ],
  rules: {
    // ...其余配置
    "prettier/prettier": "error",
  }
}

修改settings.json

{
  // editor
  "editor.formatOnSave": true, // 保存立即更改
  "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true // For eslint
  },

  // eslint
  "eslint.options": {
    "configFile": ".eslintrc.js" // eslint的配置文件
  },
  "eslint.validate": [
    "html", "vue", "javascript", "javascriptreact"
  ],


  "[javascript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"   // prettier
  },
  "[vue]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"   // prettier
  },
}

这样就基本解决了eslint和prettier的冲突的问题，但是代码还是被格式化了两次，一次是在codeActionsOnSave使用eslint进行格式化，一次是在formatOnSave的时候prettier进行格式化

解决方式二

{
  // 1. 关闭codeActionsOnSave的格式代码
  //   "editor.codeActionsOnSave": {
  //       "source.fixAll.eslint": true // For eslint
  //   },

  // 2. 更改为如下方式格式代码
  "eslint.format.enable": true, // 使用Eslint作为文件的一种格式规范
  "[javascript]": {
      "editor.defaultFormatter": "dbaeumer.vscode-eslint" // 格式规范由prettier改为eslint
  },
  "[vue]": {
      "editor.defaultFormatter": "dbaeumer.vscode-eslint" // 格式规范由prettier改为eslint
  },
}

这样只会在formatOnSave的时候进行代码格式化，而且用的eslint的规范。