noJsxLiterals

JSX and TSX

摘要

¥Summary

规则生效日期：v2.2.4

¥Rule available since: v2.2.4
诊断类别：lint/nursery/noJsxLiterals

¥Diagnostic Category: lint/nursery/noJsxLiterals
此规则没有修复方案。

¥This rule doesn’t have a fix.
此规则的默认严重级别为 information。

¥The default severity of this rule is information.
来源：

¥Sources:
- 与 react/jsx-no-literals 相同
  
  ¥Same as react/jsx-no-literals

如何配置

¥How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noJsxLiterals": "error"
6
      }
7
    }
8
  }
9
}

描述

¥Description

禁止在 JSX 元素中使用字符串字面量。

¥Disallow string literals inside JSX elements.

此规则不鼓励在 JSX 元素中直接使用字符串字面量。JSX 中的字符串字面量会使代码更难维护，尤其是在需要国际化或动态内容的应用中。

¥This rule discourages the use of string literals directly within JSX elements. String literals in JSX can make code harder to maintain, especially in applications that require internationalization or dynamic content.

示例

¥Examples

无效

¥Invalid

1
<div>Hello World</div>

code-block.jsx:1:6 lint/nursery/noJsxLiterals ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Incorrect use of string literal detected.
  
  > 1 │ <div>Hello World</div>
      │      ^^^^^^^^^^^
    2 │ 
  
  ℹ String literals in JSX can make code harder to maintain and internationalize.
  
  ℹ Consider avoiding hardcoded strings entirely.

1
<>Welcome to our site</>

code-block.jsx:1:3 lint/nursery/noJsxLiterals ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Incorrect use of string literal detected.
  
  > 1 │ <>Welcome to our site</>
      │   ^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ String literals in JSX can make code harder to maintain and internationalize.
  
  ℹ Consider avoiding hardcoded strings entirely.

1
<span>
2
  Please enter your name
3
</span>

code-block.jsx:1:7 lint/nursery/noJsxLiterals ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Incorrect use of string literal detected.
  
  > 1 │ <span>
      │       
  > 2 │   Please enter your name
  > 3 │ </span>
      │ 
    4 │ 
  
  ℹ String literals in JSX can make code harder to maintain and internationalize.
  
  ℹ Consider avoiding hardcoded strings entirely.

有效

¥Valid

1
<div>{'Hello World'}</div>

1
<>{'Welcome to our site'}</>

1
<span>
2
  {'Please enter your name'}
3
</span>

1
<div>{`Hello ${name}`}</div>

选项

¥Options

`noStrings`

启用后，该规则还会标记 JSX 表达式和属性中的字符串字面量。

¥When enabled, the rule will also flag string literals inside JSX expressions and attributes.

默认：false

¥Default: false

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noJsxLiterals": {
6
          "options": {
7
            "noStrings": true
8
          }
9
        }
10
      }
11
    }
12
  }
13
}

1
<span>
2
  {'Please enter your name'}
3
</span>

code-block.jsx:2:4 lint/nursery/noJsxLiterals ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Incorrect use of string literal detected.
  
    1 │ <span>
  > 2 │   {‘Please enter your name’}
      │    ^^^^^^^^^^^^^^^^^^^^^^^^
    3 │ </span>
    4 │ 
  
  ℹ String literals in JSX can make code harder to maintain and internationalize.
  
  ℹ Consider avoiding hardcoded strings entirely.

1
<Component title="Hello!" />

code-block.jsx:1:18 lint/nursery/noJsxLiterals ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Incorrect use of string literal detected.
  
  > 1 │ <Component title=“Hello!” />
      │                  ^^^^^^^^
    2 │ 
  
  ℹ String literals in JSX can make code harder to maintain and internationalize.
  
  ℹ Consider avoiding hardcoded strings entirely.

`allowedStrings`

允许作为字面量的字符串数组。对于不需要用表达式封装的常用单词或字符，这可能很有用。

¥An array of strings that are allowed as literals. This can be useful for common words or characters that don’t need to be wrapped in expressions.

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noJsxLiterals": {
6
          "options": {
7
            "allowedStrings": [
8
              "Hello",
9
              "&nbsp;",
10
              "·"
11
            ]
12
          }
13
        }
14
      }
15
    }
16
  }
17
}

1
<>
2
  <div>Hello</div>
3
  <div>&nbsp;</div>
4
  <div>·</div>
5
</>

`ignoreProps`

启用后，该规则将忽略用作 prop 值的字符串字面量。

¥When enabled, the rule will ignore string literals used as prop values.

默认：false

¥Default: false

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noJsxLiterals": {
6
          "options": {
7
            "ignoreProps": true
8
          }
9
        }
10
      }
11
    }
12
  }
13
}

1
<>
2
  <Component title="Welcome" />
3
  <input placeholder="Enter name" />
4
</>

noJsxLiterals

摘要

如何配置

描述

示例

无效

有效

选项

noStrings

allowedStrings

ignoreProps

相关链接

`noStrings`

`allowedStrings`

`ignoreProps`