关于vscode的几个插件Vetur，Prettier，eslint，冲突了怎么办

本文知乎地址-知不道者

vscode版本：1.51.1

废话不多说，先说一下这几个插件是什么

Vetur（0.30.3）：简单来讲就是识别vue文件的插件 ，提供一下高亮 ，代码格式化

Prettier（5.8.0）：强大的代码格式工具支持很多语言

eslint（2.1.13）：代码检查工具，看你代码是不是符合规范

咱们大多数项目都是拿eslint去约束的，但是如果项目中没有含有eslint相关约束，那么想要代码也有一定的规范就需要装插件了；但是有这样一个问题：在某些规范三个的标准不一样，这时候应该听谁的，你的vscode是不是有过保存之后代码抽搐的情况呢

所以想要解决这个问题就需要这三个统一一下，以eslint为主，Prettier为辅，平时用不到eslint的时候就是Prettier的主场，Vetur和他们的冲突很小，如果遇到再去单独去处理就好了

那么现在就是主要处理eslint和Prettier，除了大家网上都能搜到的配置外，最重要的是在项目的package.json中设置prettier

{
  "prettier": {
    "trailingComma": "none",
    "eslintIntegration": true, // 随着版本升级，现在需要在项目中开启
    "singleQuote": true,
    "arrowParens": "always"
  }
}
复制代码

另外我附上我的vscode配置和我用的一些插件

{
  "workbench.sideBar.location": "right",
  "workbench.colorTheme": "One Dark Pro",
  "editor.detectIndentation": false,
  "editor.tabSize": 2,
  "editor.lineHeight": 24,
  "editor.fontSize": 18,
  "editor.renderWhitespace": "all",
  "editor.formatOnSave": true,
  "editor.snippetSuggestions": "top",
  "editor.wordWrap": "on",
  "files.eol": "\n",
  "merge-conflict.autoNavigateNextConflict.enabled": true,
  "typescript.updateImportsOnFileMove.enabled": "always",
  "vetur.format.defaultFormatter.html": "prettyhtml",
  "vetur.format.defaultFormatter.js": "prettier-eslint",
  "vetur.format.defaultFormatter.ts": "vscode-typescript",
  "vetur.format.options.tabSize": 2,
  "vetur.format.defaultFormatterOptions": {
    "prettyhtml": {
      "printWidth": 100
    }
  },
  "eslint.lintTask.enable": true,
  "eslint.format.enable": true,
  "eslint.alwaysShowStatus": true,
  "eslint.validate": ["javascript", "javascriptreact", "vue", "typescript"],
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.codeActionsOnSave": {
    "source.fixAll": true
    // "source.fixAll.eslint": true
    // "source.fixAll.tslint": false,
  },
  "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
  "git.enableSmartCommit": true,
  "git.showPushSuccessNotification": true,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "editor.suggestSelection": "first",
  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
  "task.slowProviderWarning": ["typescript"],
  "prettier.trailingComma": "none",
  "prettier.printWidth": 100,
  "prettier.vueIndentScriptAndStyle": true,
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "emmet.triggerExpansionOnTab": true,
  "editor.renameOnType": true,
  "html.format.indentHandlebars": true,
  "[typescriptreact]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "files.associations": {
    "*.ejs": "html"
  },
  "search.followSymlinks": false
}

复制代码

大家还有什么好用的插件么，请留言

本文知乎地址-知不道者