前言

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

那么使用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 @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": false
  },
  "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": {
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "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",
    "vue/singleline-html-element-content-newline": "off", // 单行html元素内容在新的一行
    "vue/multiline-html-element-content-newline": "off", // 多行html元素内容在新的一行

    //    "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"],
    /**
     * Just for beauty
     */
    "quotes": ["warn", "single"]
  }
}

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

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问题

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