This rule aims to avoid developers to display literal string directly to users without translating them.
Example of incorrect code:
/*eslint i18next/no-literal-string: "error"*/
<div>hello world</div>
Example of correct code:
/*eslint i18next/no-literal-string: "error"*/
<div>{i18next.t('HELLO_KEY')}</div>
The option's typing definition looks like:
type MySchema = {
[key in
| 'words'
| 'jsx-components'
| 'jsx-attributes'
| 'callees'
| 'object-properties'
| 'class-properties']?: {
include?: string[];
exclude?: string[];
};
} & {
mode?: 'jsx-text-only' | 'jsx-only' | 'all';
message?: string;
'should-validate-template'?: boolean;
};
Instead of expanding options immoderately, a standard and scalable way to set options is provided
You can use exclude
and include
of each options to control which should be validated and which should be ignored.
The values of these two fields are treated as regular expressions.
- If both are used, both conditions need to be satisfied
- If both are emitted, it will be validated
words
decides whether literal strings are allowed (in any situation), solely based on the content of the string
e.g. if .*foo.*
is excluded, the following literals are allowed no matter where they are used
method('afoo');
const message = 'foob';
<Component value="foo" />;
-
jsx-components
decides whether literal strings as children within a component are allowed, based on the component namee.g. by default,
Trans
is excluded, soHello World
in the following is allowed.<Trans i18nKey="greeting">Hello World</Trans>
-
jsx-attributes
decides whether literal strings are allowed as JSX attribute values, based on the name of the attributee.g. if
data-testid
is excluded,important-button
in the following is allowed<button data-testid="important-button" onClick={handleClick}> {t('importantButton.label')} </button>
-
callees
decides whether literal strings are allowed as function arguments, based on the identifier of the function being callede.g. if
window.open
is excluded,http://example.com
in the following is allowedwindow.open('http://example.com');
callees
also covers object constructors, such asnew Error('string')
ornew URL('string')
-
object-properties
decides whether literal strings are allowed as object property values, based on the property keye.g. if
fieldName
is excluded butlabel
is not,currency_code
is allowed butCurrency
is not:const fieldConfig = { fieldName: 'currency_code', label: 'Currency', };
-
class-properties
decides whether literal strings are allowed as class property values, based on the property keye.g. by default,
displayName
is excluded, soMyComponent
is allowedclass My extends Component { displayName = 'MyComponent'; }
mode
provides a straightforward way to decides the range you want to validate literal strings. It defaults tojsx-text-only
which only forbids to write plain text in JSX markupjsx-only
validates the JSX attributes as wellall
validates all literal strings
message
defines the custom error messageshould-validate-template
decides if we should validate the string templates
You can see the default options here
Your project maybe not need to support multi-language or you don't care to spread literal string anywhere.