gt-next Lint

gt-next コンポーネント用の ESLint プラグイン。

GT Next Lint

これはアルファ版です。内容は今後変更される可能性があります。

gt-next コンポーネント内のよくある翻訳ミスを検出する ESLint プラグインです。

インストール

npm install --save-dev @generaltranslation/gt-next-lint

設定

eslint.config.mjs に次を追加します:

import gtNext from "@generaltranslation/gt-next-lint";

export default [
  {
    plugins: { 'gt-next': gtNext },
    rules: {
      'gt-next/no-dynamic-jsx': 'warn',
      'gt-next/no-dynamic-string': 'warn',
    },
  },
];

ルール

no-dynamic-jsx

動的な内容は、<T> コンポーネントで包み、Variable コンポーネントで変数を埋め込みます。

// ❌ 間違い
<T>Hello {userName}!</T>

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

no-dynamic-string

翻訳関数では文字列リテラルのみ使用できます。

const t = useGT();

// ❌ 間違い
t(`Hello ${name}`)
t('Hello ' + name)

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

サポートされるコンポーネント

  • <Var> - Variables
  • <DateTime> - 日付
  • <Num> - 数値
  • <Currency> - 通貨

サポート対象の関数

  • useGT - クライアント側の翻訳

このガイドはどうでしたか?

gt-next Lint