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
  },
};
相关推荐
三思而后行,慎承诺3 天前
requestIdleCallback 和 MessageChannel
javascript·reactjs
脑子慢且灵5 天前
【Web前端】JS+DOM来实现乌龟追兔子小游戏
java·开发语言·前端·js·dom
Flyfreelylss5 天前
前端实现解析【导入】数据后调用批量处理接口
前端·reactjs
上单带刀不带妹7 天前
Node.js 的流(Stream)是什么?有哪些类型?
node.js·stream·js
丁同亚的博客8 天前
echarts大屏项目指南
echarts·可视化·js·web前端·大屏
乔公子搬砖12 天前
小程序开发提效:npm支持、Vant Weapp组件库与API Promise化(八)
前端·javascript·微信小程序·js·promise·vagrant·事件绑定
110546540116 天前
37、需求预测与库存优化 (快消品) - /供应链管理组件/fmcg-inventory-optimization
前端·信息可视化·数据分析·js
我命由我1234523 天前
软件开发 - 避免过多的 if-else 语句(使用策略模式、使用映射表、使用枚举、使用函数式编程)
java·开发语言·javascript·设计模式·java-ee·策略模式·js
第七种黄昏24 天前
大事件项目拆解:登录访问拦截实现详解
前端框架·vue·js
PineappleCode1 个月前
用 “私房钱” 类比闭包:为啥它能访问外部变量?
前端·面试·js