# General Translation React SDKs (gt-react, gt-next, gt-react-native): 为代码运行 Lint 检查
URL: https://generaltranslation.com/zh/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` 组合使用。

    ```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">
    这些规则会根据导入 source 检测翻译组件和函数。`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]

推荐配置会启用三条规则，并且都会按错误处理：

* **[`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)** — 标记 [`<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.