vue3 lang="tsx" 中写jsx代码eslint解析出错 error Parsing error: ';' expected 或 Parsing error: '>' expected.eslint
.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以及各依赖的版本,都不能解决。
实在不知道如何处理这个错误了。