eslint写jsx报错

ChatGPT提示

在写JSX时，ESLint可能会报出一些语法错误，这些错误通常是由于ESLint默认配置中不支持JSX语法导致的。为了解决这些错误，我们需要在ESLint配置文件中启用对JSX语法的支持。

首先，需要安装eslint-plugin-react插件：

yarn add eslint-plugin-react --dev

然后，在.eslintrc文件中添加以下配置：

{"parserOptions": {"ecmaVersion": 6,"sourceType": "module","ecmaFeatures": {"jsx": true}},"extends": ["eslint:recommended", "plugin:react/recommended"],"plugins": ["react"],"rules": {// 这里填入你的项目需要的个性化配置"react/prop-types": "off"},"settings": {"react": {"version": "detect"}}
}

在这个配置文件中，我们启用了ESLint对ES6和JSX语法的支持，同时继承了eslint:recommended和plugin:react/recommended配置，启用了react插件，并关闭了react/prop-types规则。如果你需要添加其他的规则或插件，可以在rules和plugins中添加相应的配置。

此外，如果你使用了其他的JSX语法扩展，比如React Router中的和组件，可以在eslint-plugin-react配置中添加对应的规则，以避免ESLint报出错误。例如：

{"rules": {"react/jsx-uses-vars": "error","react/jsx-uses-react": "error","react/jsx-no-undef": "error","react/jsx-uses-router": "error"}
}

这些规则可以在ESLint官方文档中找到。

在自己项目加上

在这里插入图片描述

我的代码

module.exports = {parserOptions: {ecmaVersion: 6,sourceType: 'module',ecmaFeatures: {jsx: true,},},extends: ['eslint-config-alloy/react'],globals: {// 这里填入你的项目需要的全局变量// 这里值为 false 表示这个全局变量不允许被重新赋值，比如：},rules: {// 这里填入你的项目需要的个性化配置'react/prop-types': 'off','react/jsx-no-target-blank': 'off','react/no-string-refs': 'off','jsx-a11y/anchor-has-content': 'off','jsx-a11y/anchor-is-valid': 'off','jsx-a11y/click-events-have-key-events': 'off','jsx-a11y/no-static-element-interactions': 'off','no-param-reassign': 'off','no-plusplus': 'off','react/jsx-uses-vars': 'error','react/jsx-uses-react': 'error','react/jsx-no-undef': 'error',},plugins: [// 这里添加你的插件名字'react',],settings: {// 这里添加你的插件设置react: {version: 'detect',},},env: {// 这里填入你的项目需要的环境// 它们预定义了不同环境的全局变量，比如：//// browser: true,// node: true,// mocha: true,// jest: true,// jquery: true},
};