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
  },
};
相关推荐
huangyiyi666663 天前
轮询那些事儿
javascript·前端框架·vue·js
Ya-Jun5 天前
快应用TypeError: The ‘compilation‘ argument must be an instance of Compilation错误
node.js·ux·js
歪歪1006 天前
在哪些场景下适合使用 v-model 机制?
服务器·前端·javascript·servlet·前端框架·js
闫辉7 天前
HackerNews 播客生成器
node.js·js
~无忧花开~9 天前
JavaScript学习笔记(二十八):JavaScript性能优化全攻略
开发语言·前端·javascript·笔记·学习·性能优化·js
爱偷懒的。。10 天前
基于 WebSocket 协议的实时弹幕通信机制分析-抖音
网络·python·websocket·网络协议·学习·js
棋子一名13 天前
跑马灯组件 Vue2/Vue3/uni-app/微信小程序
微信小程序·小程序·uni-app·vue·js
EterNity_TiMe_15 天前
上手 Rokid JSAR:新手也能快速入门的 AR 开发之旅
ar·js·rokid
小白640215 天前
前端梳理体系从常问问题去完善-框架篇(react生态)
前端·css·html·reactjs
TeleostNaCl16 天前
实战 | 使用 Chrome 开发者工具修改网页源码跳过前端校验
前端·chrome·经验分享·后端·js