ESLint对a标签href属性警告解决方法
一、问题解决方法
1、环境介绍：
通过React的官方教程 Create-React-App使用脚手架工具搭建的工程，然后添加了路由组件React-Router，样式组件Antd Design（简称antd）。
在antd的的Table组件中是这样添加行操作的
<a href="javascript:;">{text}</a>
2、警告描述：
The href attribute is required for an anchor to be keyboard accessible.
Provide a valid, navigable address as the href value.
If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles.
Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
3、解决方法：
3.1、运行 npm run eject
然后根据提示安装缺少的组件。
3.2、添加配置
在package.json文件中添加如下代码
"eslintConfig": {"extends": "react-app","rules":{"jsx-a11y/anchor-is-valid":"off"}}
然后修改代码为
<a href="">{text}</a>然后就可以消除警告，问题解决！
二、解决过程
1、阅读控制台提示信息
首先打开警告提示中的链接地址
里面解释为什么会出现这个问题，以及关于各种用法的处理方法，但是不够通用。寻求配置方法
2、寻找官方资料
打开ESLint官网，找到用户指南下的配置教程，阅读之后收获如下：
2.1、配置方式
- Configuration Comments ： 使用 JavaScript 注释把配置信息直接嵌入到一个代码源文件中。
- Configuration Files ： 使用 JavaScript、JSON 或者 YAML 文件为整个目录（处理你的主目录）和它的子目录指定配置信息。可以配置一个独立的
.eslintrc.*文件，或者直接在package.json文件里的eslintConfig字段指定配置，ESLint 会查找和自动读取它们，再者，你可以在命令行运行时指定一个任意的配置文件。
2.2、文件配置方式优先级
ESLint 支持几种格式的配置文件：
- JavaScript - 使用 .eslintrc.js 然后输出一个配置对象。
- YAML - 使用 .eslintrc.yaml 或 .eslintrc.yml 去定义配置的结构。
- JSON - 使用 .eslintrc.json 去定义配置的结构，ESLint 的 JSON 文件允许 JavaScript 风格的注释。
- (弃用) - 使用 .eslintrc，可以使 JSON 也可以是 YAML。
- package.json - 在 package.json 里创建一个 eslintConfig属性，在那里定义你的配置。
如果同一个目录下有多个配置文件，ESLint 只会使用一个。优先级顺序如下：
- .eslintrc.js
- .eslintrc.yaml
- .eslintrc.yml
- .eslintrc.json
- .eslintrc
- package.json
2.3、启用停用规则
配置规则关键字如下
- “off” 或 0 - 关闭规则
- “warn” 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
- “error” 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
2.4 运行 npm run eject
然后根据提示安装缺少的组件。
运行该命令允许自定义配置，参考链接。
2.5 配置规则
根据控制台提示连接中的 Rule details 章节知道关于href属性校验的规则名称叫jsx-a11y/anchor-is-valid
,配置package.json文件如下即可解决问题
"eslintConfig": {"extends": "react-app","rules":{"jsx-a11y/anchor-is-valid":"off"}}
2.5 然后修改代码为
<a href="">{text}</a>ESLint对a标签href属性警告解决方法相关推荐
- React项目中 ESLint对a标签href属性警告解决方法
警告描述: The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navig ...
- React中ESLint对a标签href属性警告
问题描述 在React中如果使用了a标签,但是又没有给a标签的href属性赋值有效的链接地址,则ESLint会警告,看着很烦. The href attribute is required for a ...
- HTML的a标签href属性指定相对路径与绝对路径的用法讲解
href是链接前端文件的一个最常用的重要属性,这里我们就来看一下HTML的a标签href属性指定相对路径与绝对路径的用法讲解,需要的朋友可以参考下 在实际Web开发中,插入图片.包含CSS文件等都需要 ...
- 关于eslint遇到的报错信息以及解决方法
1. Duplicate key/ Duplicated key 存在重复声明的key值,视情况解决 (PS:在uniapp中 // #ifdef H5 test: 1 // #endif // #i ...
- h5 iframe嵌套页面_关于解决iframe标签嵌套问题的解决方法
问题描述 当我们使用easyui做后台管理系统的时候,会使用tree组件来实现树形菜单,而我们每点击一次相应菜单,会根据是否有url来判断是否是一级菜单,以及是否已经存在 //根据该节点名字判断该节点 ...
- Highcharts Pie 饼图提示标签IE下重叠解决方法，及json数据绑定方法
Highcharts Pie 饼图提示标签IE下重叠解决方法,及json数据绑定方法 参考文章: (1)Highcharts Pie 饼图提示标签IE下重叠解决方法,及json数据绑定方法 (2)ht ...
- 打开PDF文件弹出阅读未加标签文档的解决方法
打开PDF文件弹出阅读未加标签文档的解决方法 参考文章: (1)打开PDF文件弹出阅读未加标签文档的解决方法 (2)https://www.cnblogs.com/Tty725/p/3308065.h ...
- 在less中不能正常使用css3的calc属性的解决方法
在less中不能正常使用css3的calc属性的解决方法 参考文章: (1)在less中不能正常使用css3的calc属性的解决方法 (2)https://www.cnblogs.com/zhaozh ...
- CMake添加QT库是出现Policy CMP0020 is not set“警告解决方法
CMake添加QT库是出现"Policy CMP0020 is not set"警告解决方法 查阅官方文档https://cmake.org/cmake/help/v3.0/pol ...
最新文章
- html实现静态下来菜单js,JS代码实现静态导航菜单效果要用何主要代码？
- 大型门户网站的可伸缩性架构设计
- 北向资金进行股票、期货指数、基金策略
- sql把字符数组转换成表
- Xcode如何显示代码行数
- asp.net中控制反转的理解
- 【Qt-Camera】大华相机显示线程
- 1219 厘米到英寸的转换
- lucas–kanade_异常检测常用光流法量化对比：Farneback/Horn-Schunck / Lucas–Kanade
- Oracle商务智能系统（Oracle Business Intelligence System 11i ）
- 校园卡水卡最低成本破解具体过程（补上上次工具教程）By:dj1149 -02
- R语言入门（二）正态性检验与假设检验
- Teranex AV标准转换器
- word2010打开97-03格式的word文件失败的解决方法
- 创业者觉得苦逼得真正原因
- 【linux】血泪经验，在安装Linux上一定要创建/data 分区，将数据盘和系统盘分开，方便重新安装系统，随时恢复Linux系统，其实特别简单，还有7个常用技巧
- 2022年深圳市促进大健康产业集群高质量发展的若干措施
- iOS游戏开发:从创意到实现
- C语言实现STL静态链表,先进后出的数据结构-栈 一
- libpng库编码图片为png（RGB压缩为png图片：与ffmpeg视频解码存储为png图片）