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
  },
};