前期项目中忽略了 eslint 检查，导致一运行 npm run lint 出现两千多条错误(?д?; ) 造孽啊
花了两三天搞完，做个错误汇总。

环境和配置 项目用 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 错误代码：

这是个低级错误，vue3支持多个参数双向绑定，但是子组件不能直接修改props，需要转换一下：

• 方法一：用computed代替
  
  
  
• 方法二：用watch监听
  
  
  

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);

那么在