### Install ESLint Plugin i18next

Source: https://context7.com/edvardchen/eslint-plugin-i18next/llms.txt

Install the plugin as a dev dependency using npm or pnpm.

```bash
npm install eslint-plugin-i18next --save-dev
# or
pnpm add -D eslint-plugin-i18next
```

--------------------------------

### Install eslint-plugin-i18next

Source: https://github.com/edvardchen/eslint-plugin-i18next/blob/main/README.md

Install the plugin as a development dependency using npm.

```bash
npm install eslint-plugin-i18next --save-dev
```

--------------------------------

### Exclude/Include Regex Examples

Source: https://github.com/edvardchen/eslint-plugin-i18next/blob/main/docs/rules/no-literal-string.md

Demonstrates how to use regular expressions with `exclude` and `include` options to control which literal strings are validated. Both conditions must be met if both are specified.

```js
method('afoo');
const message = 'foob';

<Component value="foo" />;
```

--------------------------------

### Callee Exclusion Example

Source: https://github.com/edvardchen/eslint-plugin-i18next/blob/main/docs/rules/no-literal-string.md

Demonstrates the `callees` option, where excluding specific function calls like `window.open` permits literal strings as arguments for those functions.

```js
window.open('http://example.com');
```

--------------------------------

### Example of 'words.exclude' Functionality

Source: https://context7.com/edvardchen/eslint-plugin-i18next/llms.txt

Strings matching patterns in `words.exclude`, such as URLs, are allowed even when `mode: 'all'` is active.

```jsx
/*eslint i18next/no-literal-string: ["error", { "mode": "all", "words": { "exclude": ["^https?://"] } }]*/

// ✅ OK — matches the URL exclusion pattern
window.open('https://example.com');

// ❌ Error — does not match any exclusion
const msg = 'Welcome back';
```

--------------------------------

### Use i18next.t for Translations

Source: https://github.com/edvardchen/eslint-plugin-i18next/blob/main/README.md

This example shows the correct usage where a translated string key is used with i18next.t(). The 'no-literal-string' rule allows this.

```javascript
/*eslint i18next/no-literal-string: "error"*/
<div>{i18next.t('HELLO_KEY')}</div>
```

--------------------------------

### Example: Validating Template Literals

Source: https://context7.com/edvardchen/eslint-plugin-i18next/llms.txt

Shows how enabling `'should-validate-template'` flags literal strings within template literals, encouraging translation usage instead.

```jsx
/*eslint i18next/no-literal-string: ["error", { "mode": "all", "should-validate-template": true }]*/

// ❌ Error — static text in template literal is flagged
const msg = `Welcome back, ${username}!`;

// ✅ OK — use translation with interpolation
const msg = t('welcomeBack', { name: username });
```

--------------------------------

### Class Property Exclusion Example

Source: https://github.com/edvardchen/eslint-plugin-i18next/blob/main/docs/rules/no-literal-string.md

Illustrates the `class-properties` option, where excluding properties like `displayName` by default allows literal strings for those properties.

```js
class My extends Component {
    displayName = 'MyComponent';
  }
```

--------------------------------

### Example: `callees.exclude` in Action

Source: https://context7.com/edvardchen/eslint-plugin-i18next/llms.txt

Demonstrates how `callees.exclude` prevents linting errors for excluded function calls like `new Error()` and `console.error()`.

```jsx
/*eslint i18next/no-literal-string: ["error", { "mode": "all", "callees": { "exclude": ["Error", "console\..*"] } }]*/

// ✅ OK — Error constructor is excluded
throw new Error('Something went wrong internally');

// ✅ OK — console is excluded
console.error('debug: unexpected state');

// ❌ Error — alert() is not excluded
alert('Please fill in the form');
```

--------------------------------

### Example of 'mode: all' Validation

Source: https://context7.com/edvardchen/eslint-plugin-i18next/llms.txt

When `mode: 'all'` is enabled, strings in both JS expressions and JSX attributes are flagged unless translated.

```jsx
/*eslint i18next/no-literal-string: ["error", { "mode": "all" }]*/

// ❌ Error — string in JS expression
const greeting = 'Hello';

// ❌ Error — string in JSX attribute
const El = () => <button aria-label="Submit form">Click</button>;

// ✅ OK — translated
const El2 = () => (
  <button aria-label={t('submitForm.ariaLabel')}>{t('submitForm.label')}</button>
);
```

--------------------------------

### Avoid Literal Strings in JSX

Source: https://github.com/edvardchen/eslint-plugin-i18next/blob/main/README.md

This example shows incorrect usage where a literal string is displayed directly. The 'no-literal-string' rule flags this.

```javascript
/*eslint i18next/no-literal-string: "error"*/
<div>hello world</div>
```

--------------------------------

### Object Property Exclusion Example

Source: https://github.com/edvardchen/eslint-plugin-i18next/blob/main/docs/rules/no-literal-string.md

Explains the `object-properties` option, showing how excluding certain property keys (e.g., `fieldName`) allows literal strings for those keys while validating others (e.g., `label`).

```js
const fieldConfig = {
    fieldName: 'currency_code',
    label: 'Currency',
  };
```

--------------------------------

### JSX Component Exclusion Example

Source: https://github.com/edvardchen/eslint-plugin-i18next/blob/main/docs/rules/no-literal-string.md

Shows how the `jsx-components` option, with `Trans` excluded by default, allows literal strings as children within specific components like `Trans`.

```jsx
<Trans i18nKey="greeting">Hello World</Trans>
```

--------------------------------

### JSX Attribute Exclusion Example

Source: https://github.com/edvardchen/eslint-plugin-i18next/blob/main/docs/rules/no-literal-string.md

Illustrates the `jsx-attributes` option, where excluding attributes like `data-testid` allows literal strings in those specific attributes.

```jsx
<button data-testid="important-button" onClick={handleClick}>
    {t('importantButton.label')}
  </button>
```

--------------------------------

### Disallow Literal String in JSX

Source: https://github.com/edvardchen/eslint-plugin-i18next/blob/main/docs/rules/no-literal-string.md

This example shows how to configure the rule to disallow literal strings directly within JSX elements. Use this to ensure all user-facing text is translatable.

```jsx
/*eslint i18next/no-literal-string: "error"*/
<div>hello world</div>
```

```jsx
/*eslint i18next/no-literal-string: "error"*/
<div>{i18next.t('HELLO_KEY')}</div>
```

--------------------------------

### Configure ESLint 8 and Below (Legacy .eslintrc)

Source: https://context7.com/edvardchen/eslint-plugin-i18next/llms.txt

Use the `plugin:i18next/recommended` shareable config for older ESLint versions.

```json
// .eslintrc
{
  "extends": ["plugin:i18next/recommended"],
  "rules": {
    "i18next/no-literal-string": ["error", { "mode": "all" }]
  }
}
```

--------------------------------

### Configure ESLint 9 Flat Configuration

Source: https://github.com/edvardchen/eslint-plugin-i18next/blob/main/README.md

Configure ESLint using the flat configuration system by importing the plugin and extending its recommended configuration.

```javascript
// eslint.config.mjs
import i18next from 'eslint-plugin-i18next';

export default [
  // your other configs
  i18next.configs['flat/recommended'],
];
```

--------------------------------

### Configure ESLint 8 and Below

Source: https://github.com/edvardchen/eslint-plugin-i18next/blob/main/README.md

Configure ESLint for versions 8 and below by extending the plugin's recommended configuration in your .eslintrc file.

```json
// .eslintrc
{
  "extends": ["plugin:i18next/recommended"]
}
```

--------------------------------

### Configure Vue Framework Support

Source: https://context7.com/edvardchen/eslint-plugin-i18next/llms.txt

Enable Vue framework support by setting `framework: 'vue'` and using `vue-eslint-parser`. The `vue-template-only` mode restricts linting to template content.

```javascript
// eslint.config.mjs
import vueParser from 'vue-eslint-parser';
import i18next from 'eslint-plugin-i18next';

export default [
  {
    files: ['**/*.vue'],
    languageOptions: { parser: vueParser },
    plugins: { i18next: i18next },
    rules: {
      'i18next/no-literal-string': [
        'error',
        {
          framework: 'vue',
          mode: 'vue-template-only', // only lint inside <template>
          'jsx-attributes': { exclude: ['string-prop'] },
        },
      ],
    },
  },
];
```

```vue
<!-- ✅ OK — translated in template -->
<template>{{ i18next.t('abc') }}</template>

<!-- ❌ Error — bare string in template -->
<template>abc</template>

<!-- ❌ Error — string in mustaches expression -->
<template>{{ "hello world" }}</template>

<!-- ✅ OK — string-prop attribute excluded -->
<template>
  <myVueComponent string-prop="this is fine"></myVueComponent>
</template>
```

--------------------------------

### Configure ESLint 9+ Flat Config

Source: https://context7.com/edvardchen/eslint-plugin-i18next/llms.txt

Register the plugin and extend the recommended flat config for ESLint 9+. This enables the `i18next/no-literal-string` rule at error severity.

```javascript
// eslint.config.mjs
import globals from 'globals';
import pluginJs from '@eslint/js';
import i18next from 'eslint-plugin-i18next';

export default [
  {
    languageOptions: { globals: globals.browser },
    linterOptions: { reportUnusedDisableDirectives: 'error' },
  },
  pluginJs.configs.recommended,
  i18next.configs['flat/recommended'], // enables i18next/no-literal-string as error
  {
    // override mode for stricter validation
    rules: { 'i18next/no-literal-string': ['error', { mode: 'all' }] },
  },
];
```

--------------------------------

### Configure TypeScript Support

Source: https://context7.com/edvardchen/eslint-plugin-i18next/llms.txt

Integrate with TypeScript by using `@typescript-eslint/parser`. The plugin understands TypeScript string literal and union types, automatically allowing variables typed as specific string literals.

```javascript
// eslint.config.mjs
import tsParser from '@typescript-eslint/parser';
import i18next from 'eslint-plugin-i18next';

export default [
  {
    files: ['**/*.ts', '**/*.tsx'],
    languageOptions: {
      parser: tsParser,
      parserOptions: {
        project: './tsconfig.json',
      },
    },
    plugins: { i18next },
    rules: {
      'i18next/no-literal-string': ['error', { mode: 'all' }],
    },
  },
];
```

```typescript
// ✅ OK — TypeScript string literal type: value is constrained to 'asc'
const direction: 'asc' = 'asc';

// ✅ OK — union type: value is constrained to 'asc' | 'desc'
const sort: 'asc' | 'desc' = 'desc';

// ❌ Error — general string type, value is user-facing
let greeting: string;
greeting = 'Hello';

// ✅ OK — className is excluded by default
const El = () => <div className="container">{t('content')}</div>;
```

--------------------------------

### Configure `class-properties.exclude` for Class Property Values

Source: https://context7.com/edvardchen/eslint-plugin-i18next/llms.txt

Use `class-properties.exclude` to allow literal strings as values for specific class property names. `displayName` is excluded by default.

```javascript
/*eslint i18next/no-literal-string: ["error", { "mode": "all", "class-properties": { "exclude": ["displayName", "propTypes"] } }]*/

// ✅ OK — displayName is excluded by default
class MyComponent extends Component {
  displayName = 'MyComponent';
}

// ❌ Error — 'title' is not excluded
class MyPage extends Component {
  title = 'Home Page';
}
```

--------------------------------

### Configure `object-properties.exclude` for Object Property Values

Source: https://context7.com/edvardchen/eslint-plugin-i18next/llms.txt

Use `object-properties.exclude` to allow literal strings as values for specific object property keys. The array is matched against the property key name.

```javascript
/*eslint i18next/no-literal-string: ["error", { "mode": "all", "object-properties": { "exclude": ["fieldName", "type", "name"] } }]*/

// ✅ OK — 'fieldName' and 'type' keys are excluded
const fieldConfig = {
  fieldName: 'currency_code',
  type: 'text',
  label: t('Currency'),      // 'label' is not excluded → must be translated
};

// Using include to validate ONLY specific property keys:
// object-properties: { include: ['label'] }
// → only values of "label" properties are linted
```

--------------------------------

### Exclude Strings by Content Pattern with 'words.exclude'

Source: https://context7.com/edvardchen/eslint-plugin-i18next/llms.txt

Use the `words.exclude` option with an array of regular expression strings to allow specific patterns of strings everywhere, regardless of context.

```javascript
// eslint.config.mjs
export default [
  i18next.configs['flat/recommended'],
  {
    rules: {
      'i18next/no-literal-string': [
        'error',
        {
          mode: 'all',
          words: {
            // allow strings that are purely numeric, symbols, or match custom patterns
            exclude: [
              '[0-9!-/:-@[-`{-~]+', // punctuation / numbers (default)
              '[A-Z_-]+',            // UPPER_CASE constants (default)
              '.*foo.*',             // any string containing "foo"
              '^https?://',          // URLs
            ],
          },
        },
      ],
    },
  },
];
```

--------------------------------

### Configure `jsx-attributes.exclude` for JSX Attributes

Source: https://context7.com/edvardchen/eslint-plugin-i18next/llms.txt

Use `jsx-attributes.exclude` to control which attribute names are allowed to contain literal string values. Default exclusions include `className`, `style`, and `key`.

```jsx
/*eslint i18next/no-literal-string: ["error", { "mode": "jsx-only", "jsx-attributes": { "exclude": ["data-testid", "aria-hidden", "className"] } }]*/

// ✅ OK — data-testid excluded
<button data-testid="submit-btn">{t('submit')}</button>

// ✅ OK — aria-hidden excluded
<span aria-hidden="true" />

// ❌ Error — aria-label is NOT excluded
<button aria-label="Close dialog">{t('close')}</button>

// Fix:
<button aria-label={t('closeDialog.ariaLabel')}>{t('close')}</button>
```

--------------------------------

### TypeScript Schema for Rule Options

Source: https://github.com/edvardchen/eslint-plugin-i18next/blob/main/docs/rules/no-literal-string.md

This TypeScript schema defines the available options for the no-literal-string rule, including configuration for words, JSX components, attributes, callees, object properties, and class properties.

```typescript
type MySchema = {
  [key in
    | 'words'
    | 'jsx-components'
    | 'jsx-attributes'
    | 'callees'
    | 'object-properties'
    | 'class-properties']?: {
    include?: string[];
    exclude?: string[];
  };
} & {
  framework: 'react' | 'vue';
  mode?: 'jsx-text-only' | 'jsx-only' | 'all' | 'vue-template-only';
  message?: string;
  'should-validate-template'?: boolean;
};
```

--------------------------------

### Enable Validation for Template Literals

Source: https://context7.com/edvardchen/eslint-plugin-i18next/llms.txt

Set `'should-validate-template': true` to enable linting of static string parts within template literals (`` `string` ``).

```javascript
rules: {
  'i18next/no-literal-string': [
    'error',
    {
      mode: 'all',
      'should-validate-template': true,
    },
  ],
},
```

--------------------------------

### Configure `jsx-components.exclude` for React/Vue Components

Source: https://context7.com/edvardchen/eslint-plugin-i18next/llms.txt

Use `jsx-components.exclude` to exempt specific React or Vue component names from literal string validation for their children. `Trans` is excluded by default.

```jsx
/*eslint i18next/no-literal-string: ["error", { "jsx-components": { "exclude": ["Trans", "Icon", "Icon\..*"] } }]*/

// ✅ OK — Trans is excluded by default
<Trans i18nKey="greeting">Hello World</Trans>

// ✅ OK — Icon and Icon.Arrow are excluded via custom config
<Icon>arrow-right</Icon>
<Icon.Arrow>up</Icon.Arrow>

// ❌ Error — span is not excluded
<span>hello</span>

// Using include to enforce validation ONLY on specific components:
// jsx-components: { include: ['p'] }
// → only <p> children are validated; all other component children pass
```

--------------------------------

### Control Validation Scope with 'mode: all'

Source: https://context7.com/edvardchen/eslint-plugin-i18next/llms.txt

Configure the rule to validate all literal strings, including those in JSX attributes and JavaScript/TypeScript code, by setting `mode: 'all'`.

```javascript
// eslint.config.mjs — validate ALL literal strings (strictest)
export default [
  i18next.configs['flat/recommended'],
  {
    rules: {
      'i18next/no-literal-string': ['error', { mode: 'all' }],
    },
  },
];
```

--------------------------------

### Configure `callees.exclude` to Ignore Specific Function Calls

Source: https://context7.com/edvardchen/eslint-plugin-i18next/llms.txt

Use `callees.exclude` to specify function calls that should be ignored by the literal string validation. This supports regex for broader matching.

```javascript
rules: {
  'i18next/no-literal-string': [
    'error',
    {
      mode: 'all',
      callees: {
        // default excluded callees (always ignored):
        // 'i18n(ext)?', 't', 'require', 'addEventListener',
        // 'removeEventListener', 'postMessage', 'getElementById',
        // 'dispatch', 'commit', 'includes', 'indexOf', 'endsWith', 'startsWith'

        // additional exclusions:
        exclude: [
          'Error',          // new Error('message') — constructors also matched
          'console\..*',   // console.log(), console.warn(), etc.
          'foo\.bar',      // foo.bar('string')
          'window\.open',  // window.open('url')
        ],
      },
    },
  ],
},
```

--------------------------------

### JSX Text Validation (Default Mode)

Source: https://context7.com/edvardchen/eslint-plugin-i18next/llms.txt

In default mode (`mode: 'jsx-text-only'`), the rule flags plain text content within JSX elements. Strings outside JSX are ignored.

```jsx
/*eslint i18next/no-literal-string: "error"*/

// ❌ Error: disallow literal string: <div>hello world</div>
const Bad = () => <div>hello world</div>;

// ✅ OK — translated via i18next.t()
const Good = () => <div>{i18next.t('HELLO_KEY')}</div>;

// ✅ OK — string outside JSX is not flagged in default mode
const apiUrl = 'https://api.example.com';
```

--------------------------------

### Override Default Error Message

Source: https://context7.com/edvardchen/eslint-plugin-i18next/llms.txt

Customize the error message for literal strings found outside translation functions. This helps provide more specific feedback to developers.

```javascript
rules: {
  'i18next/no-literal-string': [
    'error',
    {
      message: 'All user-facing text must be wrapped in t()',
    },
  ],
}
```

```jsx
// ESLint output with custom message:
// error  All user-facing text must be wrapped in t(): <p>Hello</p>
const El = () => <p>Hello</p>;
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.