An ESLint Plugin For Lingui_js

Installation

You'll first need to install ESLint:

npm install --save-dev eslint
# or
yarn add eslint --dev

Next, install eslint-plugin-lingui:

npm install --save-dev eslint-plugin-lingui
# or
yarn add eslint-plugin-lingui --dev

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

Usage

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

{
  "plugins": ["lingui"]
}

Then configure the rules you want to use under the rules section.

{
  "rules": {
    "lingui/no-unlocalized-strings": 2,
    "lingui/t-call-in-function": 2,
    "lingui/no-single-variables-to-translate": 2,
    "lingui/no-expression-in-message": 2,
    "lingui/no-single-tag-to-translate": 2,
    "lingui/no-trans-inside-trans": 2,
    "lingui/text-restrictions": [
      2,
      {
        "rules": [
          {
            "patterns": ["''", "’", "“"],
            "message": "Error message"
          }
        ]
      }
    ]
  }
}

Supported Rules

no-unlocalized-strings

Check that code doesn't contain strings/templates/jsxText what should be wrapped into <Trans> or i18n

Options

ignore

The ignore option specifies exceptions not to check for literal strings that match one of regexp patterns.

Examples of correct code for the { "ignore": ["rgba"] } option:

/*eslint lingui/no-unlocalized-strings ["error", {"ignore": ["rgba"]}]*/
const a = <div color="rgba(100, 100, 100, 0.4)"></div>

ignoreFunction

The ignoreFunction option specifies exceptions not check for function calls whose names match one of regexp patterns.

Examples of correct code for the { "ignoreFunction": ["showIntercomMessage"] } option:

/*eslint lingui/no-unlocalized-strings: ["error", { "ignoreFunction": ["showIntercomMessage"] }]*/
const bar = showIntercomMessage('Please, write me')

ignoreAttribute

The ignoreAttribute option specifies exceptions not to check for JSX attributes that match one of ignored attributes.

Examples of correct code for the { "ignoreAttribute": ["style"] } option:

/*eslint lingui/no-unlocalized-strings: ["error", { "ignoreAttribute": ["style"] }]*/
const element = <div style={{ margin: '1rem 2rem' }} />

By default, the following attributes are ignored: className, styleName, type, id, width, height

ignoreProperty

The ignoreProperty option specifies property names not to check.

Examples of correct code for the { "ignoreProperty": ["text"] } option:

/*eslint lingui/no-unlocalized-strings: ["error", { "ignoreProperty": ["text"] }]*/
const test = { text: 'This is ignored' }

By default, the following properties are ignored: className, styleName, type, id, width, height

t-call-in-function

Check that t calls are inside function. They should not be at the module level otherwise they will not react to language switching.

import { t } from '@lingui/macro'

// nope ⛔️
const msg = t`Hello world!`

// ok ✅
function getGreeting() {
  return t`Hello world!`
}

Check the Lingui Docs for more info.

no-expression-in-message

Check that t` ` doesn't contain member or function expressions like t`Hello ${user.name}` or t`Hello ${getName()}`

Such expressions would be transformed to its index position such as Hello {0} which gives zero to little context for translator.

Use a variable identifier instead.

// nope ⛔️
t`Hello ${user.name}` // => 'Hello {0}'

// ok ✅
const userName = user.name
t`Hello ${userName}` // => 'Hello {userName}'

no-trans-inside-trans

Check that no Trans inside Trans components.

// nope ⛔️
<Trans>Hello <Trans>World!</Trans></Trans>

// ok ✅
<Trans>Hello World!</Trans>

no-single-variables-to-translate

Doesn't allow single variables without text to translate like <Trans>{variable}</Trans> or t`${variable}`

Such expression would pollute message catalog with useless string which has nothing to translate.

text-restrictions

Check that strings/templates/jsxText doesn't contain patterns from the rules.

This rules enforces a consistency rules inside your messages.

Options

rules

rules is array of rules when one rule has structure

{
  "patterns": ["first", "second"],
  "message": "error message"
}

each rule has a structure:

• patterns is an array of regex or strings
• message is an error message that will be displayed if restricting pattern matches text
• flags is a string with regex flags for patterns
• isOnlyForTranslation is a boolean indicating that patterns should be found only inside Trans tags or t tagged template

no-single-tag-to-translate

Ensures <Trans></Trans> isn't wrapping a single element unnecessarily

// nope ⛔️
<Trans><strong>Foo bar</strong></Trans>

// ok ✅
<strong><Trans>Foo bar</Trans></strong>