Vue3项目ESLint、Prettier、Volar在VS Code中的配置问题排查

问题概述 #

旧电脑上正常运行的Vue3项目，更换电脑后出现以下问题：

• Vue文件保存时无法自动格式化，缺失分号的问题无法修复
• 更新ESLint与Prettier配置后问题加剧：
  • Vue模板出现虚假的「缺少>」解析错误
  • ESLint输出TypeError: prettier.resolveConfig.sync is not a function报错

解决方案 #

1. 修复prettier.resolveConfig.sync不存在的错误 #

原因：@vue/eslint-config-prettier@7.1.0依赖的低版本eslint-plugin-prettier与你安装的prettier@3.x不兼容（Prettier 3.x已移除同步版resolveConfig方法）。

操作步骤：

• 升级@vue/eslint-config-prettier到兼容Prettier 3.x的版本，修改package.json的devDependencies：

  "@vue/eslint-config-prettier": "^9.0.0",
  

• 执行依赖更新命令：

  npm install
  # 或使用pnpm
  pnpm install
  

• 调整.eslintrc.cjs配置：
  • 将extends中的@vue/eslint-config-prettier/skip-formatting替换为@vue/eslint-config-prettier（新版本不再需要skip-formatting后缀）
  • 移除rules中的prettier/prettier规则（新版本的@vue/eslint-config-prettier已集成Prettier校验，且自动适配Prettier 3.x）

修改后的.eslintrc.cjs核心部分：

module.exports = {
  // ...其他配置
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-essential',
    'plugin:@typescript-eslint/recommended',
    '@vue/eslint-config-prettier', // 替换原skip-formatting版本
  ],
  rules: {
    eqeqeq: 'error',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    // 移除原prettier/prettier规则
  },
  // ...其他配置
}

2. 修复Vue模板虚假的「缺少>」解析错误 #

原因：ESLint对Vue文件的解析配置不完整，或与VS Code插件存在冲突。

操作步骤：

• 在.eslintrc.cjs中明确指定Vue解析器，并添加Vue文件扩展名支持：

  module.exports = {
    // ...其他配置
    parser: 'vue-eslint-parser', // 指定Vue解析器
    parserOptions: {
      ecmaVersion: 2021,
      parser: '@typescript-eslint/parser', // 用于解析Vue中的TS代码
      sourceType: 'module',
      extraFileExtensions: ['.vue'] // 让ESLint识别.vue文件
    },
    // ...其他配置
  }
  

• 调整VS Code的settings.json，避免Vue文件格式化工具冲突：
  将Vue文件的默认格式化器改为Prettier，确保与ESLint联动：

  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
  

3. 恢复自动格式化与分号修复功能 #

操作步骤：

• 在项目根目录创建.prettierrc.cjs文件，统一Prettier配置（覆盖VS Code全局配置）：

  module.exports = {
    singleQuote: true,
    semi: true,
    trailingComma: "all",
    tabWidth: 2,
    useTabs: false,
    vueIndentScriptAndStyle: true // 优化Vue文件的脚本与样式缩进
  }
  

• 移除VS Codesettings.json中重复的prettier.singleQuote配置，让项目本地配置生效。
• 重启VS Code，确保ESLint和Prettier插件正常激活。

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