@m6web/eslint-plugin-i18n

This is an eslint plugin for i18n in a react application. This plugin provides you with a set of rules to check the correct use of the translation keys but also forces you not to introduce untranslated texts in your React components.

Installation

yarn add -D @m6web/eslint-plugin-i18n

Build

yarn build

Rules

• @m6web/i18n/no-unknown-key: Verify that all translation keys you use are present in your primary translation files.
• @m6web/i18n/no-unknown-key-secondary-langs: Same as the previous one. Allow you to have a different error level for secondary languages.
• @m6web/i18n/no-text-as-children: Verify that you have no text children in your react code.
• @m6web/i18n/no-text-as-attribute: Verify that you have no text in some attributes in your react components. List of attributes as to be provided in the config.
• @m6web/i18n/interpolation-data: Checks for usage of keys containing string interpolation, if translate function is called without interpolation data it will show an error. Also if interpolation data is given and key doesn't contain interpolation it will also show an error. interpolationPattern option is required to match interpolation in your translation file.

Config

You have to add the following lines in your .eslintrc file to configure this plugin:

  // Declare the plugin
  "plugins": [
    "@m6web/i18n"
  ],
  // Specify rules severity
  "rules": {
    "@m6web/i18n/no-unknown-key": "error",
    "@m6web/i18n/no-unknown-key-secondary-langs": "warn",
    "@m6web/i18n/no-text-as-children": ["error", {"ignorePattern": "^\\s?[/.]\\s?$"}],
    "@m6web/i18n/no-text-as-attribute": ["error", {"attributes": ["alt", "title"]}],
    "@m6web/i18n/interpolation-data": ["error", { "interpolationPattern": "\\{\\.+\\}" }]
  },
  // The plugin needs jsx feature to be on for 'no-text-as-children' rule
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    }
  },
  // Settings of your translation
  "settings": {
    "i18n": {
      // Your principal languages used in 'no-unknown-key' rule
      "principalLangs": [
        {
          "name": "fr",
          "translationPath": "i18n/fr.json"
        }
      ],
      // Secondary languages used in 'no-unknown-key-secondary-langs' rule
      "secondaryLangs": [
        {
          "name": "en",
          "translationPath": "i18n/en.json"
        }
      ],
      // Name of your translate function
      "functionName": "t",
      // If you want to ignore specific files
      "ignoreFiles": ["**/*.spec.js", "**/*.int.js"],
      // If you have pluralization
      "pluralizedKeys": ["one", "other"],
      // TTL of the translations file caching (defaults to 500ms)
      "translationsCacheTTL": 300
    }
  }