no-literal-string.md

disallow literal string (no-literal-string)

This rule aims to avoid developers to display literal string directly to users without translating them.

Rule Details

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>

Options

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;
};

exclude and include

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.

1. If both are used, both conditions need to be satisfied
2. If both are emitted, it will be validated

Option words

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" />;

Selector options

• jsx-components decides whether literal strings as children within a component are allowed, based on the component name

  e.g. by default, Trans is excluded, so Hello 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 attribute

  e.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 called

  e.g. if window.open is excluded, http://example.com in the following is allowed

  window.open('http://example.com');

  callees also covers object constructors, such as new Error('string') or new URL('string')

• object-properties decides whether literal strings are allowed as object property values, based on the property key

  e.g. if fieldName is excluded but label is not, currency_code is allowed but Currency 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 key

  e.g. by default, displayName is excluded, so MyComponent is allowed

  class My extends Component {
    displayName = 'MyComponent';
  }

Other options

• mode provides a straightforward way to decides the range you want to validate literal strings. It defaults to jsx-text-only which only forbids to write plain text in JSX markup
  • jsx-only validates the JSX attributes as well
  • all validates all literal strings
• message defines the custom error message
• should-validate-template decides if we should validate the string templates

You can see the default options here

When Not To Use It

Your project maybe not need to support multi-language or you don't care to spread literal string anywhere.