eslint-plugin-i18next

For any selector option (like words, callees, etc.), you can use include and exclude to control validation. These fields accept arrays of strings treated as regular expressions.

Logic Rules:

1. If both include and exclude are provided, a match must satisfy both conditions to be validated/ignored.
2. If both are provided, the string will be validated (subject to the regex logic).

Example: words selector If you add .*foo.* to the exclude list, any string containing 'foo' will be allowed regardless of where it appears:

method('afoo'); // Allowed
const message = 'foob'; // Allowed
<Component value="foo" /> // Allowed

The mode option determines the scope of the rule's validation. This is dependent on the framework setting.

• jsx-text-only (Default for react): Only forbids plain text inside JSX markup (e.g., <div>text</div>).
• jsx-only (Available for react): Validates both JSX text and JSX attribute values.
• all (Available for react and vue): Validates all literal strings across the codebase.
• vue-template-only (Available for vue): Only validates the template part of Vue components.

Install the plugin as a development dependency using npm:

npm install eslint-plugin-i18next --save-dev

To prevent the rule from incorrectly flagging TypeScript-specific usages (like type members, enums, or union types), you must provide type information to ESLint by configuring parserOptions.project in your .eslintrc.

// In your .eslintrc
"parserOptions": {
  "project": "./tsconfig.json"
}

To use the recommended configuration in ESLint 9 using the flat config format, import the plugin and include i18next.configs['flat/recommended'] in your configuration array.

// eslint.config.mjs
import i18next from 'eslint-plugin-i18next';

export default [
  // your other configs
  i18next.configs['flat/recommended'],
];

For older versions of ESLint, extend the recommended plugin configuration in your .eslintrc file.

// .eslintrc
{
  "extends": ["plugin:i18next/recommended"]
}

To use the plugin, add i18next to your .eslintrc plugins array. You can then either configure specific rules manually or extend the recommended configuration.

{
  "plugins": ["i18next"],
  "rules": {
    "i18next/no-literal-string": 2
  }
}

Or use the recommended preset:

{
  "extends": ["plugin:i18next/recommended"]
}

Install the plugin as a development dependency using npm.

npm install eslint-plugin-i18next --save-dev

When markupOnly is set to true, the rule only validates JSX text content and strings used as JSX attributes. This is useful if you want to ignore literal strings in standard JavaScript logic and only focus on UI templates.

/*eslint i18next/no-literal-string: ["error", { "markupOnly": true }]*/

// Incorrect (flagged):
<div>hello world</div>
<div foo="foo"></div>

If you use an internationalization library other than i18next, you can prevent the rule from flagging its function calls using the ignoreCallee option. This option accepts an array of regexp patterns.

// Ignore a single function name
/*eslint i18next/no-literal-string: ["error", { "ignoreCallee": ["yourI18n"] }]*/
const bar = yourI18n('bar');

// Ignore a specific method on an object
/*eslint i18next/no-literal-string: ["error", { "ignoreCallee": ["yourI18n.method"] }]*/
const bar2 = yourI18n.method('bar');

The onlyAttribute option enables markupOnly mode but restricts validation to a specific list of JSX attributes. This is useful when you only want to ensure certain props (like label or placeholder) are translated.

/*eslint i18next/no-literal-string: ["error", {"onlyAttribute": ["foo"]}]*/

// Incorrect (flagged):
<div foo="foo"></div>

// Correct (ignored):
<div other="bar"></div>