ESLint+Prettier格式化代码

ESLint会做语法检查，ESLint fix的功能已经可以解决绝大部分代码格式化问题，大部分情况可以替代Prettier的美化，但是也有一些情况，比如max-len，ESLint不能自动fix，手动修改非常繁琐，所以还是要用Prettier，但是两者格式化代码，可能会产生冲突，也是让人很烦恼。通过查资料，找到一种ESLint+Prettier格式化代码和平共处的方案，现在记录一下。本文会以VSCode编辑器为示例做说明。

ESLint+Prettier格式化方式的思路是，ESLint规则中与Prettier重合的部分，会用Prettier的规则覆盖ESLint规则。

先自行配置好自己的ESLint规则，和符合自己代码规范要求的Prettier配置。

项目内安装依赖 @typescript-eslint/eslint-plugin、@typescript-eslint/parser、babel-eslint、eslint、eslint-plugin-prettier、prettier

然后VSCode安装插件，一共3个插件: Prettier、Prettier ESLint、ESLint

根目录.vscode/settings.json配置调整为

{
  "eslint.enable": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue",
    "typescript",
    "typescriptreact"
  ],
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
}

重启VSCode，自动保存后会用prettier+eslint进行格式化

依赖版本参考

"@typescript-eslint/eslint-plugin": "^4.2.0", "@typescript-eslint/parser": "^4.2.0", "babel-eslint": "^10.0.1", "eslint": "^7.10.0", "eslint-plugin-prettier": "3.4.0", "prettier": "^2.3.2",