戻る

@generaltranslation/react-core-linter@0.1.0

Ernest McCarter avatarErnest McCarter
react-core-linter0.1.0eslintlintingstatic-validation

概要

@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> コンポーネント内に直接含まれないようにします。 動的なコンテンツは、変数コンポーネントでラップする必要があります。

// ❌ 誤り
<T>Hello {userName}!</T>

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

静的文字列の適用

static-string ルールは、翻訳関数が不変の文字列のみを受け取るようにします。

const gt = useGT();

// ❌ 誤り
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 の翻訳パターンに対する基本的な linting 機能を提供します。 今後のバージョンでは、対応するルールの範囲を広げるとともに、その他の一般的な違反に対する自動修正も追加する予定です。

関連情報