概要

@generaltranslation/react-core-linter 0.1.0 は、General Translation React Core 連携向けの ESLint ルールを提供します。

このプラグインは、実際のプロジェクトで頻出する実装ミスを検出します。

インストール

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

この初期リリースには、次の 2 つのルールが含まれています：

• static-jsx - <T> コンポーネント内での変数の適切なラップを強制します
• static-string - 翻訳関数内で静的な文字列のみを使用することを保証します

静的 JSX 検証

static-jsx ルールは、動的なコンテンツが <T> コンポーネント内に直接含まれることを防ぎます。 動的なコンテンツは、変数コンポーネント で囲む必要があります。

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

// ✅ 正しい  
<T>Hello <Var>{userName}</Var>!</T>

静的文字列の強制

static-string ルールは、翻訳関数が変化しない文字列のみを受け付けることを保証します。

const gt = useGT();

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

// ✅ 正しい
gt('Hello {name}!', { name })

設定

ESLint の設定に以下を追加します：

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

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

この初期リリースでは、React Core の翻訳パターン向けに、基盤的なリンティング機能を提供します。 今後のバージョンでは、ルールのカバー範囲を拡大し、その他の一般的な違反に対する自動修正機能を追加していきます。

関連ドキュメント

• Variable Components - 翻訳で動的コンテンツを扱う
• String Translation - プレーンテキストの文字列を翻訳する