升级@vue/eslint-config-prettier 7.0.0后出现ESLint配置加载编译错误

错误含义 #

这个错误说明ESLint无法找到@vue/prettier/@typescript-eslint这个扩展配置项。核心原因是你升级@vue/eslint-config-prettier到7.0.0后，该包的配置结构和命名规则发生了变更——旧版本6.x的嵌套式配置路径在7.x版本中已被移除，导致ESLint加载失败。

配置文件问题说明 #

问题出在你的.eslintrc.js文件的extends数组中，你使用了旧版本的配置路径@vue/prettier/@typescript-eslint，但7.x版本的@vue/eslint-config-prettier不再支持这种写法，需要调整配置结构。

解决方案 #

1. 调整.eslintrc.js配置 #

将原来的@vue/prettier/@typescript-eslint替换为拆分后的合规配置项，示例配置如下：

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    // 根据你的Vue版本选择对应基础配置，比如vue3-essential或vue2-essential
    'plugin:vue/vue3-essential',
    '@vue/typescript/recommended',
    '@vue/prettier',
    'plugin:prettier/recommended'
  ],
  parserOptions: {
    parser: '@typescript-eslint/parser'
  },
  rules: {
    // 自定义规则可在这里添加
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

2. 确保依赖版本匹配 #

执行以下命令安装/更新必要依赖，保证版本兼容：

npm install @vue/eslint-config-typescript eslint-plugin-prettier @vue/eslint-config-prettier --save-dev

3. 验证配置有效性 #

执行ESLint检查命令验证修复效果：

npx eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts

如果仍有问题，可以检查package.json中的依赖版本，确保：

• @vue/eslint-config-prettier为7.x版本
• @vue/eslint-config-typescript版本与你的Vue、TypeScript版本匹配（比如Vue3对应4.x+，Vue2对应3.x+）

内容的提问来源于stack exchange，提问作者Eric Brown - Cal