eslint写jsx报错

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/77331.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python 集合

一、集合概念 集合(set)是一个无序的不重复元素序列。 二、集合的创建 可以使用大括号{}或者set方法创建集合,但是创建一个空集合必须使用set而不能使用空{},因为在python中空{}用于创建空字典。 1、set函数 set()函数创建一个无序不重复元…

时序分解 | MATLAB实现基于EWT经验小波变换的信号分解分量可视化

时序分解 | MATLAB实现基于EWT经验小波变换的信号分解分量可视化 目录 时序分解 | MATLAB实现基于EWT经验小波变换的信号分解分量可视化效果一览基本介绍程序设计参考资料 效果一览 基本介绍 EWT经验小波变换 包含频谱相关系数 可直接运行 Matlab代码 1.可自由设置分量个数&…

OPENCV--调用GrabCut实现图像分割

# -*- coding:utf-8 -*- """ 作者:794919561 日期:2023/9/6 """ import cv2 import numpy as npclass Application:rect = (0,0,0,0)flag_rect = FalsestartX

SpringBoot整合Easy-ES操作演示文档

文章目录 SpringBoot整合Easy-ES操作演示文档1 概述及特性1.1 官网1.2 主要特性 2 整合配置2.1 导入POM2.2 Yaml配置2.3 EsMapperScan 注解扫描2.4 配置Entity2.5 配置Mapper 3 基础操作3.1 批量保存3.2 数据更新3.3 数据删除3.4 组合查询3.5 高亮查询3.6 统计查询 4 整合异常4…

106. 从中序与后序遍历序列构造二叉树

题目链接: 力扣(LeetCode)官网 - 全球极客挚爱的技术成长平台 思想: 来看一下一共分几步: 第一步:如果数组大小为零的话,说明是空节点了。 第二步:如果不为空,那么取…

联发科3纳米芯片预计2024年量产,此前称仍未获批给华为供货

9月7日,联发科与台积电共同宣布,联发科首款采用台积电3纳米制程生产的天玑旗舰芯片开发进度顺利,已成功流片,预计将在2024年量产,并将于下半年正式上市。这款旗舰芯片并非今年上市的天玑9300。 据联发科总经理陈冠州介…

prize_p1

文章目录 解题过程代码审计思路问题解决数组绕过preg_match__destruct的触发修改phar文件以及签名phar://支持的后缀 题解方法一&#xff08;数组绕过&#xff09;方法二&#xff08;gzip绕过&#xff09; 解题过程 源代码 <META http-equiv"Content-Type" conte…

OpenLDAP | ubuntu 安装配置和汉化 phpldapadmin

仅做汉化配置记录&#xff0c;后续完善openLDAP Samba。 sudo apt-get install phpldapadmin -y sudo vi /etc/phpldapadmin/config.php $servers->setValue(server,host,127.0.0.1); //修改为你ldap的服务器地址 $servers->setValue(server,base,array(dcexample,dc…

Ubuntu中设置代理的方式

由于公司的局域网环境&#xff0c;只提供以代理服务器的方式上网&#xff0c;因此有必要记录一下设置代理的方式&#xff0c;方便以后使用。 系统设置代理&#xff1a; System Settings -> Network -> Network proxy Method选择Manual&#xff0c;然后设置 HTTP Proxy…

AI文本创作在百度App发文的实践

作者 | 内容生态端团队 导读 大语言模型&#xff08;LLM&#xff09;指包含数百亿&#xff08;或更多&#xff09;参数的语言模型&#xff0c;这些模型通常在大规模数据集上进行训练&#xff0c;以提高其性能和泛化能力。在内容创作工具接入文心一言AI能力后&#xff0c;可以为…

论文复现--lightweight-human-pose-estimation-3d-demo.pytorch(单视角多人3D实时动作捕捉DEMO)

分类&#xff1a;动作捕捉 github地址&#xff1a;https://github.com/Daniil-Osokin/lightweight-human-pose-estimation-3d-demo.pytorch 所需环境&#xff1a; Windows10&#xff0c;conda 4.13.0&#xff1b; 目录 conda环境配置安装Pytorch全家桶安装TensorRT&#xff08;…

C++设计模式_05_Observer 观察者模式

接上篇&#xff0c;本篇将会介绍C设计模式中的Observer 观察者模式&#xff0c;和前2篇模板方法Template Method及Strategy 策略模式一样&#xff0c;仍属于“组件协作”模式。Observer 在某些领域也叫做 Event 。 文章目录 1. 动机&#xff08; Motivation&#xff09;2. 代码…

spring boot 2.7 -> 3.0升级指南

spring boot提供一个版本迁移指南 2.7 -> 3.0

红帽 RHEL 源码限制成契机,AlmaLinux 获捐更可“做自己”

红帽在两个月前发布公告声称&#xff0c;将限制对 Red Hat Enterprise Linux (RHEL) 源代码的访问&#xff0c;早前曾报道&#xff0c;此举导致 AlmaLinux 、Rocky Linux 等 Linux 发行版未来发展严重受阻。 对于这一决策&#xff0c;AlmaLinux OS 基金会主席 Benny Vasquez 此…

few shot目标检测survey paper笔记(整体概念)

paper: Few-Shot Object Detection: A Comprehensive Survey (CVPR2021) 深度学习提高了目标检测的精度&#xff0c;但是它需要大量的训练数据。 对于训练数据集中没有见过的目标&#xff0c;是检测不了的&#xff0c;所以就限制了在实际中的应用。 如果想让模型去识别新的目标…

element-table 行的拖拽更改顺序(无需下载sortableJs

样例展示&#xff1a;vueelement 通过阅读element文档我们发现element并不提供拖拽相关的api 本博客通过element提供的行类名 注册函数 实现行与行的拖拽 1.设置el-table 的行样式类名 这里是用的是 function <el-table:data"outputData":row-class-name&qu…

Vue知识系列(3)每天10个小知识点

目录 系列文章目录Vue知识系列&#xff08;1&#xff09;每天10个小知识点Vue知识系列&#xff08;2&#xff09;每天10个小知识点 知识点**21. Vue不同生命周期**的概念、作用、原理、特性、优点、缺点、区别、使用场景**22. Vue 子组件和父组件执行顺序****23. created 和 mo…

H.265 视频在浏览器中的播放问题探究

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f405;&#x1f43e;猫头虎建议程序员必备技术栈一览表&#x1f4d6;&#xff1a; &#x1f6e0;️ 全栈技术 Full Stack: &#x1f4da…

2023/9/12 -- C++/QT

作业 实现一个图形类&#xff08;Shape&#xff09;&#xff0c;包含受保护成员属性&#xff1a;周长、面积&#xff0c; 公共成员函数&#xff1a;特殊成员函数书写 定义一个圆形类&#xff08;Circle&#xff09;&#xff0c;继承自图形类&#xff0c;包含私有属性&#xf…

蓝蓝设计为教育行业提供软件UI交互设计服务

在教育行业&#xff0c;软件的用户体验设计对于提供优质教育体验至关重要。教育行业软件用户体验设计需要考虑到学生和教师的需求&#xff0c;以及教育环境的特殊性。为了确保设计的成功&#xff0c;选择一家专业的设计公司是至关重要的&#xff0c;而北京蓝蓝设计公司就是您的…