# General Translation React SDKs (gt-react, gt-next, gt-react-native): コードのLint
URL: https://generaltranslation.com/ja/docs/react/guides/linting-your-code.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: General Translation ESLint プラグイン を使い、よくある国際化のミスを検出する方法。

General Translation ESLint プラグイン `@generaltranslation/react-core-linter` は、[`<T>`](/docs/react/reference/components/t) 内の動的コンテンツ、翻訳関数内の静的でない文字列、未対応の属性など、よくある統合ミスを検出し、その多くを自動修正できます。`gt-react`、`gt-next`、`gt-react-native` で利用できます。

*注: この プラグイン は 1.0 未満 (`0.1.x`) のため、ルールが変更される可能性があります。*

## プラグインをインストールする [#install]

プラグインを開発依存関係として追加します。

<Tabs items={['npm', 'yarn', 'bun', 'pnpm']}>
  <Tab value="npm">
    ```bash
    npm install --save-dev @generaltranslation/react-core-linter
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn add --dev @generaltranslation/react-core-linter
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun add --dev @generaltranslation/react-core-linter
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm add --save-dev @generaltranslation/react-core-linter
    ```
  </Tab>
</Tabs>

## ESLint を設定する [#configure]

プラグインの `recommended` 設定をフラット構成の ESLint 設定に追加します。これにより、すべてのルールがエラーとして有効になります。

<Tabs items={['React', 'Next.js', 'TanStack Start', 'React Native']}>
  <Tab value="React">
    ```js title="eslint.config.js"
    import gtLint from '@generaltranslation/react-core-linter';

    export default [
      gtLint.configs.recommended,
    ];
    ```
  </Tab>

  <Tab value="Next.js">
    `eslint-config-next` とあわせて `recommended` 設定を構成します。

    ```js title="eslint.config.mjs"
    import { defineConfig, globalIgnores } from 'eslint/config';
    import nextVitals from 'eslint-config-next/core-web-vitals';
    import nextTs from 'eslint-config-next/typescript';
    import gtLint from '@generaltranslation/react-core-linter';

    export default defineConfig([
      ...nextVitals,
      ...nextTs,
      gtLint.configs.recommended,
      globalIgnores(['.next/**', 'out/**', 'build/**', 'next-env.d.ts', 'eslint.config.*']),
    ]);
    ```
  </Tab>

  <Tab value="TanStack Start">
    ルールは、インポート元に基づいて translation components と関数を検出します。`gt-tanstack-start` はデフォルトの一覧に含まれていないため、各ルールで [`libs`](/docs/react/reference/lint-rules#libs) オプションを使って追加してください。

    ```js title="eslint.config.js"
    import gtLint from '@generaltranslation/react-core-linter';

    const libs = ['gt-tanstack-start'];

    export default [
      {
        plugins: { '@generaltranslation/react-core-linter': gtLint },
        rules: {
          '@generaltranslation/react-core-linter/static-jsx': ['error', { libs }],
          '@generaltranslation/react-core-linter/static-string': ['error', { libs }],
          '@generaltranslation/react-core-linter/no-data-attrs-on-branch': ['error', { libs }],
        },
      },
    ];
    ```
  </Tab>

  <Tab value="React Native">
    ```js title="eslint.config.js"
    import gtLint from '@generaltranslation/react-core-linter';

    export default [
      gtLint.configs.recommended,
    ];
    ```
  </Tab>
</Tabs>

通常どおり ESLint を実行し、自動修正を適用するには `--fix` を追加してください。

```bash
npx eslint . --fix
```

## ルールで検出される内容 [#rules]

`recommended` 設定では、次の 3 つのルールがすべてエラーとして有効になります。

* **[`static-jsx`](/docs/react/reference/lint-rules#static-jsx)** — [`<T>`](/docs/react/reference/components/t) 内の動的コンテンツを検出し、変数コンポーネント ([`<Var>`](/docs/react/reference/components/var)、[`<Num>`](/docs/react/reference/components/num)、[`<Currency>`](/docs/react/reference/components/currency)、または [`<DateTime>`](/docs/react/reference/components/datetime)) でラップすることを必須にします。自動修正可能です。
* **[`static-string`](/docs/react/reference/lint-rules#static-string)** — 翻訳関数 ([`useGT`](/docs/react/reference/hooks/use-gt)、[`getGT`](/docs/node/reference/functions/get-gt)、[`msg`](/docs/react/reference/functions/msg)) には静的な文字列リテラルを渡す必要があり、動的な値は `gt('Hello, {name}!', { name })` のような ICU 補間に移すよう促します。自動修正可能です。
* **[`no-data-attrs-on-branch`](/docs/react/reference/lint-rules#no-data-attrs)** — [`<Branch>`](/docs/react/reference/components/branch) の `data-*` 属性を検出します。このコンポーネントではそれらの属性は無視されます。

各ルールのオプションと例については、[lint ルールリファレンス](/docs/react/reference/lint-rules) を参照してください。

## Next steps

- /docs/react/guides/translating-jsx
- /docs/react/guides/translating-strings
- /docs/react/guides/formatting-variables
- /docs/react/guides/handling-plurals-and-branches

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.