i18n

i18n

Popüler

Internationalization guide using react-i18next. Use when adding translations, creating i18n keys, or working with localized text in React components (.tsx files). Triggers on translation tasks, locale management, or i18n implementation.

71Kyıldız
14Kfork
Güncellendi 1/26/2026
SKILL.md
readonlyread-only
name
i18n
description

Internationalization guide using react-i18next. Use when adding translations, creating i18n keys, or working with localized text in React components (.tsx files). Triggers on translation tasks, locale management, or i18n implementation.

LobeChat Internationalization Guide

  • Default language: Chinese (zh-CN)
  • Framework: react-i18next
  • Only edit files in src/locales/default/ - Never edit JSON files in locales/
  • Run pnpm i18n to generate translations (or manually translate zh-CN/en-US for dev preview)

Key Naming Convention

Flat keys with dot notation (not nested objects):

// ✅ Correct
export default {
  'alert.cloud.action': '立即体验',
  'sync.actions.sync': '立即同步',
  'sync.status.ready': '已连接',
};

// ❌ Avoid nested objects
export default {
  alert: { cloud: { action: '...' } },
};

Patterns: {feature}.{context}.{action|status}

Parameters: Use {{variableName}} syntax

'alert.cloud.desc': '我们提供 {{credit}} 额度积分',

Avoid key conflicts:

// ❌ Conflict
'clientDB.solve': '自助解决',
'clientDB.solve.backup.title': '数据备份',

// ✅ Solution
'clientDB.solve.action': '自助解决',
'clientDB.solve.backup.title': '数据备份',

Workflow

  1. Add keys to src/locales/default/{namespace}.ts
  2. Export new namespace in src/locales/default/index.ts
  3. For dev preview: manually translate locales/zh-CN/{namespace}.json and locales/en-US/{namespace}.json
  4. Run pnpm i18n to generate all languages (CI handles this automatically)

Usage

import { useTranslation } from 'react-i18next';

const { t } = useTranslation('common');

t('newFeature.title')
t('alert.cloud.desc', { credit: '1000' })

// Multiple namespaces
const { t } = useTranslation(['common', 'chat']);
t('common:save')

Common Namespaces

Most used: common (shared UI), chat (chat features), setting (settings)

Others: auth, changelog, components, discover, editor, electron, error, file, hotkey, knowledgeBase, memory, models, plugin, portal, providers, tool, topic

You Might Also Like

Related Skills

verify

verify

243K

Use when you want to validate changes before committing, or when you need to check all React contribution requirements.

facebook avatarfacebook
Al
test

test

243K

Use when you need to run tests for React core. Supports source, www, stable, and experimental channels.

facebook avatarfacebook
Al

Use when feature flag tests fail, flags need updating, understanding @gate pragmas, debugging channel-specific test failures, or adding new flags to React.

facebook avatarfacebook
Al

Use when adding new error messages to React, or seeing "unknown error code" warnings.

facebook avatarfacebook
Al
flow

flow

243K

Use when you need to run Flow type checking, or when seeing Flow type errors in React code.

facebook avatarfacebook
Al
flags

flags

243K

Use when you need to check feature flag states, compare channels, or debug why a feature behaves differently across release channels.

facebook avatarfacebook
Al