vue3 .vue文件中 lang="tsx" 中写jsx代码,eslint解析出错 Parsing error: '>' expected.eslint?

新手上路,请多包涵

vue3 lang="tsx" 中写jsx代码eslint解析出错 error Parsing error: ';' expected 或 Parsing error: '>' expected.eslint

image.png
image.png

.eslintrc.js 配置如下

module.exports = {
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
    ecmaVersion: 2020,
    sourceType: 'module',
    extraFileExtensions: ['.vue'],
    ecmaFeatures: {
      jsx: true
    },
    project: './tsconfig.json' 
  },
  extends: [
    'plugin:vue/vue3-recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier',
    'plugin:prettier/recommended'
  ],
  plugins: ['vue', '@typescript-eslint', 'prettier'],
  rules: {
    'prettier/prettier': 'error',
    // 在这里添加自定义规则
  }
};

tsconfig.js配置如下

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "jsx": "preserve",
    "jsxImportSource": "vue",
    "strict": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "allowSyntheticDefaultImports": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "exclude": ["node_modules"]
}

package.json 里版本如下

{
  "name": "my-vue-app",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc -b && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@vitejs/plugin-vue-jsx": "^4.1.1",
    "@vue/babel-plugin-jsx": "^1.2.5",
    "@vue/babel-preset-jsx": "^1.4.0",
    "vue": "^3.5.13"
  },
  "devDependencies": {
    "@babel/core": "^7.26.0",
    "@babel/eslint-parser": "^7.26.5",
    "@babel/preset-env": "^7.26.0",
    "@babel/preset-typescript": "^7.26.0",
    "@typescript-eslint/eslint-plugin": "^8.19.1",
    "@typescript-eslint/parser": "^8.19.1",
    "@vitejs/plugin-vue": "^5.2.1",
    "@vue/tsconfig": "^0.7.0",
    "eslint": "^8.57.1",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-prettier": "^5.2.1",
    "eslint-plugin-vue": "^9.32.0",
    "prettier": "^3.4.2",
    "typescript": "~5.6.2",
    "vite": "^6.0.5",
    "vue-eslint-parser": "^9.4.3",
    "vue-tsc": "^2.2.0"
  }
}

vite.config.ts 中有引入 @vitejs/plugin-vue-jsx

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';

export default defineConfig({
  plugins: [vue(), vueJsx()]
});

我试过将.eslintrc.js 中 project: './tsconfig.json' 这个去掉就不会有这个报错,但是这显然不行。
我也尝试安装不同的eslint以及各依赖的版本,都不能解决。
实在不知道如何处理这个错误了。

阅读 848
avatarAI BotBETA

问题解答

在你的 .eslintrc.js 配置中,问题出在 parserOptionsparser 字段上。你当前配置为 @typescript-eslint/parser,但当你使用 lang="tsx" 并在 .vue 文件中编写 JSX 代码时,你还需要确保 ESLint 能够正确解析 JSX 语法。

为了解决这个问题,你可以尝试以下步骤:

  1. 修改 parserOptions.parser 配置
    由于你正在使用 Vite 和相关的 Vue 插件来处理 JSX,你可以将 parser 字段改回 vue-eslint-parser,并确保 vue-eslint-parser 能够正确配置以支持 JSX。vue-eslint-parser 内部会使用 @typescript-eslint/parser 来处理 TypeScript 代码,但你需要确保它正确集成了 JSX 支持。
  2. 确保 vue-eslint-parser 的配置正确
    vue-eslint-parser 通常能够处理 .vue 文件中的 JSX 代码,但你需要确保所有相关配置都正确无误。特别是,你可能需要在 parserOptions 中添加一些额外的配置来确保 JSX 被正确处理。不过,从 Vue 3 和相关工具链的最新版本来看,通常不需要额外的配置。
  3. 移除 project: './tsconfig.json' 配置
    你已经提到,移除这个配置可以解决问题,但这通常不是最佳做法,因为它会导致 TypeScript 类型检查与 ESLint 分离。然而,在某些情况下,如果 vue-eslint-parsertsconfig.json 的集成存在问题,这可以作为临时解决方案。
  4. 更新和检查依赖版本
    确保你使用的所有依赖项(如 vue-eslint-parser, @typescript-eslint/parser, eslint-plugin-vue 等)都是最新的,并且彼此兼容。有时候,版本冲突或旧版本的 bug 可能会导致解析错误。
  5. 检查 Vite 配置
    你已经正确地在 Vite 配置中引入了 @vitejs/plugin-vue-jsx 插件,这通常是处理 .vue 文件中 JSX 代码的正确方法。

推荐的 .eslintrc.js 配置

尝试将你的 .eslintrc.js 配置修改为以下形式:

module.exports = {
  parser: 'vue-eslint-parser',
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: 'module',
    extraFileExtensions: ['.vue'],
    ecmaFeatures: {
      jsx: true
    }
    // 注意:通常不需要在这里指定 `project` 字段,除非你有特定的需求
  },
  extends: [
    'plugin:vue/vue3-recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier',
    'plugin:prettier/recommended'
  ],
  plugins: ['vue', '@typescript-eslint', 'prettier'],
  rules: {
    'prettier/prettier': 'error',
    // 在这里添加自定义规则
  }
};

这个配置移除了 project: './tsconfig.json',因为 vue-eslint-parser 通常不需要这个字段来正确解析 .vue 文件中的 JSX 代码。如果你的项目中需要 TypeScript 类型检查与 ESLint 集成,确保你的开发环境(如编辑器或 IDE)正确配置了 TypeScript 支持。

如果问题仍然存在,请检查是否有其他配置或代码问题导致 ESLint 无法正确解析 JSX。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
logo
Microsoft
子站问答
访问
宣传栏