根据prettier官方文档Integrating with Linters · Prettier
使用eslint-config-prettier
prettier/eslint-config-prettier: Turns off all rules that are unnecessary or might conflict with Prettier. (github.com)
在.eslintrc.json配置：

  1. "extends": [
  2.     "prettier"
  3. ]

这样eslint与prettier冲突的规则会被关闭（官网： “extends”: [“prettier”] enables the config from eslint-config-prettier, which turns off some ESLint rules that conflict with Prettier. ）

总结
1、安装

  1. yarn add eslint-config-prettier  -D
  2. yarn add  vue-eslint-parser -D
  3. yarn add  prettier -D
  4. # 大概要安装以下：
  5. yarn add @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-prettier eslint-config-prettier eslint eslint-plugin-vue -D

2、配置.eslintrc.json

  1. "extends": [
  2.     "prettier"
  3. ],

完整配置参考：

  1. {
  2.   "root": true,
  3.   "env": {
  4.     "es2021": true,
  5.     "node": true,
  6.     "browser": true
  7.   },
  8.   "globals": {
  9.     "node": true
  10.   },
  11.   "extends": [
  12.     //    "plugin:vue/essential",
  13.     /** @see https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin#recommended-configs */
  14.     //    "plugin:@typescript-eslint/recommended",
  15.     "eslint:recommended",
  16.     "plugin:vue/vue3-recommended",
  17.     //避免与 prettier 冲突
  18.     "plugin:prettier/recommended"
  19.   ],
  20.   "parser": "vue-eslint-parser",
  21.   "parserOptions": {
  22.     "parser": "@typescript-eslint/parser",
  23.     "vueFeatures": {
  24.       //      "filter": true,
  25.       "interpolationAsNonHTML": false,
  26.       "styleCSSVariableInjection": true
  27.     }
  28.   },
  29.   "plugins": ["@typescript-eslint"],
  30.   "ignorePatterns": ["types/env.d.ts", "node_modules/**", "**/dist/**"],
  31.   "rules": {
  32.     "@typescript-eslint/no-unused-vars": "error",
  33.     "@typescript-eslint/no-var-requires": "off",
  34.     "@typescript-eslint/consistent-type-imports": "error",
  35.     "@typescript-eslint/explicit-module-boundary-types": "off",
  36.     //    "space-before-blocks": "warn",
  37.     //    "space-before-function-paren": "error",
  38.     //    "space-in-parens": "warn",
  39.     //    "no-whitespace-before-property": "off",
  40.     /**
  41.     * Having a semicolon helps the optimizer interpret your code correctly.
  42.     * This avoids rare errors in optimized code.
  43.     * @see https://twitter.com/alex_kozack/status/1364210394328408066
  44.     */
  45.     "semi": ["error", "always"],
  46.     /**
  47.     * This will make the history of changes in the hit a little cleaner
  48.     */
  49.     "comma-dangle": ["warn", "always-multiline"]
  50.   }
  51. }

.editorconfig

  1. root = true
  3. [*]
  4. charset = utf-8
  5. end_of_line = lf
  6. indent_size = 2
  7. indent_style = space
  8. insert_final_newline = true
  9. ij_html_quote_style = double
  10. max_line_length = 120
  11. tab_width = 2
  12. trim_trailing_whitespace = true
  14. [*.sass]
  15. indent_size = 2
  17. [*.scss]
  18. indent_size = 2
  20. [*.vue]
  21. indent_size = 2
  22. tab_width = 2
  24. [{*.ats,*.ts}]
  25. indent_size = 2
  26. tab_width = 2
  28. [{*.cjs,*.js}]
  29. indent_size = 2
  30. tab_width = 2
  32. [{*.har,*.jsb2,*.jsb3,*.json,.babelrc,.eslintrc,.prettierrc,.stylelintrc,bowerrc,jest.config}]
  33. indent_size = 2
  35. [{*.htm,*.html,*.ng,*.sht,*.shtm,*.shtml}]
  36. indent_size = 2
  37. tab_width = 2

prettier

  1. {
  2.   "printWidth": 100,
  3.   "tabWidth": 2,
  4.   "useTabs": false,
  5.   "semi": true,
  6.   "vueIndentScriptAndStyle": true,
  7.   "singleQuote": true,
  8.   "quoteProps": "as-needed",
  9.   "bracketSpacing": true,
  10.   "trailingComma": "es5",
  11.   "jsxBracketSameLine": true,
  12.   "jsxSingleQuote": false,
  13.   "arrowParens": "always",
  14.   "insertPragma": false,
  15.   "requirePragma": false,
  16.   "proseWrap": "never",
  17.   "htmlWhitespaceSensitivity": "ignore",
  18.   "endOfLine": "lf",
  19.   "rangeStart": 0
  20. }