# Linting Rules for gt-next: gt-next Lint
URL: https://generaltranslation.com/ja/docs/next-lint.mdx
---
title: gt-next Lint
description: gt-next コンポーネント向けの ESLint プラグイン。
---

<Callout type="warn">
  これはアルファ版です。今後変更される可能性があります。
</Callout>

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

## インストール

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


## 設定

`eslint.config.mjs` に以下を追加します:

```javascript
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>` コンポーネントで囲みます。

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

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


### `no-dynamic-string`

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

```jsx
const gt = useGT();

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

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


## サポート対象のコンポーネント

* `<Var>` - 変数
* `<DateTime>` - 日付
* `<Num>` - 数値
* `<Currency>` - 通貨

## 対応している関数

* `useGT` - クライアント側の翻訳
* `getGT` - サーバー側の翻訳

## 設定プリセット

このプラグインには、`recommended` 設定プリセットが用意されています。

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

export default [
  gtNext.configs.recommended,
];
```

これにより、`no-dynamic-jsx` と `no-dynamic-string` の両方が警告として有効になります。