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

代码语言：javascript复制

"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、安装

代码语言：javascript复制

yarn add eslint-config-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

代码语言：javascript复制

"extends": [
    "prettier"
],

---

完整配置参考：

代码语言：javascript复制

{
  "root": true,
  "env": {
    "es2021": true,
    "node": true,
    "browser": false
  },
  "extends": [
    "eslint:recommended",
    /** @see https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin#recommended-configs */
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "parser": "@typescript-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",
    //    "space-before-blocks": "warn",
    //    "space-before-function-paren": "warn",
    //    "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"
    ],
    "space-infix-ops": "warn",
    "space-unary-ops": "warn"
  }
}

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

html引号问题

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

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

代码语言：javascript复制

<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，那么去掉这行

eslint ide javascript

0 人点赞