Обзор

@generaltranslation/react-core-linter 0.1.0 добавляет правила ESLint для интеграции с General Translation React Core.

Этот плагин выявляет распространённые ошибки реализации, с которыми мы сталкивались на практике.

Установка

npm install @generaltranslation/react-core-linter --save-dev

В этот первоначальный релиз входят два правила:

• static-jsx — требует правильно оборачивать переменные в компонентах <T>
• static-string — требует использовать статические строки в функциях перевода

Проверка статического JSX

Правило static-jsx не допускает появления динамического содержимого непосредственно внутри компонентов <T>. Динамическое содержимое должно быть обёрнуто в компоненты переменных.

// ❌ Неверно
<T>Hello {userName}!</T>

// ✅ Верно  
<T>Hello <Var>{userName}</Var>!</T>

Проверка статических строк

Правило static-string гарантирует, что функции перевода принимают только статические строки.

const gt = useGT();

// ❌ Неверно
gt(`Hello ${name}`)
gt('Hello ' + name)

// ✅ Верно
gt('Hello {name}!', { name })

Конфигурация

Добавьте в конфигурацию ESLint:

import { defineConfig } from 'eslint';
import gtLint from '@generaltranslation/react-core-linter';

export default defineConfig([
  gtLint.configs.recommended,
]);

Этот первоначальный релиз включает базовые возможности линтинга для шаблонов перевода в React Core. В будущих версиях охват правил будет расширен, а также будет добавлено автоисправление для других распространённых нарушений.

Дополнительные материалы

• Компоненты переменных - Работа с динамическим содержимым в переводах
• Перевод строк - Перевод обычных текстовых строк