webstorm版本必须大于等于2022.2.2,否则会出现该bug
解决方法为安装8.22.0的eslint
首先在项目中安装eslint
npm i eslint -D
然后运行
npx eslint --init
初始化eslint配置
选择第三项
如果是前端项目选择第一个,nodejs后端项目选择第二个
选择vue(如果配置react就选react)
选择是否使用typescript
选择项目代码是运行于浏览器还是node环境
选择一个eslint默认规则或者自己配置
选择standard标准规则配置
选择你希望生成的配置文件类型(cjs,yaml,json)JavaScript或者json都可以
选择yes下载eslint相关插件
选择下载方式npm还是yarn还是pnpm
现在你的项目里已经出现了eslint的配置文件
打开设置
选择手动eslint配置,其余可以默认,保存时自动修复可选
此时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项目需要添加的解析器
},