共计 3921 个字符，预计需要花费 10 分钟才能阅读完成。
后期我的项目中疏忽了 eslint 查看，导致一运行 npm run lint 呈现两千多条谬误 (இдஇ;) 造孽啊
花了两三天搞完，做个谬误汇总。
<!– more –>
环境和配置
我的项目用 vue@3.2 + vite + ant-design@6.0
对于 eslint 配置的用法可参考：ESLint 中文
eslint 有专门利用于 vue 的插件：eslint-plugin-vue
大抵贴一下版本依赖
devDependencies: {
"@babel/eslint-parser": "^7.18.2",
"eslint": "^8.7.0",
"eslint-config-prettier": "^8.3.0",
"eslint-import-resolver-alias": "^1.1.2",
"eslint-plugin-import": "^2.25.4",
"eslint-plugin-jest": "^25.7.0",
"eslint-plugin-vue": "^8.3.0",
}eslint 的配置采纳 JS 文件格式，通过几次批改曾经忘了一开始的内容，只贴根底配置如下：
// .eslintrc.js
module.exports = {
// 只作用于当前目录
root: true,
// 运行环境
env: {
node: true,
es6: true,
},
// 解析器
parser: '@babel/eslint-parser',
// 解析器选项
parserOptions: {sourceType: 'module',},
// 插件
plugins: ['import'],
// 扩大配置
extends: [
'plugin:vue/vue3-recommended',
'plugin:import/recommended',
'prettier',
],
// 启用规定
rules: {},
// 全局变量
globals: {h: true,},
// 为指定文件指定处理器
overrides: [
{files: ['*.vue', '*.jsx'],
parser: 'vue-eslint-parser',
parserOptions: {ecmaVersion: 2018,},
rules: {}}
],
}ERROR: Parsing error: Unexpected token .
错误代码：
const isOpen = data?.form?.isOpen || false;原来是无奈辨认可选链操作符（?.），然而扩大运算符没问题，看了 eslint 的配置，发现是 ECMAScript 的版本设置了 2018（ES9），而可选链操作符是 ES2020（如果没记错），批改配置就能够了
// .eslintrc.js
module.exports = {
parserOptions: {
// ES 版本，最新可设置 2022 or "latest"，overrides 中配置了有须要也要同步批改
ecmaVersion: 2020,
sourceType: 'module',
}
}ERROR: Unable to resolve path to module
错误代码：
import Upload from '@/components/upload/index.vue'门路援用谬误？？看起来没故障，vite.config.js中明明配置了短链
resolve: {
alias: {'@': pathResolve('src'),
}
}但 eslint 并不会主动读取 vite 的配置，因而 eslint 也要加上对应配置：
// .eslintrc.js
module.exports = {
settings: {
'import/resolver': {
alias: {map: ['@': './src']
}
}
}
}另外引入 vue 文件须要加上后缀.vue，否则也会报雷同谬误。
ERROR: ‘ref’ is not defined
错误代码：
setup(){const isOpen = ref(false);
return {isOpen,}
}运行都没报错，怎么忽然 undefined 了？？
等等，因为偷懒，vue 的语法糖都是 unplugin-auto-import 每个文件主动引入的：
// vite.config.js
import autoImport from 'unplugin-auto-import/vite';
autoImport({
imports: [
'vue',
'vue-router',
]
})所以也要让 eslint 晓得，学生成一个蕴含所有变量的文件：
// vite.config.js
autoImport({
...last,
eslintrc: {
// 已存在文件设置默认 false，须要更新时再关上，避免每次更新都从新生成
enabled: false,
// 生成文件地址和名称
filepath: './.eslintrc-auto-import.json',
globalsPropValue: true,
}
})下面的 enabled 在生成文件后倡议敞开，否则每次更新都会从新生成。
扩大到 eslint：
// .eslintrc.js
module.exports = {
extends: [
'plugin:vue/vue3-recommended',
'plugin:import/recommended',
'prettier',
'./.eslintrc-auto-import.json'
],
}ERROR: vue/no-mutating-props
错误代码：
<!-- parent.vue -->
<template>
<Child v-model:open="openModal" />
</template>
<script>
export default{setup(){const openModal = ref(false);
return {openModal,}
}
}
</script>
<!-- child.vue -->
<template>
<a-modal v-model:visible="open"></a-modal>
</template>
<script>
export default{
props: {
open: {
type: Boolean,
default: true,
}
},
}
</script>这是个低级谬误，vue3 反对多个参数双向绑定，然而子组件不能间接批改props，须要转换一下：
-
办法一：用
computed代替<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监听<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
错误代码：
console.log(data);eslint 的规定设定了不能有console，当然能够改配置：
// .eslintrc.js
rules: {
'no-console': 'off',
// or:
'no-console': [2, { allow: ['warn', 'error'] }],
// or:
'no-console': process.env.NODE_ENV === 'production' ? [2, { allow: ['warn', 'error'] }] : 'off'
}提这个谬误是为了引入上面的问题，在某些中央须要打印但不心愿 eslint 报错，能够让其疏忽查看：
// 疏忽整个文件在第一行加
/* eslint-disable */
// 疏忽一段代码查看
/* eslint-disable */
...this our codes;
/* eslint-enable */
// 疏忽一行代码查看
console.log(data); // eslint-disable-line
// 疏忽下一行代码查看
// eslint-disable-next-line
console.log(data);那么在 <template> 中呢？
<template>
<!-- eslint-disable -->
<div v-for="item in options">{{item}}</div>
</template>而后发现不行，会报 vue/require-v-for-key 谬误，正文失败。
找了各种文章最初发现是本人的锅Ծ‸Ծ，找不出问题的时候还是要看官网文档，在 eslint-plugin-vue 已有阐明 vue/comment-directive 规定就是用于疏忽代码查看，一看 eslint 的文件配置果然是敞开了：
// .eslintrc.js
rules: {'vue/comment-directive': 'off',}改为error，完满؏؏☝ᖗ乛◡乛ᖘ☝؏؏
出工。
