升级Vuetify 1.5至2.6.13时出现eslint规则加载错误求助

问题描述 #

升级Vuetify从1.5版本到2.6.13版本后，执行npm run serve出现以下ESLint编译错误：

ERROR Failed to compile with 1 error 13:22:08

[eslint] Error while loading rule 'vuetify/no-legacy-grid': context.parserServices.defineTemplateBodyVisitor is not a function
Occurred while linting C:\Users...\src\main.js

You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
ERROR in [eslint] Error while loading rule 'vuetify/no-legacy-grid': context.parserServices.defineTemplateBodyVisitor is not a function
Occurred while linting C:\Users...\src\main.js

webpack compiled with 1 error

当前依赖版本：

"vue": "^2.7.14",
"vuetify": "^2.6.13",
"@vue/cli-plugin-babel": "^5.0.8",
"@vue/cli-plugin-eslint": "^5.0.8",
"@vue/cli-service": "^5.0.8",
"babel-eslint": "^10.1.0",
"eslint": "^8.31.0",
"eslint-plugin-vue": "^9.8.0",
"eslint-plugin-vuetify": "^1.1.0",
"vue-cli-plugin-vuetify": "^2.5.8",

.eslintrc.js中的规则配置（存在拼写错误）：

"rules": {
"vuetifyify/no-legacy-grid": "error",}

尝试使用/* eslint-disable */注释未生效，需解决该报错。

解决步骤 #

1. 替换废弃的ESLint解析器 #

babel-eslint已停止维护，与ESLint 8+版本兼容性差，需替换为@babel/eslint-parser：

• 安装新解析器及依赖：

npm install @babel/eslint-parser @babel/core --save-dev

• 卸载旧解析器：

npm uninstall babel-eslint

2. 修正ESLint配置文件 #

更新.eslintrc.js，指定正确的解析器、修复规则拼写错误：

module.exports = {
  parser: 'vue-eslint-parser', // 优先解析Vue模板
  parserOptions: {
    parser: '@babel/eslint-parser', // 解析Vue组件内的script代码
    sourceType: 'module',
    requireConfigFile: false // 若无Babel配置文件可添加此选项，否则指向你的babel.config.js路径
  },
  plugins: ['vuetify'],
  rules: {
    // 修正规则名拼写错误：vuetify/no-legacy-grid而非vuetifyify/no-legacy-grid
    'vuetify/no-legacy-grid': 'error'
  },
  extends: [
    'plugin:vue/essential',
    'plugin:vuetify/recommended' // 可选，启用Vuetify官方推荐规则集
  ]
}

3. 升级eslint-plugin-vuetify版本 #

eslint-plugin-vuetify@1.1.0与ESLint 8+存在兼容性问题，升级至最新兼容版本：

npm install eslint-plugin-vuetify@latest --save-dev

4. 清理缓存并重新构建 #

删除旧依赖及缓存，重新安装后启动服务：

rm -rf node_modules package-lock.json
npm install
npm run serve

内容的提问来源于stack exchange，提问作者llogaran