eslint-plugin-i18next

eslint-plugin-i18next

ESLint plugin for i18n

Installation

$ npm install eslint-plugin-i18next --save-dev

Usage

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"]
}

Rule no-literal-string

This rule aims to avoid developers to display literal string to users in those projects which need to support multi-language.

The --fix option on the command line can automatically fix some of the problems reported by this rule.

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>

For plain javascript, literal strings that are not constant string (all characters are UPPERCASE) are disallowed:

// incorrect
const foo = 'foo';

// correct
const foo = i18next.t('foo');

It is all right to use UPPERCASE string in javascript:

// correct
const foo = 'FOO';

Rule Details

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';

i18n

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');

Redux/Vuex

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');

Options

ignore

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';

ignoreCallee

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');

Changelog

1.1.3 (2019-04-08)

Bug Fixes

• disallow uppercase strings in JSX (715cba4)