eslint-plugin-react-intl-format

eslint-plugin-react-intl-format

This is a plugin to ensure that Intl translations are being made correctly with react-intl. Since they should be stored in an object for translation, this disables plain text between html tags.

There are three options to enable, and we recommend enabling all of them to ensure proper translations in all languages.

The { noTrailingWhitespace: true } option is set by default and is not necessary to declare in the rules section. This is recommended as some languages don't have spaces between words. Additionally, the option ignoreLinks is set to true by default. Depending on your use case, you may want to disable this.

Installation

You'll first need to install ESLint:

$ npm i eslint --save-dev

Next, install eslint-plugin-react-intl-format:

$ npm install eslint-plugin-react-intl-format --save-dev

Note: If you installed ESLint globally (using the -g flag) then you must also install eslint-plugin-react-intl-format globally.

Usage

Add react-intl-format to the plugins section of your .eslintrc configuration file. You can omit the eslint-plugin- prefix:

{
    "plugins": [
        "react-intl-format"
    ]
}

Then configure the rules you want to use under the rules section. Currently there's just one rule: 'missing-formatted-message'.

{
    "rules": {
        "react-intl-format/missing-formatted-message": [2, { noTrailingWhitespace: true, ignoreLinks: true }],
        "react-intl-format/missing-attribute": [2, { noTrailingWhitespace: true }],
        "react-intl-format/missing-values": 2
    }
}

Supported Rules

• missing-formatted-message
• missing-attribute
• missing-values