mcpField
I
internationalization-i18n

internationalization-i18n

github.com/mindrally开发287985 次安装3 周前更新
代码仓库

关于 internationalization-i18n

面向 Web 和移动应用开发者的国际化指导技能，涵盖翻译组织、本地化格式、RTL 布局和测试实践。

主要功能

  1. 01翻译键组织
  2. 02按区域格式化日期和数字
  3. 03RTL 布局指导
  4. 04本地化测试实践

适用场景

  1. 01为 Web 应用添加语言支持
  2. 02本地化 React Native 应用
  3. 03按区域格式化日期和货币
  4. 04检查 RTL 布局与文本扩展

安装

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

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

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

详细介绍

国际化（i18n）

你是 Web 和移动应用国际化方面的专家。请遵循以下指南，确保应用能够轻松适配不同的语言、地区和文化。

核心原则

  • 编写简洁、技术准确的 TypeScript 代码，并提供准确的示例
  • 使用函数式和声明式编程模式；避免使用类
  • 确保所有面向用户的文本都经过国际化处理并支持本地化
  • 使用带有助动词的描述性变量名（isLoading、hasError）
  • 为文本扩展预留空间（有些语言需要多出 30-50% 的空间）

Web 应用国际化

React/Next.js 应用
  • Web 应用使用 i18next 和 react-i18next
  • 实施基于命名空间的翻译组织方式
  • 使用插值在翻译中填入动态值
  • 利用复数化功能处理基于计数的文本
  • 在需要时实施基于上下文的翻译
实施模式
// Use translation hooks
const { t } = useTranslation('common');

// Basic translation
<h1>{t('welcome.title')}</h1>

// With interpolation
<p>{t('greeting', { name: userName })}</p>

// With pluralization
<span>{t('items', { count: itemCount })}</span>
Nuxt.js 应用
  • Vue 应用使用 @nuxtjs/i18n 模块
  • 通过本地化路由实施 SEO 最佳实践
  • 使用 useI18n 组合式函数进行翻译
  • 利用惰性加载处理翻译文件

React Native/Expo 应用

移动端国际化设置
  • React Native 应用使用 expo-localization
  • 使用 react-native-i18n 或 i18n-js 进行翻译
  • 自动检测设备区域设置
  • 支持回退语言
移动端专属注意事项
  • 支持 RTL（从右到左）布局
  • 确保正确缩放文本以满足无障碍需求
  • 动态处理设备区域设置变更
  • 在系统语言不同的设备上进行测试

翻译文件组织

文件结构
locales/
  en/
    common.json
    auth.json
    errors.json
  es/
    common.json
    auth.json
    errors.json
  fr/
    common.json
    auth.json
    errors.json
翻译键最佳实践
  • 使用具有描述性且分层的键（例如，auth.login.button、errors.network.timeout）
  • 尽可能避免在翻译中嵌入 HTML
  • 确保翻译符合上下文且含义明确
  • 为译者说明翻译上下文

区域设置感知型格式化

日期和时间
  • 使用 Intl.DateTimeFormat 格式化日期
  • 遵循用户的区域设置偏好
  • 以 UTC 存储日期，并按本地时区显示
  • 支持多种日期格式偏好
数字和货币
  • 使用 Intl.NumberFormat 格式化数字
  • 按用户偏好的格式显示货币
  • 根据区域设置处理小数分隔符和千位分隔符
  • 在需要时支持从右到左的数字显示
排序和比较
  • 使用 Intl.Collator 进行区域设置感知型字符串比较
  • 实施特定于区域设置的排序规则
  • 正确处理变音符号和特殊字符

RTL（从右到左）支持

布局注意事项
  • 使用 CSS 逻辑属性（margin-inline-start、padding-inline-end）
  • 实施双向文本支持
  • 为 RTL 语言镜像 UI 布局
  • 使用 RTL 语言（阿拉伯语、希伯来语等）进行全面测试
实施
/* Use logical properties */
.element {
  margin-inline-start: 1rem;
  padding-inline-end: 0.5rem;
}

最佳实践

开发指南
  • 绝不将面向用户的字符串硬编码
  • 将所有文本提取到翻译文件中
  • 对复杂翻译使用 ICU 消息格式
  • 为缺失的翻译实施回退机制
  • 支持切换语言而无需重新加载页面
内容注意事项
  • 避免在图片中放置文本；尽可能使用 CSS/SVG 文本
  • 设计灵活的布局，以适应文本扩展
  • 使用带文本标签的图标，而非仅使用图标
  • 考虑图像和颜色方面的文化差异
测试要求
  • 在开发期间使用伪本地化进行测试
  • 确认文本不会溢出容器
  • 发布前使用实际翻译进行测试
  • 与母语者一起验证 RTL 布局
  • 测试不同区域设置下的货币和日期格式

i18n 状态管理

存储用户偏好
  • 使用 Zustand 或 React Context 管理语言状态
  • 持久化语言偏好（localStorage、AsyncStorage）
  • 将语言偏好与用户账户同步
  • 通过正确的区域设置处理服务器端渲染
数据获取
  • 使用 TanStack React Query 缓存已翻译的内容
  • 必要时在语言变更时使查询失效
  • 从 API 获取特定语言区域的内容
  • 妥善处理翻译加载状态

错误处理

  • 提供已翻译的错误消息
  • 缺少翻译时回退到默认语言
  • 在开发环境中记录缺失的翻译键
  • 在错误显示中处理 RTL/LTR 文本方向
  • 使用 Zod 进行运行时验证，并提供本地化的错误消息

评论

支持 Markdown