eslint写jsx报错
ChatGPT提示
在写JSX时,ESLint可能会报出一些语法错误,这些错误通常是由于ESLint默认配置中不支持JSX语法导致的。为了解决这些错误,我们需要在ESLint配置文件中启用对JSX语法的支持。
首先,需要安装eslint-plugin-react插件:
yarn add eslint-plugin-react --dev
然后,在.eslintrc文件中添加以下配置:
{
"extends": [
"plugin:prettier/recommended",
"eslint:recommended",
"plugin:@typescript-eslint/recommended"
],
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true,
"tsx": true
}
},
"parser": "@typescript-eslint/parser",
"plugins": [
"@typescript-eslint"
],
"env": {
"browser": true
},
"globals": {
"document": true
},
"ignorePatterns": [
"src/vendor/*"
],
"rules": {
"@typescript-eslint/no-explicit-any": "off",
"@typescript-eslint/no-non-null-assertion": "off"
}
}
在这个配置文件中,我们启用了ESLint对ES6和JSX语法的支持,同时继承了eslint:recommended和plugin:react/recommended配置,启用了react插件,并关闭了react/prop-types规则。如果你需要添加其他的规则或插件,可以在rules和plugins中添加相应的配置。
此外,如果你使用了其他的JSX语法扩展,比如React Router中的
{
"rules": {
"react/jsx-uses-vars": "off",
"react/jsx-uses-react": "off",
"react/jsx-no-undef": "off",
"react/jsx-uses-router": "off"
}
}
这些规则可以在ESLint官方文档中找到。
在自己项目加上
我的代码
{
"extends": [
"plugin:prettier/recommended",
"eslint:recommended",
"plugin:@typescript-eslint/recommended"
],
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true,
"tsx": true
}
},
"parser": "@typescript-eslint/parser",
"plugins": ["@typescript-eslint"],
"env": {
"browser": true
},
"globals": {
"document": true
},
"ignorePatterns": ["src/vendor/*"],
"rules": {
"@typescript-eslint/no-explicit-any": "off",
"@typescript-eslint/no-non-null-assertion": "off"
}
}