ESLint Plugin React i18n

1.0.3 verified Sat Apr 25 auth: no javascript maintenance

ESLint plugin providing rules to enforce internationalization (i18n) in React applications, with primary support for i18next. Current stable version is 1.0.3 (released December 2019). The plugin includes rules such as 'no-dynamic-translation-keys' and 'no-missing-interpolation-keys' to catch common i18n mistakes. It is designed to be framework-agnostic but focuses on i18next, with openness to PRs for other frameworks. The package is maintained by lolatravel and has a low release cadence (no updates since 2019). Differentiator: focused solely on React i18n enforcement, unlike more general i18n linting tools.

Common errors

error Error: Failed to load plugin 'react-i18n': Cannot find module 'eslint-plugin-react-i18n' ↓

cause Plugin not installed or not in node_modules.

fix

Run npm install eslint-plugin-react-i18n --save-dev

error Definition for rule 'react-i18n/no-dynamic-translation-keys' was not found ↓

cause Rule name misspelled or plugin not configured in plugins section.

fix

Add 'plugins: ["react-i18n"]' to .eslintrc config.

error ESLint configuration error: missing 'eslint' peer dependency ↓

cause ESLint not installed as dev dependency.

fix

Run npm install eslint --save-dev

error No ESLint configuration found ↓

cause No .eslintrc file present.

fix

Create an .eslintrc file (JSON, YAML, JS) and configure the plugin.

Warnings

deprecated Plugin has not been updated since December 2019; may not support modern ESLint (>=7). ↓

fix Consider alternative plugins like eslint-plugin-i18next or custom rules for newer ESLint versions.

breaking ESLint 7+ changed context.getScope() to context.sourceCode.getScope(); plugin may break. ↓

fix If using ESLint 7+, test thoroughly; may need to update plugin or use older ESLint (6.x).

gotcha Rules only support i18next by default; other i18n libraries may not be recognized. ↓

fix Use plugin with i18next or contribute PR for other libraries.

gotcha The 'no-missing-interpolation-keys' rule may not detect all interpolation variants (e.g., nested objects). ↓

fix Manually verify interpolation keys if using complex translation files.

gotcha Plugin requires ESLint as a peer dependency with versions ^3 || ^4 || ^5 || ^6; incompatibility with ESLint 8+. ↓

fix Use ESLint 6.x or lower, or find a maintained fork.

Install

npm install eslint-plugin-react-i18n

yarn add eslint-plugin-react-i18n

pnpm add eslint-plugin-react-i18n

Imports

eslint-plugin-react-i18n
wrong
```
{"plugins": ["eslint-plugin-react-i18n"]}
```
correct
```
// In .eslintrc JSON:
{"plugins": ["react-i18n"]}
```
ESLint automatically strips 'eslint-plugin-' prefix from plugin names.

react-i18n/no-dynamic-translation-keys

wrong

{"no-dynamic-translation-keys": "error"}

correct

// In .eslintrc rules:
{"react-i18n/no-dynamic-translation-keys": "error"}

Rule names must include the plugin prefix without 'eslint-plugin-'.

react-i18n/no-missing-interpolation-keys

wrong

{"react-i18n/no-missing-interpolation-keys": ["error", {...}]}

correct

// In .eslintrc rules:
{"react-i18n/no-missing-interpolation-keys": "error"}

This rule currently expects no options; configuration options may not be supported.

Quickstart

Setup ESLint with react-i18n plugin and recommended config, plus example of rule enforcement.

// Install ESLint and plugin:
// npm i -D eslint eslint-plugin-react-i18n

// .eslintrc.js
module.exports = {
  plugins: ['react-i18n'],
  extends: ['plugin:react-i18n/recommended'],
  rules: {
    'react-i18n/no-dynamic-translation-keys': 'error',
    'react-i18n/no-missing-interpolation-keys': 'error',
  },
};

// Example React component with i18next:
import { useTranslation } from 'react-i18next';

function MyComponent() {
  const { t } = useTranslation();
  // Bad: dynamic key
  const key = 'greeting';
  return <div>{t(key)}</div>; // no-dynamic-translation-keys warns
  // Good: static string key
  return <div>{t('greeting')}</div>;
}