eslint-plugin-react-intl

1.1.2 verified Sat Apr 25 auth: no javascript abandoned

ESLint plugin providing linting rules for react-intl internationalization. Includes rules like string-is-marked-for-translation (catches untranslated strings in FormattedMessage components) and is-valid-icu-message-syntax (validates ICU message syntax in defaultMessage). Works with react-intl 2.0 and ESLint 1.x/2.x. No updates since v1.1.2 (2016); essentially abandoned.

Common errors

error Error: Cannot find module 'eslint-plugin-react-intl' ↓

cause Plugin not installed or missing from node_modules.

fix

Run: npm install eslint-plugin-react-intl --save-dev

error ESLint configuration error: The rule 'string-is-marked-for-translation' is not configured. ↓

cause Rule used without 'react-intl/' prefix or plugin not specified.

fix

Ensure plugin is in 'plugins' array and rules are prefixed: "react-intl/string-is-marked-for-translation": "error"

error Parsing error: Unexpected token < ↓

cause ESLint not configured to parse JSX.

fix

Add parserOptions: { ecmaFeatures: { jsx: true } } to .eslintrc (ESLint 2+)

Warnings

gotcha Rules are only tested with react-intl 2.0; may not work with later versions. ↓

fix Use with react-intl@2.x only. Consider migration to formatjs/eslint-plugin-formatjs for newer react-intl.

gotcha Plugin is not maintained; no updates since 2016. ESLint 1.x/2.x configuration (ecmaFeatures/jsx) may be outdated for modern ESLint. ↓

fix Use eslint-plugin-formatjs instead for maintained react-intl linting.

Install

npm install eslint-plugin-react-intl

yarn add eslint-plugin-react-intl

pnpm add eslint-plugin-react-intl

Imports

plugin

wrong

use eslint-plugin-react-intl as a rule directly

correct

plugins: ['react-intl']

Load as a plugin in .eslintrc, not a rule.

rule: string-is-marked-for-translation

wrong

"string-is-marked-for-translation": "error"

correct

"react-intl/string-is-marked-for-translation": "error"

Rules are namespaced under 'react-intl/'.

rule: is-valid-icu-message-syntax

wrong

"is-valid-icu-message-syntax": "error"

correct

"react-intl/is-valid-icu-message-syntax": "error"

Same namespace requirement.

Quickstart

Demonstrates plugin setup in .eslintrc and a React component that triggers the string-is-marked-for-translation rule.

// Install: npm install eslint eslint-plugin-react-intl
// .eslintrc.json
{
  "plugins": ["react-intl"],
  "rules": {
    "react-intl/string-is-marked-for-translation": "error",
    "react-intl/is-valid-icu-message-syntax": "error"
  }
}

// Example component
import { FormattedMessage } from 'react-intl';

function MyComponent() {
  return (
    <div>
      <FormattedMessage id="greeting" defaultMessage="Hello, {name}!" values={{ name: 'World' }} />
      <span>Untranslated string</span>  <!-- this will trigger error -->
    </div>
  );
}