Webstorm+vue+eslint+prettier融合问题

前言

跟着此文章步骤一点点走下去不一定完全就没问题了，因为都是一点点调出来的的，根本不知道哪些地方改了就没问题，哪些地方改了就有问题了。

那么使用WebStorm存在的问题是：

在webstorm中，调用快捷键格式化，和保存后自动格式化代码的规则不一致，需要调试。

这是一个很简单的问题，也是一个很难受的问题。

根据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配置：

"extends": [
    "prettier"
]

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

总结

反正经过一段时间调试，终于在webstorm中实现快捷键和保存格式，代码风格也一致的效果了：

1、安装

yarn add eslint-config-prettier  -D
yarn add  vue-eslint-parser -D
yarn add  prettier -D
# 大概要安装以下：
yarn add @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-prettier eslint-config-prettier eslint eslint-plugin-vue -D

2、配置.eslintrc.json

"extends": [
    "prettier"
],

完整配置参考：

{
  "root": true,
  "env": {
    "es2021": true,
    "node": true,
    "browser": true
  },
  "globals": {
    "node": true
  },
  "extends": [
    //    "plugin:vue/essential",
    /** @see https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin#recommended-configs */
    //    "plugin:@typescript-eslint/recommended",
    "eslint:recommended",
    "plugin:vue/vue3-recommended",
    //避免与 prettier 冲突
    "plugin:prettier/recommended"
  ],
  "parser": "vue-eslint-parser",
  "parserOptions": {
    "parser": "@typescript-eslint/parser",
    "vueFeatures": {
      //      "filter": true,
      "interpolationAsNonHTML": false,
      "styleCSSVariableInjection": true
    }
  },
  "plugins": ["@typescript-eslint"],
  "ignorePatterns": ["types/env.d.ts", "node_modules/**", "**/dist/**"],
  "rules": {
    "@typescript-eslint/no-unused-vars": "error",
    "@typescript-eslint/no-var-requires": "off",
    "@typescript-eslint/consistent-type-imports": "error",
    "@typescript-eslint/explicit-module-boundary-types": "off",
    //    "space-before-blocks": "warn",
    //    "space-before-function-paren": "error",
    //    "space-in-parens": "warn",
    //    "no-whitespace-before-property": "off",
    /**
     * Having a semicolon helps the optimizer interpret your code correctly.
     * This avoids rare errors in optimized code.
     * @see https://twitter.com/alex_kozack/status/1364210394328408066
     */
    "semi": ["error", "always"],
    /**
     * This will make the history of changes in the hit a little cleaner
     */
    "comma-dangle": ["warn", "always-multiline"]
  }
}

注意：我的webstorm版本是2021.1，如果你是低于这个版本的，特别是2020.1之前的，因为2020.1之前，webstorm需要手动安装prettier插件

.editorconfig

root = true

[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
ij_html_quote_style = double
max_line_length = 120
tab_width = 2
trim_trailing_whitespace = true

[*.sass]
indent_size = 2

[*.scss]
indent_size = 2

[*.vue]
indent_size = 2
tab_width = 2

[{*.ats,*.ts}]
indent_size = 2
tab_width = 2

[{*.cjs,*.js}]
indent_size = 2
tab_width = 2

[{*.har,*.jsb2,*.jsb3,*.json,.babelrc,.eslintrc,.prettierrc,.stylelintrc,bowerrc,jest.config}]
indent_size = 2

[{*.htm,*.html,*.ng,*.sht,*.shtm,*.shtml}]
indent_size = 2
tab_width = 2

prettier

{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "vueIndentScriptAndStyle": true,
  "singleQuote": true,
  "quoteProps": "as-needed",
  "bracketSpacing": true,
  "trailingComma": "es5",
  "jsxBracketSameLine": true,
  "jsxSingleQuote": false,
  "arrowParens": "always",
  "insertPragma": false,
  "requirePragma": false,
  "proseWrap": "never",
  "htmlWhitespaceSensitivity": "ignore",
  "endOfLine": "lf",
  "rangeStart": 0
}

html引号问题

在.vue模板中，script我喜欢用单引号，但是在template中喜欢双引号，但是每次使用快捷键格式化时，都会把template变成单引号，如果上面的配置没解决问题

那么修改.idea/codeStyles/codeStyleConfig.xml文件，

<HTMLCodeStyleSettings>
  <option name="HTML_SPACE_INSIDE_EMPTY_TAG" value="true" />
  <option name="HTML_QUOTE_STYLE" value="Single" />
  <option name="HTML_ENFORCE_QUOTES" value="true" />
</HTMLCodeStyleSettings>

如果其中有Single，那么去掉这行

webstorm设置问题

这个问题也很关键：

1、eslint

2、快捷键问题

3、apply问题

有时候设置半天，会发现没【应用】设置