关于 i18n-localization
面向多语言应用开发者的国际化与本地化实践指南,涵盖实现模式、RTL 支持、格式处理和检查脚本。
主要功能
- 01React、Next.js 和 Python 模式
- 02翻译键与命名空间
- 03按区域设置格式化日期和数字
- 04复数规则与 ICU 消息
- 05RTL 布局指南
- 06检查硬编码文本
适用场景
- 01规划公共应用的本地化
- 02为功能添加翻译支持
- 03检查项目中的缺失翻译
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ vudovn/ ag-kit --skill i18n-localization安装后在 Claude Code 中输入/i18n-localization确认已加载。
附带文件scripts/i18n_checker.py
详细介绍
i18n 与本地化
国际化(i18n)与本地化(L10n)最佳实践。
1. 核心概念
| 术语 | 含义 |
|---|---|
| i18n | 国际化 - 让应用可翻译 |
| L10n | 本地化 - 实际的翻译 |
| Locale | 语言 + 地区(en-US、tr-TR) |
| RTL | 从右到左的语言(阿拉伯语、希伯来语) |
2. 何时使用 i18n
| 项目类型 | 是否需要 i18n? |
|---|---|
| 公开 Web 应用 | ✅ 需要 |
| SaaS 产品 | ✅ 需要 |
| 内部工具 | ⚠️ 也许 |
| 单一地区应用 | ⚠️ 考虑未来 |
| 个人项目 | ❌ 可选 |
3. 实现模式
React(react-i18next)
import { useTranslation } from 'react-i18next';
function Welcome() {
const { t } = useTranslation();
return <h1>{t('welcome.title')}</h1>;
}
Next.js(next-intl)
import { useTranslations } from 'next-intl';
export default function Page() {
const t = useTranslations('Home');
return <h1>{t('title')}</h1>;
}
Python(gettext)
from gettext import gettext as _
print(_("Welcome to our app"))
4. 文件结构
locales/
├── en/
│ ├── common.json
│ ├── auth.json
│ └── errors.json
├── tr/
│ ├── common.json
│ ├── auth.json
│ └── errors.json
└── ar/ # RTL
└── ...
5. 最佳实践
应该做 ✅
- 使用翻译键,而非原始文本
- 按功能划分翻译命名空间
- 支持复数形式
- 按 locale 处理日期/数字格式
- 从一开始就为 RTL 做规划
- 对复杂字符串使用 ICU 消息格式
不应该做 ❌
- 在组件中硬编码字符串
- 拼接已翻译的字符串
- 假设文本长度(德语长 30%)
- 忽略 RTL 布局
- 在同一文件中混用多种语言
6. 常见问题
| 问题 | 解决方案 |
|---|---|
| 缺失翻译 | 回退到默认语言 |
| 硬编码字符串 | 使用 linter/检查脚本 |
| 日期格式 | 使用 Intl.DateTimeFormat |
| 数字格式 | 使用 Intl.NumberFormat |
| 复数形式 | 使用 ICU 消息格式 |
7. RTL 支持
/* CSS Logical Properties */
.container {
margin-inline-start: 1rem; /* Not margin-left */
padding-inline-end: 1rem; /* Not padding-right */
}
[dir="rtl"] .icon {
transform: scaleX(-1);
}
8. 检查清单
发布之前:
- 所有面向用户的字符串都使用翻译键
- 所有受支持语言都有对应的 locale 文件
- 日期/数字格式使用 Intl API
- 已测试 RTL 布局(如适用)
- 已配置回退语言
- 组件中没有硬编码字符串
脚本
| 脚本 | 用途 | 命令 |
|---|---|---|
scripts/i18n_checker.py | 检测硬编码字符串与缺失的翻译 | python scripts/i18n_checker.py <project_path> |
评论
支持 Markdown