eslint-plugin-lang2

ESLint plugin for i18n

Installation

npm install eslint-plugin-lang2 --save-dev

Usage

Add lang to the plugins section of your .eslintrc configuration file.

{
  "plugins": ["lang"]
}

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

{
  "rules": {
    "lang/no-literal-string": 2
  }
}

or

{
  "extends": ["plugin:lang/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.

Note: Disable auto-fix because key in the call lang.t(key) ussally was not the same as the literal

Rule Details

It will find out all literal strings and validate them.

Examples of incorrect code for this rule:

/*eslint lang/no-literal-string: "error"*/
const a = 'foo';

Examples of correct code for this rule:

/*eslint lang/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 lang translate function.

Correct code:

/*eslint lang/no-literal-string: "error"*/
var bar = lang.t('bar');
var bar2 = i18n.t('bar');

Maybe you use other internationalization libraries not lang. You can use like this:

/*eslint lang/no-literal-string: ["error", { "ignoreCallee": ["yourI18n"] }]*/
const bar = yourI18n('bar');

// or

/*eslint lang/no-literal-string: ["error", { "ignoreCallee": ["yourI18n.method"] }]*/
const bar = yourI18n.method('bar');

HTML Markup

All literal strings in html template are typically mistakes. For JSX example:

<div>foo</div>

They should be translated by lang translation api:

<div>{lang.t('foo')}</div>

Same for Vue template:

<!-- incorrect -->
<template>
  foo
</template>

<!-- correct -->
<template>
  {{ lang.t('foo') }}
</template>

It would allow most reasonable usages of string that would rarely be shown to user, like following examples.

Click on them to see details.

This plugin are compatible with react-lang

// correct
<Trans>
  <span>bar</span>
</Trans>

This rule also works with those state managers like Redux and Vuex.

Correct code:

var bar = store.dispatch('bar');
var bar2 = store.commit('bar');

This plugin would not complain on those reasonable usages of string.

The following cases are considered as correct:

var a: Type['member'];
var a: Omit<T, 'key'>;
enum E {
  A = 1
}
var a = E['A'];
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 allowed:

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

Options

markupOnly

If markupOnly option turn on, only JSX text and strings used as JSX attributes will be validated.

JSX text:

// incorrect
<div>hello world</div>
<div>{"hello world"}</div>

Strings as JSX attribute:

// incorrect
<div foo="foo"></div>
<div foo={"foo"}></div>

onlyAttribute

Only check the JSX attributes that listed in this option. This option would turn on markupOnly.

// correct
const foo = 'bar';
<div foo="foo"></div>

// incorrect
<div>foo</div>

/*eslint lang/no-literal-string: ["error", {"onlyAttribute": ["foo"]}]*/
// incorrect
<div foo="foo"></div>

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 lang/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 lang/no-literal-string: ["error", { "ignoreCallee": ["foo"] }]*/
const bar = foo('bar');

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": ["foo"] } option:

/*eslint lang/no-literal-string: ["error", { "ignoreAttribute": ["foo"] }]*/
const element = <div foo="bar" />;

ignoreProperty

The ignoreProperty option specifies exceptions not to check for object properties that match one of ignored properties.

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

/*eslint lang/no-literal-string: ["error", { "ignoreProperty": ["foo"] }]*/
const a = { foo: 'bar' };

ignoreComponent

The ignoreComponent option specifies exceptions not to check for string literals inside a list of named components. It includes <Trans> per default.

Examples of correct code for the { "ignoreComponent": ["Icon"] } option:

/*eslint lang/no-literal-string: ["error", { "ignoreComponent": ["Icon"] }]*/
<Icon>arrow<Icon/>

validateTemplate

Indicate whether to validate template strings or not. Default false

/*eslint lang/no-literal-string: ["error", { "validateTemplate": true }]*/
// incorrect
var foo = `hello world`;