后期我的项目中疏忽了 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.jsmodule.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.jsmodule.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.jsmodule.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.jsimport autoImport from 'unplugin-auto-import/vite';autoImport({ imports: [ 'vue', 'vue-router', ]})所以也要让 eslint 晓得，学生成一个蕴含所有变量的文件：
// vite.config.jsautoImport({ ...last, eslintrc: { // 已存在文件设置默认 false，须要更新时再关上，避免每次更新都从新生成 enabled: false, // 生成文件地址和名称 filepath: './.eslintrc-auto-import.json', globalsPropValue: true, }})下面的enabled在生成文件后倡议敞开，否则每次更新都会从新生成。
扩大到 eslint：
// .eslintrc.jsmodule.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.jsrules: { '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-lineconsole.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.jsrules: { 'vue/comment-directive': 'off',}改为error，完满☝乛◡乛☝
出工。