eslint写jsx报错

eslint写jsx报错

ChatGPT提示

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

首先,需要安装eslint-plugin-react插件:

复制代码
yarn add eslint-plugin-react --dev

然后,在.eslintrc文件中添加以下配置:

javascript 复制代码
{
  "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报出错误。例如:

javascript 复制代码
{
  "rules": {
    "react/jsx-uses-vars": "error",
    "react/jsx-uses-react": "error",
    "react/jsx-no-undef": "error",
    "react/jsx-uses-router": "error"
  }
}

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

在自己项目加上

我的代码

json 复制代码
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
  },
};
相关推荐
恶猫1 天前
javascript文本长度检测与自动截取,用于标题长度检测
javascript·css·css3·js·自动检测·文本长度
闲人编程3 天前
前端形态与样式风格:从古典到现代的视觉语言演进
前端·css·状态模式·组件·js·风格·响应式
解道Jdon3 天前
SpringBoot4与Spring7发布:云原生深度进化
javascript·reactjs
走,板砖去5 天前
WeakMap 应用场景与示例
js
Yvonne爱编码5 天前
AJAX入门-AJAX 概念和 axios 使用
前端·javascript·ajax·html·js
GISer_Jing6 天前
滴滴二面(准备二)
前端·javascript·vue·reactjs
小天呐7 天前
qiankun 微前端接入实战
前端·js·微前端
三思而后行,慎承诺12 天前
requestIdleCallback 和 MessageChannel
javascript·reactjs
脑子慢且灵13 天前
【Web前端】JS+DOM来实现乌龟追兔子小游戏
java·开发语言·前端·js·dom
Flyfreelylss14 天前
前端实现解析【导入】数据后调用批量处理接口
前端·reactjs