Overview

@generaltranslation/react-core-linter 0.1.0 introduces ESLint rules for General Translation React Core integration.

This plugin catches common implementation errors that we have seen in the wild.

Installation

npm install @generaltranslation/react-core-linter --save-dev

Two rules are included in this initial release:

• static-jsx - Enforces proper variable wrapping in <T> components
• static-string - Ensures static strings in translation functions

Static JSX Validation

The static-jsx rule prevents dynamic content from appearing directly inside <T> components. Dynamic content must be wrapped in variable components.

// ❌ Wrong
<T>Hello {userName}!</T>

// ✅ Correct  
<T>Hello <Var>{userName}</Var>!</T>

Static String Enforcement

The static-string rule ensures translation functions only accept non-changing strings.

const gt = useGT();

// ❌ Wrong
gt(`Hello ${name}`)
gt('Hello ' + name)

// ✅ Correct
gt('Hello {name}!', { name })

Configuration

Add to your ESLint config:

import { defineConfig } from 'eslint';
import gtLint from '@generaltranslation/react-core-linter';

export default defineConfig([
  gtLint.configs.recommended,
]);

This initial release provides foundational linting capabilities for React Core translation patterns. Future versions will expand rule coverage and add auto-fixing for other common violations.

Further reading

• Variable Components - Handle dynamic content in translations
• String Translation - Translate plain text strings