VueJS中ESlint(Prettier)解析错误：相邻JSX元素需包裹父标签

可能的原因及解决步骤 #

1. 检查版本兼容性 #

@vue/eslint-config-prettier 和 prettier 版本不匹配是常见触发点：

• 运行npm list prettier @vue/eslint-config-prettier查看当前版本
• 版本对应规则：Prettier 3.x 需要搭配@vue/eslint-config-prettier ≥8.0.0；Prettier 2.x 对应@vue/eslint-config-prettier 7.x 版本
• 版本不匹配时，重新安装兼容版本：

  # 示例：安装Prettier 2.x + 对应兼容配置
  npm install prettier@2.8.8 @vue/eslint-config-prettier@7.1.0 --save-dev
  

2. 修正Prettier配置 #

确保Prettier正确识别Vue文件，在项目根目录新建/修改.prettierrc：

{
  "vueIndentScriptAndStyle": true,
  "singleQuote": true,
  "semi": true,
  "printWidth": 80
}

该配置明确开启Vue文件中script、style标签的缩进处理，避免解析逻辑混淆。

3. 优化ESLint配置细节 #

现有配置框架正确，可补充以下调整：

• 添加Vue相关设置，确保解析器精准识别文件类型：

  require('@rushstack/eslint-patch/modern-module-resolution')
  
  module.exports = {
    root: true,
    env: {
      es6: true,
      node: true
    },
    extends: [
      'plugin:vue/vue3-essential',
      'eslint:recommended',
      '@vue/eslint-config-typescript',
      '@vue/eslint-config-prettier', // 确保此条目在最后，覆盖冲突规则
    ],
    parser: 'vue-eslint-parser',
    parserOptions: {
      ecmaVersion: 'latest',
      parser: '@typescript-eslint/parser',
      sourceType: 'module',
    },
    settings: {
      'vue/ignore': ['node_modules'],
      'vue/html-indent': 2
    },
    rules: {
      'vue/multi-word-component-names': 0,
    },
  }
  

4. 清除ESLint缓存 #

ESLint缓存可能残留旧错误，执行命令清除：

npx eslint --cache --clear

之后重启编辑器，重新校验文件。

5. 检查编辑器配置（以VSCode为例） #

确保编辑器插件正确关联Vue文件：

• 在settings.json中添加：

  "eslint.validate": ["javascript", "typescript", "vue"],
  "prettier.documentSelectors": ["**/*.vue"],
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
  

• 禁用其他可能冲突的格式化插件（如Vetur，若使用Volar需确保其格式化规则与Prettier一致）。

6. 排查文件语法问题 #

个别.vue文件的template标签未正确闭合、存在语法错误，会导致解析器误判。可先测试最简.vue文件：

<template>
  <div>Test</div>
</template>

<script setup lang="ts">
</script>

<style scoped>
</style>

若该文件正常，说明原文件存在语法问题；若仍报错，则为全局配置问题。

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