mcpField
I
internationalization-i18n

internationalization-i18n

github.com/secondsky开发240449 次安装5 周前更新
代码仓库

关于 internationalization-i18n

用于实现多语言支持、管理翻译和本地化格式的开发技能，包含 i18next 示例、复数处理、日期与数字格式化及 RTL 模式。

主要功能

  1. 01React i18next 设置
  2. 02复数处理模式
  3. 03日期和数字格式化
  4. 04从右向左布局支持
  5. 05React-Intl 和 gettext 参考
  6. 06翻译管理实践

适用场景

  1. 01为 React 应用添加语言选择
  2. 02按区域格式化日期和数字
  3. 03处理翻译中的复数形式
  4. 04调整布局以支持 RTL 语言

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/secondsky/claude-skills --skill internationalization-i18n

安装后在 Claude Code 中输入/internationalization-i18n确认已加载。

附带文件references/frameworks.md

详细介绍

国际化（i18n）

实现多语言支持，并妥善管理翻译和格式。

i18next 设置（React）

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    interpolation: { escapeValue: false },
    resources: {
      en: { translation: { welcome: 'Welcome, {{name}}!' } },
      es: { translation: { welcome: '¡Bienvenido, {{name}}!' } }
    }
  });

// Usage
const { t } = useTranslation();
<h1>{t('welcome', { name: 'John' })}</h1>

复数处理

// Translation file
{
  "items": "{{count}} item",
  "items_plural": "{{count}} items",
  "items_zero": "No items"
}

// Usage
t('items', { count: 0 })  // "No items"
t('items', { count: 1 })  // "1 item"
t('items', { count: 5 })  // "5 items"

日期/数字格式

// Dates
new Intl.DateTimeFormat('de-DE', {
  dateStyle: 'long',
  timeStyle: 'short'
}).format(new Date());

// Numbers
new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD'
}).format(1234.56);  // "$1,234.56"

// Relative time
new Intl.RelativeTimeFormat('en', { numeric: 'auto' })
  .format(-1, 'day');  // "yesterday"

RTL 支持

/* Use logical properties */
.container {
  margin-inline-start: 1rem;  /* margin-left in LTR, margin-right in RTL */
  padding-inline-end: 1rem;
}

/* Direction attribute */
html[dir="rtl"] .icon {
  transform: scaleX(-1);
}

其他框架

请参阅 references/frameworks.md，了解：

  • React-Intl（Format.js）的完整实现
  • 使用 Flask/Babel 的 Python gettext
  • RTL 语言支持模式
  • ICU Message Format 示例

最佳实践

  • 提取所有面向用户的字符串
  • 复杂翻译使用 ICU message format
  • 使用伪本地化进行测试
  • 从一开始就支持 RTL
  • 切勿拼接已翻译的字符串
  • 在生产环境中使用专业译员

评论

支持 Markdown