noJsxLiterals

Ce contenu n’est pas encore disponible dans votre langue.

JSX and TSX

Summary

Rule available since: v2.2.4
Diagnostic Category: lint/nursery/noJsxLiterals
This rule doesn’t have a fix.
The default severity of this rule is information.
Sources:
- Same as react/jsx-no-literals

How to configure

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

Description

Disallow string literals inside JSX elements.

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`

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

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>

1
<Component title="Hello!" />

`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`

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