src/content/docs/linter/rules/no-jsx-literals.mdx
import { Tabs, TabItem } from '@astrojs/starlight/components';
<Tabs> <TabItem label="JSX and TSX" icon="seti:javascript"> ## Summary - Rule available since: `v2.2.4` - Diagnostic Category: [`lint/style/noJsxLiterals`](/reference/diagnostics#diagnostic-category) - This rule isn't recommended, so you need to enable it. - This rule doesn't have a fix. - The default severity of this rule is [**information**](/reference/diagnostics#information). - Sources: - Same as [`react/jsx-no-literals`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-literals.md){
"linter": {
"rules": {
"style": {
"noJsxLiterals": "error"
}
}
}
}
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.
<div>Hello World</div>
<>Welcome to our site</>
<span>
Please enter your name
</span>
<div>{'Hello World'}</div>
<>{'Welcome to our site'}</>
<span>
{'Please enter your name'}
</span>
<div>{`Hello ${name}`}</div>
noStringsWhen enabled, the rule will also flag string literals inside JSX expressions and attributes.
Default:
false
{
"linter": {
"rules": {
"style": {
"noJsxLiterals": {
"options": {
"noStrings": true
}
}
}
}
}
}
<span>
{'Please enter your name'}
</span>
<Component title="Hello!" />
allowedStringsAn 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": {
"style": {
"noJsxLiterals": {
"options": {
"allowedStrings": [
"Hello",
" ",
"·"
]
}
}
}
}
}
}
<>
<div>Hello</div>
<div> </div>
<div>·</div>
</>
ignorePropsWhen enabled, the rule will ignore string literals used as prop values.
Default:
false
{
"linter": {
"rules": {
"style": {
"noJsxLiterals": {
"options": {
"ignoreProps": true
}
}
}
}
}
}
<>
<Component title="Welcome" />
<input placeholder="Enter name" />
</>