在vue3项目中配置eslint
Posted hello,是翠花呀
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在vue3项目中配置eslint相关的知识,希望对你有一定的参考价值。
eslint 相关配置
创建好 vue3 项目后,安装npm install --save-dev eslint eslint-plugin-vue
,执行命令初始化 eslint 配置:
eslint --init
接下来看命令行执行,根据自己习惯选择相应配置选项。
执行完成后目录下会新增.eslintrc.js
文件,同时新安装了几个插件,在package.json
中可以看到。
这时候可以开始配置 eslint 具体项了。
比如我们不选用刚刚 init 时选择的规范包,那么可以修改 extends 为extends: ['plugin:vue/vue3-recommended']
,然后开始配置 rules 规则。具体需要什么规则网上都有。
因为我们用的eslint-plugin-vue
,对于 vue 文件 html 部分的校验可以在eslint-plugin-vue
文档里寻找相应配置。
比如 vue 文件每行最大属性数:
'vue/max-attributes-per-line': [
'error',
singleline:
max: 3,
allowFirstLine: true
,
multiline:
max: 1,
allowFirstLine: false
]
比如什么情况下标签自关闭:
'vue/html-self-closing': [
// 标签是否自关闭
'error',
html:
void: 'always',
normal: 'never'
// 'component': 'always' // 不需要设置则注释
,
svg: 'always',
math: 'always'
]
建议每配完一种规则就看一下是否生效,如果配置错误会影响到其他规则的生效。
稍微完整的例子:
module.exports =
parserOptions:
parser: '@typescript-eslint/parser',
ecmaVersion: 2020,
sourceType: 'module',
ecmaFeatures:
ts: true
,
extends: [
'plugin:vue/vue3-recommended'
],
plugins: ['vue', '@typescript-eslint'],
rules:
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-unused-vars': ['error', vars: 'all', args: 'after-used' ],
'operator-linebreak': ['error', 'after'],
'no-var': 'error',
'array-bracket-spacing': ['error', 'never'],
camelcase: 'error',
quotes: ['error', 'single'],
'no-multiple-empty-lines': ['error', max: 2 ],
'no-trailing-spaces': 'error',
indent: ['error', 2],
'arrow-parens': ['error', 'as-needed'],
'vue/max-attributes-per-line': [
'error',
singleline:
max: 3,
allowFirstLine: true
,
multiline:
max: 1,
allowFirstLine: false
],
'vue/html-self-closing': [
'error',
html:
void: 'always',
normal: 'never',
component: 'any'
,
svg: 'always',
math: 'always'
],
'vue/attributes-order': [
'error',
order: [
'DEFINITION',
'LIST_RENDERING',
'CONDITIONALS',
'RENDER_MODIFIERS',
'GLOBAL',
['UNIQUE', 'SLOT'],
'TWO_WAY_BINDING',
'OTHER_DIRECTIVES',
'OTHER_ATTR',
'EVENTS',
'CONTENT'
],
alphabetical: false
],
'vue/html-closing-bracket-newline': [
'error',
singleline: 'never',
multiline: 'always'
],
'vue/singleline-html-element-content-newline': [
'error',
ignoreWhenNoAttributes: true,
ignoreWhenEmpty: true,
ignores: ['pre', 'textarea', ...INLINE_ELEMENTS]
],
'vue/attribute-hyphenation': [
'error',
'always' | 'never',
ignore: []
]
配置prettierrc
vscode安装prettierrc插件。
"semi": false,
"singleQuote": true,
"trailingComma": "none",
"arrowParens": "avoid",
"eslintIntegration": true,
"htmlWhitespaceSensitivity": "ignore"
配置相对较少,不过option+shift+f
或者设置保存自动格式化的时候会比较方便。
htmlWhitespaceSensitivity
的配置可以解决格式化的时候结尾>
不对齐的情况。
以上是关于在vue3项目中配置eslint的主要内容,如果未能解决你的问题,请参考以下文章
vue cli3 创建的项目中eslint 配置 问题的解决