noJsxLiterals
此内容尚不支持你的语言。
Summary
Section titled “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
- Same as
How to configure
Section titled “How to configure”{ "linter": { "rules": { "nursery": { "noJsxLiterals": "error" } } }}
Description
Section titled “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
Section titled “Examples”Invalid
Section titled “Invalid”<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.
<>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.
<span> Please enter your name</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.
<div>{'Hello World'}</div>
<>{'Welcome to our site'}</>
<span> {'Please enter your name'}</span>
<div>{`Hello ${name}`}</div>
Options
Section titled “Options”noStrings
Section titled “noStrings”When enabled, the rule will also flag string literals inside JSX expressions and attributes.
Default:
false
{ "linter": { "rules": { "nursery": { "noJsxLiterals": { "options": { "noStrings": true } } } } }}
<span> {'Please enter your name'}</span>
<Component title="Hello!" />
allowedStrings
Section titled “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.
{ "linter": { "rules": { "nursery": { "noJsxLiterals": { "options": { "allowedStrings": [ "Hello", " ", "·" ] } } } } }}
<> <div>Hello</div> <div> </div> <div>·</div></>
ignoreProps
Section titled “ignoreProps”When enabled, the rule will ignore string literals used as prop values.
Default:
false
{ "linter": { "rules": { "nursery": { "noJsxLiterals": { "options": { "ignoreProps": true } } } } }}
<> <Component title="Welcome" /> <input placeholder="Enter name" /></>
Related links
Section titled “Related links”Copyright (c) 2023-present Biome Developers and Contributors.