Set of eslint rules for Lingui projects
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.
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"
}
]
}
]
}
}
Check that code doesn't contain strings/templates/jsxText what should be wrapped into <Trans>
or i18n
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>
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')
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
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
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.
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}'
Check that no Trans
inside Trans
components.
// nope ⛔️
<Trans>Hello <Trans>World!</Trans></Trans>
// ok ✅
<Trans>Hello World!</Trans>
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.
Check that strings/templates/jsxText doesn't contain patterns from the rules.
This rules enforces a consistency rules inside your messages.
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 stringsmessage
is an error message that will be displayed if restricting pattern matches textflags
is a string with regex flags for patternsisOnlyForTranslation
is a boolean indicating that patterns should be found only insideTrans
tags ort
tagged template
Ensures <Trans></Trans>
isn't wrapping a single element unnecessarily
// nope ⛔️
<Trans><strong>Foo bar</strong></Trans>
// ok ✅
<strong><Trans>Foo bar</Trans></strong>