前期项目中忽略了 eslint 检查,导致一运行 npm run lint
出现两千多条错误(இдஇ; ) 造孽啊
花了两三天搞完,做个错误汇总。
环境和配置
项目用 vue@3.2 + vite + ant-design@6.0
关于eslint 配置的用法可参考:ESLint中文
eslint 有专门应用于 vue 的插件:eslint-plugin-vue
大致贴一下版本依赖
1 | devDependencies: { |
eslint 的配置采用 JS 文件格式,经过几次修改已经忘了一开始的内容,只贴基础配置如下:
1 | // .eslintrc.js |
ERROR: Parsing error: Unexpected token .
错误代码:
1 | const isOpen = data?.form?.isOpen || false; |
原来是无法识别可选链操作符(?.
),但是扩展运算符没问题,看了eslint 的配置,发现是 ECMAScript 的版本设置了2018(ES9),而可选链操作符是 ES2020(如果没记错),修改配置就可以了
1 | // .eslintrc.js |
ERROR: Unable to resolve path to module
错误代码:
1 | import Upload from '@/components/upload/index.vue' |
路径引用错误??看起来没毛病,vite.config.js
中明明配置了短链
1 | resolve: { |
但 eslint 并不会自动读取 vite 的配置,因此 eslint 也要加上对应配置:
1 | // .eslintrc.js |
另外引入 vue 文件需要加上后缀.vue
,否则也会报相同错误。
ERROR: ‘ref’ is not defined
错误代码:
1 | setup(){ |
运行都没报错,怎么突然 undefined 了??
等等,因为偷懒,vue 的语法糖都是unplugin-auto-import
每个文件自动引入的:
1 | // vite.config.js |
所以也要让 eslint 知道,先生成一个包含所有变量的文件:
1 | // vite.config.js |
上面的enabled
在生成文件后建议关闭,否则每次更新都会重新生成。
扩展到 eslint:
1 | // .eslintrc.js |
ERROR: vue/no-mutating-props
错误代码:
1 | <!-- parent.vue --> |
这是个低级错误,vue3支持多个参数双向绑定,但是子组件不能直接修改props
,需要转换一下:
方法一:用
computed
代替1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28<template>
<a-modal v-model:visible="isOpen"></a-modal>
</template>
<script>
export default{
props: {
open: {
type: Boolean,
default: true,
}
},
setup(props, { emit }){
const isOpen = computed({
get: () => {
return props.open;
},
set: (value) => {
emit('update:open', value);
},
});
return {
isOpen,
}
},
}
</script>方法二:用
watch
监听1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26<template>
<a-modal v-model:visible="isOpen"></a-modal>
</template>
<script>
export default{
props: {
open: {
type: Boolean,
default: true,
}
},
setup(props, { emit }){
const isOpen = ref(props.open);
watch(
() => isOpen.value,
(value) => emit('update:open', value)
);
return {
isOpen,
}
},
}
</script>
ERROR: no-console
错误代码:
1 | console.log(data); |
eslint 的规则设定了不能有console
,当然可以改配置:
1 | // .eslintrc.js |
提这个错误是为了引入下面的问题,在某些地方需要打印但不希望 eslint 报错,可以让其忽略检查:
1 | // 忽略整个文件在第一行加 |
那么在<template>
中呢?
1 | <template> |
然后发现不行,会报
vue/require-v-for-key
错误,注释失败。找了各种文章最后发现是自己的锅Ծ‸Ծ,找不出问题的时候还是要看官方文档,在eslint-plugin-vue已有说明
vue/comment-directive
规则就是用于忽略代码检查,一看 eslint 的文件配置果然是关闭了:1 | // .eslintrc.js |
改为
error
,完美؏؏☝ᖗ乛◡乛ᖘ☝؏؏
收工。
扫描二维码,分享此文章