ESLint plugin for i18n
$ npm install eslint-plugin-i18next --save-dev
Add i18next
to the plugins section of your .eslintrc
configuration file.
{
"plugins": ["i18next"]
}
Then configure the rules you want to use under the rules section.
{
"rules": {
"i18next/no-literal-string": 2
}
}
or
{
"extends": ["plugin:i18next/recommended"]
}
This rule aims to avoid developers to display literal string to users in those projects which need to support multi-language.
Note: Disable auto-fix because key in the call
i18next.t(key)
usually was not the same as the literal
It will find out all literal strings and validate them.
Examples of incorrect code for this rule:
/*eslint i18next/no-literal-string: "error"*/
const a = 'foo';
Examples of correct code for this rule:
/*eslint i18next/no-literal-string: "error"*/
// safe to assign string to const variables whose name are UPPER_CASE
var FOO = 'foo';
// UPPER_CASE properties are valid no matter if they are computed or not
var a = {
BAR: 'bar',
[FOO]: 'foo'
};
// also safe to use strings themselves are UPPCASE_CASE
var foo = 'FOO';
This rule allows to call i18next translate function.
Correct code:
/*eslint i18next/no-literal-string: "error"*/
var bar = i18next.t('bar');
var bar2 = i18n.t('bar');
Maybe you use other internationalization libraries not i18next. You can use like this:
/*eslint i18next/no-literal-string: ["error", { "ignoreCallee": ["yourI18n"] }]*/
const bar = yourI18n('bar');
// or
/*eslint i18next/no-literal-string: ["error", { "ignoreCallee": ["yourI18n.method"] }]*/
const bar = yourI18n.method('bar');
All literal strings in html template are typically mistakes. For JSX example:
<div>foo</div>
They should be translated by i18next translation api:
<div>{i18next.t('foo')}</div>
Same for Vue template:
<!-- incorrect -->
<template>
foo
</template>
<!-- correct -->
<template>
{{ i18next.t('foo') }}
</template>
This rule also works with those state managers like Redux and Vuex.
Correct code:
/*eslint i18next/no-literal-string: "error"*/
var bar = store.dispatch('bar');
var bar2 = store.commit('bar');
The following cases are correct:
// skip TSLiteralType
var a: Type['member'];
var a: Omit<T, 'key'>;
// skip literal with LiteralType
var a: { t: 'button' } = { t: 'button' };
var a: 'abc' | 'name' = 'abc';
We require type information to work properly, so you need to add some options in your .eslintrc
:
"parserOptions": {
// path of your tsconfig.json
"project": "./tsconfig.json"
}
See here for more deteils.
The following cases are correct:
import mod from 'm';
import('mod');
require('mod');
export { named } from 'm';
export * from 'm';
String comparison is fine.
// correct
name === 'Android' || name === 'iOS';
Skip switchcase statement:
// correct
switch (type) {
case 'foo':
break;
case 'bar':
break;
}
The ignore
option specifies exceptions not to check for
literal strings that match one of regexp paterns.
Examples of correct code for the { "ignore": ['foo'] }
option:
/*eslint i18next/no-literal-string: ["error", {"ignore": ["foo"]}]*/
const a = 'afoo';
THe ignoreCallee
option speficies exceptions not check for
function calls whose names match one of regexp patterns.
Examples of correct code for the { "ignoreCallee": ["foo"] }
option:
/*eslint i18next/no-literal-string: ["error", { "ignoreCallee": ["foo"] }]*/
const bar = foo('bar');