eslint-plugin-no-hardcoded-strings 🌐

Forbid rendering hardcoded strings in the JSX tree to encourage proper internationalization.

This plugin helps enforce internationalization best practices by detecting and reporting hardcoded strings in your JSX components that should be translated.

Example

The following examples demonstrate how the plugin works:

// Default configuration (allowedFunctionNames: ["t"])

// Plain text in JSX
<div>Hello world</div> // ❌ throws warning/error (hardcoded string)
<div>{t("hello.world")}</div> // ✅ ok (uses translation function)

// String literals in expressions
<div>{"Hello world"}</div> // ❌ throws warning/error (hardcoded string)

// Function calls with hardcoded strings
<div>{someFunc("Hello world")}</div> // ❌ throws warning/error (hardcoded string in function call)
<div>{t("hello.world")}</div> // ✅ ok (uses allowed translation function)

// Variables with hardcoded strings
const message = "Hello world";
<div>{message}</div> // ❌ throws warning/error (variable resolves to hardcoded string)

const translatedMessage = t("hello.world");
<div>{translatedMessage}</div> // ✅ ok (variable uses translation function)

// Ignored strings (with ignoreStrings: ["OK"])
<button>OK</button> // ✅ ok (string is in the ignored list)

Installation

Via npm:

npm i eslint-plugin-no-hardcoded-strings --save-dev

Via yarn:

yarn add -D eslint-plugin-no-hardcoded-strings

Configuration / Usage

Depending on how you configured your eslint instance, the following configuration might look a bit different.

For example using a json format would require the keys to be in quotes etc.

// .eslintrc.js

module.exports = {
  // ...
  plugins: [
    "no-hardcoded-strings",
    // ... maybe other plugins here ...
  ],
  rules: {
    "no-hardcoded-strings": [
      "warn",
      {
        allowedFunctionNames: ["t", "translate", "i18n"],
        ignoreStrings: ["OK", "Cancel"],
        ignorePatterns: [/^[0-9\s\-:]+$/], // Ignore dates, times, numbers
      },
    ],
    // ... maybe other rules here ...
  },
};

This configuration would make eslint throw warnings whenever a hardcoded string is found in JSX that isn't processed through one of the allowed translation functions (t, translate, or i18n), and isn't in the ignored list or matching the ignored patterns.

Configuration Options

| Option | Type | Default | Description | | ---------------------- | -------- | ------- | ---------------------------------------------------------------- | | allowedFunctionNames | string[] | ["t"] | List of function names that are allowed for internationalization | | ignoreStrings | string[] | [] | List of specific strings to ignore | | ignorePatterns | RegExp[] | [] | List of regex patterns to ignore |

Use Cases

This plugin is particularly useful for:

1. Enforcing internationalization in applications that need to support multiple languages
2. Ensuring all user-visible text is properly translated
3. Preventing developers from accidentally adding hardcoded strings
4. Maintaining consistency in how translations are handled across a codebase