eslint<a>内部</a>失败<Link><a>在反应</a>

Question

我得到了 Next.js React 应用程序。 这是我的代码：

<Link href="/foo">
  <a>Bar</a>
</Link>

eslint 告诉我这个： The href attribute is required for an anchor to be keyboard accessible. 但是 Next.js 希望我在我的Link中加入一个a标签。 我如何正确配置 eslint 或更改我的代码，以便它不会警告我？ 当然，除了完全禁用此规则。

Answer 1

将此添加到 .eslintrc.json

"jsx-a11y/anchor-is-valid": [ "error", {
        "components": [ "Link" ],
        "specialLink": [ "hrefLeft", "hrefRight" ],
        "aspects": [ "invalidHref", "preferButton" ]
    }]

此设置控制错误。 我希望这有帮助

Answer 2

eslint-disable-next-line jsx-a11y/anchor-is-valid

如果您使用的是 vscode，只需右键单击问题中的警告，您可以检查是否仅针对该 lino 或整个文件禁用

Answer 3

对于 NextJS，将"react-app"添加到扩展有帮助。

"extends": [
    ...
    "react-app"
],