如何禁用eslint的jsx-a11y/anchor-is-valid警告？配置无效求助

你在禁用这条无障碍规则时踩了两个小坑，这才导致配置没生效，我来帮你修正：

问题出在哪？ #

你之前的写法有两个关键错误：

• 规则名不完整：ESLint的插件规则需要写完整标识jsx-a11y/anchor-is-valid，只写anchor-is-valid的话，ESLint没法识别对应的规则
• 注释位置错误：行内禁用注释必须和目标代码（也就是你的<a>标签）紧密关联，不能被其他元素或换行隔开

正确的单行禁用写法 #

写法1：注释与<a>标签同行 #

<div data-g-id={this.props.g.id}>
  <a className='classname' href="#" data-point="TL" onClick={this.callFunction} {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}>
</div>

写法2：注释放在<a>标签的上一行 #

<div data-g-id={this.props.g.id}>
  {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
  <a className='classname' href="#" data-point="TL" onClick={this.callFunction} >
</div>

可选：全局禁用（不推荐） #

如果你的整个项目都不需要这条无障碍检查，可以在ESLint配置文件（比如.eslintrc.js或.eslintrc.json）里添加全局关闭规则：

{
  "rules": {
    "jsx-a11y/anchor-is-valid": "off"
  }
}

不过还是建议尽量只在必要场景单行禁用，毕竟这条规则是为了提升页面的可访问性，全局关闭可能会影响其他组件的合规性。

内容的提问来源于stack exchange，提问作者Sourabh Banka