手把手一步步教你webstorm eslint最新配置(vue3+vite+sass)

1,638 阅读2分钟

webstorm版本必须大于等于2022.2.2,否则会出现该bug

github.com/eslint/esli…

解决方法为安装8.22.0的eslint

首先在项目中安装eslint

npm i eslint -D

然后运行

npx eslint --init

初始化eslint配置

选择第三项

image.png

如果是前端项目选择第一个,nodejs后端项目选择第二个

image.png

选择vue(如果配置react就选react)

image.png

选择是否使用typescript

image.png

选择项目代码是运行于浏览器还是node环境

image.png

选择一个eslint默认规则或者自己配置

image.png

选择standard标准规则配置

image.png

选择你希望生成的配置文件类型(cjs,yaml,json)JavaScript或者json都可以

image.png

选择yes下载eslint相关插件

image.png

选择下载方式npm还是yarn还是pnpm

image.png

现在你的项目里已经出现了eslint的配置文件

image.png

打开设置

image.png

选择手动eslint配置,其余可以默认,保存时自动修复可选

image.png 此时eslint已经配置完成,但是仍需要添加一些规则,默认规则比较大众,一般只能满足最基本检测,下面是我自己在用的一套规则,可以试下,也可以自己去eslint和vue/eslint官网自己配置相关规则。配置过程若出现问题可以在评论区留言,我尝试解决

rules: {
  'no-console': 'warn',
  'no-tabs': 'off',
  'array-bracket-spacing': ["error", "never"],
  'brace-style': "error",
  'camelcase': "error",
  'comma-dangle': ["error", "always-multiline"],
  'comma-spacing': ["error", { "before": false, "after": true }],
  'comma-style': ["error", "last"],
  // "function-paren-newline": ["error", "multiline"]
  "indent": ["error", "tab"],
  "key-spacing": ["error", {"beforeColon": false, "afterColon": true}],
  "no-multiple-empty-lines": "error",
  "no-trailing-spaces": "error",
  "no-unneeded-ternary": "error",
  "no-whitespace-before-property": "error",
  "no-unused-vars": "warn",
  "no-use-before-define": "error",
  "object-property-newline": "error",
  "object-curly-newline": ["error", {
    "ObjectExpression": "always",
    "ObjectPattern": { "multiline": true },
    "ImportDeclaration": "never",
    "ExportDeclaration": "never",
  }],
  "object-curly-spacing": ["error", "always"],
  "operator-linebreak": ["error", "before"],
  "quotes": ["error", "single", { "avoidEscape": true }],
  "semi": ["error", "never"],
  "space-before-blocks": "error",
  "space-infix-ops": "error",
  "arrow-spacing": "error",
  "eqeqeq": "error",
  "vue/require-component-is": "error",
  'vue/max-attributes-per-line': ['error', {
    singleline: 1
  }],
  'vue/script-setup-uses-vars': 'error',
  'array-bracket-newline': ['error', { "minItems": 5}],
  'vue/block-tag-newline': ['error', {
    "singleline": "always",
    "multiline": "always",
    "maxEmptyLines": 0,
    "blocks": {
      "script": {
        "singleline": "always",
        "multiline": "always",
        "maxEmptyLines": 0,
      },
      "template": {
        "singleline": "always",
        "multiline": "always",
        "maxEmptyLines": 0,
      },
      "my-block": {
        "singleline": "always",
        "multiline": "always",
        "maxEmptyLines": 0,
      }
    }
  }],
  'vue/html-closing-bracket-newline': 'error',
  'vue/html-closing-bracket-spacing': 'error',
  'vue/html-end-tags': 'error',
  'vue/html-indent': 'error',
  "vue/html-quotes": "error",
  "vue/html-self-closing": "error",
  "vue/no-multi-spaces": "error",
  "vue/no-spaces-around-equal-signs-in-attribute": "error",
  "vue/mustache-interpolation-spacing": "error",
  "vue/multiline-html-element-content-newline": ["error", {
    "ignores": [],
  }],
  "vue/first-attribute-linebreak": ["error", {
    "singleline": "ignore",
    "multiline": "below"
  }],
  'vue/singleline-html-element-content-newline': 'warn',
  "vue/attribute-hyphenation": ["error"],
}

若项目为typescript项目,需要在eslint配置文件的parserOptions项中增加以下配置:

parserOptions: {
  ecmaVersion: 'latest',
  sourceType: 'module',
  parser: '@typescript-eslint/parser' //ts项目需要添加的解析器
},