# General Translation React SDKs (gt-react, gt-next, gt-react-native): Линтинг кода
URL: https://generaltranslation.com/ru/docs/react/guides/linting-your-code.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Как выявлять распространённые ошибки интернационализации с помощью ESLint-плагина General Translation.

ESLint-плагин General Translation, `@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-конфигурацию плагина в ваш flat-конфиг ESLint. Она включает все правила с уровнем `error`.

<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">
    Подключите recommended-конфигурацию вместе с `eslint-config-next`.

    ```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">
    Правила определяют компоненты перевода и функции по источнику импорта. `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` включает три правила, и все они работают на уровне ошибок:

* **[`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)) принимали статические строковые литералы, и направляет динамические значения в ICU-интерполяцию, например `gt('Hello, {name}!', { name })`. Поддерживает автоматическое исправление.
* **[`no-data-attrs-on-branch`](/docs/react/reference/lint-rules#no-data-attrs)** — отмечает атрибуты `data-*` у [`<Branch>`](/docs/react/reference/components/branch), которые этот компонент игнорирует.

См. [справочник по 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.