如何修复这种违反这种'反应/没有未转义权限'的eslint规则？

Question

这是我的代码:

const func = () => {
  return (
    <div >
       you're free
      </div>
  )}

以某种方式,eslint标记"你是免费的"行有错误 error HTML entities must be escaped react/no-unescaped-entities

但是从我可以看到jsx已经逃脱了撇号.我可以看到这些单词you're free没有问题.如果我将其转义为',那么我将很难搜索字符串(我希望you're free在编辑器中搜索返回命中.但显然编辑器会错过,因为文本实际上是you're free)

那么解决这种eslint异常的最佳方法是什么？

Answer 1

推荐的解决方案是使用',‘或’代替它包装为一个变量.像这样:

const func = () => {
  return (
    <div >
       you&apos;re free
      </div>
  )}

对于搜索功能,建议您拥有本地化/国际化的文件,并将其调用到您的应用程序中.

我不认为这实际上更好......这使得阅读你的标记变得更加困难。IMO 这样做{`你是自由的`}所以你不是一个阅读机器代码的人 (5认同)
这是解决此问题的最佳和最干净的方法。谢谢！ (2认同)
您好，关于“推荐解决方案”=> 由谁提供？不逃避这些角色的后果是什么？编辑：此链接似乎相关：https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unescaped-entities.md 还显示如何限制字符（我不喜欢转义所有撇号...） (2认同)

Answer 2

我也有同样的问题next.js。我打开.eslintrc.json并添加了以下内容：

{
  "rules": { "react/no-unescaped-entities": 0 }
}

现在我的.eslintrc.json意愿如下：

{
  "extends": "next/core-web-vitals",
  "rules": { "react/no-unescaped-entities": 0 }
}

Answer 3

顺便说一句，您可以通过添加来禁用这种警告

"rules": { "react/no-unescaped-entities": 0 }

到您的.eslintrc文件。

我有什么理由不想这样做吗？IE 为什么默认它是一个规则 (13认同)
@Andrew https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-unescaped-entities.md 解释了为什么这是一条规则 - 它应该帮助你避免犯愚蠢的错误 (8认同)

Answer 4

我通过将行包含在以下内容中显式地转义整个文本块{" "}:

const func = () => {
  return (
    <div >
       {" you're free "}
      </div>
  )}

Answer 5

你可以做两件事，

它可以通过以下方式逃脱'

例如，

    const func = () => {
      return (
        <div >
           you&apos;re free
          </div>
      )}

Answer 6

上述解决方案仅在某些情况下有效。它对我不起作用。就我而言，我认为这是因为我们也在prettier我们的项目中使用。为了解决这个错误，我用反引号包裹了副本。

const func = () => {
  return (
    <div>
      {`
        You're free.
      `}
    </div>
  )
}

Answer 7

将其添加到导致错误的文件上

/* eslint-disable react/no-unescaped-entities */

还将其添加到eslintrc.json文件中

{
  "extends": "next/core-web-vitals",
  "rules": {
    "react/no-unescaped-entities": "off",
    "@next/next/no-page-custom-font": "off"
  }
}