README.zh-CN.md · antfu/i18n-ally

<p align='center'>
<a href="https://github.com/antfu/i18n-ally/blob/master/README.md">English</a> | 简体中文
</p>

<p align='center'><b>
🚧 请注意，本中文文档并非实时更新，可能会有和英文版不对应的情况，仅供参考。如有歧义，请一切以<a href="https://github.com/antfu/i18n-ally/blob/master/README.md">英文版</a>文档为主。
</b></p>

<br>

## 🧱 支持的框架

插件会根据当前项目的依赖自动检测框架。

| Framework | Status | Trigger Packages |
| --- | --- | --- |
| ![](https://raw.github.com/antfu/i18n-ally/master/screenshots/frameworks/vue.png) [Vue](https://vuejs.org/) | ✅ | [`vue-i18n`](https://github.com/kazupon/vue-i18n), [`vuex-i18n`](https://github.com/dkfbasel/vuex-i18n), [`vue-i18next`](https://github.com/panter/vue-i18next), [`nuxt-i18n`](https://github.com/nuxt-community/nuxt-i18n) |
| ![](https://raw.github.com/antfu/i18n-ally/master/screenshots/frameworks/vue.png) [Vue SFC i18n](https://kazupon.github.io/vue-i18n/guide/sfc.html) | ✅ | [`@kazupon/vue-i18n-loader`](https://www.npmjs.com/package/@kazupon/vue-i18n-loader) |
| ![](https://raw.github.com/antfu/i18n-ally/master/screenshots/frameworks/react.png) [React](https://reactjs.org/) | ✅ | [`react-i18next`](https://github.com/i18next/react-i18next), [`react-intl`](https://github.com/formatjs/react-intl), [`next-i18next`](https://github.com/isaachinman/next-i18next) |
| ![](https://raw.github.com/antfu/i18n-ally/master/screenshots/frameworks/angular.png) Angular([ngx-translate](http://www.ngx-translate.com/)) | ✅ | [`@ngx-translate/core`](https://github.com/ngx-translate/core) |
| ![](https://raw.github.com/antfu/i18n-ally/master/screenshots/frameworks/flutter.png) Flutter([flutter_i18n](https://github.com/ilteoood/flutter_i18n)) | ✅ | [`flutter_i18n`](https://github.com/ilteoood/flutter_i18n) |
| ![](https://raw.github.com/antfu/i18n-ally/master/screenshots/frameworks/ember.png) [Ember.js](https://emberjs.com/) | ✅ | [`ember-intl`](https://github.com/ember-intl/ember-intl) |
| ![](https://raw.github.com/antfu/i18n-ally/master/screenshots/frameworks/vscode.png) [VSCode Extension](https://code.visualstudio.com/api) | ✅ | [`@types/vscode`](https://www.npmjs.com/package/@types/vscode), [`vscode`](https://www.npmjs.com/package/vscode) |
| ![](https://raw.github.com/antfu/i18n-ally/master/screenshots/frameworks/i18next.png) [i18next](https://www.i18next.com/) | ✅ | [`i18next`](https://www.npmjs.com/package/i18next) |
| ![](https://raw.github.com/antfu/i18n-ally/master/screenshots/frameworks/i18ntag.png) [i18nTag](http://i18n-tag.kolmer.net/) | ✅ | [`es2015-i18n-tag`](https://www.npmjs.com/package/es2015-i18n-tag) |
| ![](https://raw.github.com/antfu/i18n-ally/master/screenshots/frameworks/angular.png) [Angular](https://angular.io/)(native) | [Vote Here](https://github.com/antfu/i18n-ally/issues/114) |  |
| ![](https://raw.github.com/antfu/i18n-ally/master/screenshots/frameworks/rails.png) [Rails](https://github.com/svenfuchs/rails-i18n) | [Vote Here](https://github.com/antfu/i18n-ally/issues/136) |  |

如果您希望插件支持上面未列出的框架，你可以发起一个 [框架支持请求](https://github.com/antfu/i18n-ally/issues/new?assignees=&labels=framework+request&template=framework-support-request.md&title=%5BFramework+Request%5D) 或者直接PR。（如果可以请尽量使用英文，让更多人可以看到并参与进来，感谢！）

<h3 align="center"> 内联翻译显示 </h3>

<h3 align="center"> 统一管理所有翻译文案 </h3>

<h3 align="center"> 一键机器翻译 </h3>

<h3 align="center"> 支持多种文案格式 </h3>

<h3 align="center"> 从代码中提取文案 </h3>

<h3 align="center"> JSON 和 YAML 的内联翻译显示 </h3>

- 支持多目录工作区
- 支持远程开发 (Remote Development)
- 支持大多数流行框架
- 插件自身多语言支持 [翻译列表](https://github.com/antfu/i18n-ally#-help-translate-this-extension)

## 📜 支持的文案格式

| 文件格式 | 读 | 写 | 内联显示 | 备注 |
| --- | --- | --- | --- | --- |
| JSON | ✅ | ✅ | ✅ | |
| YAML | ✅ | ✅ | ✅ | *注释不会保留\** |
| JSON5 | ✅ | ✅ | ❌ | *注释不会保留\** |
| JavaScript | ✅ | ❌ | ❌ | *强制只读模式* |
| TypeScript | ✅ | ❌ | ❌ | *强制只读模式* |

*\* 受限于 `yaml.dumps`([#196](https://github.com/nodeca/js-yaml/issues/196)) 和 `JSON5.stringify`([#177](https://github.com/json5/json5/issues/177)), **YAML 和 JSON5 的注释在任何写入操作后将会丢失**。如果你希望保留注释，可以可以通过设置 `i18n-ally.readonly` 让插件在只读模式工作。*

## 📂 目录结构

您可以将语言目录置为一下两种形式

```
  locales
  ├── en.json
  ├── de-DE.json
  ├── zh-CN.yml   # YAML 格式同样支持
  ├── zh-TW.ts    # 你也可以混合不同的格式
  ├── ...
  └── <contry-code>.json
```

或者

## ⚙ 常用设置

下列所有的设置需要加上 "`i18n-ally.`" 前缀

| 字段 | 默认值 | 描述 |
| --- | --- | --- |
| `sourceLanguage` | `en` | 翻译源语言 |
| `displayLanguage` | `en` | 显示语言 |
| `localesPaths` | 自动 | 翻译文件夹路径 (相对于项目根目录)，你也可以使用Glob匹配模式。 |
| `sortKeys` | `false` | 保存排序后的JSON/YAML |
| `keystyle` | 自动 | 翻译路径格式, 可以是 `flat`({"a.b.c": "..."}) 或 `nested`({"a": {"b": {"c": "..."}}}). |
| `readonly` | `false` | 只读模式 |
| `annotations` | `true` | 启用内联注释 |
| `keepFulfilled` | `false` | 始终用空字符串填充所有的键 |
| `enabledFrameworks` | 自动 | 指定要使用的框架支持。如果未设置任何值，插件将自动检测框架 |
| `indent` | 2 | 缩进空格数 |
| `tabStyle` | `space` | 使用空格或Tab进行缩进 |
| `promptTranslatingSource` | `false` | 每次翻译前询问翻译源语言 |

## 🎯 常见问题

### 插件没有作用 (侧边栏没有显示图标)

本插件支持许多不同的框架框架，请确保您正在使用的框架在[支持列表](https://github.com/antfu/i18n-ally#-supported-frameworks)中。

### 我可以看到插件的图标显示在侧边栏，但没有任何的翻译文案

1. **区域设置路径配置缺失**，您可能需要通过下列任一方式手动配置翻译文件路径
     - 打开**命令面板**（`Ctrl-Shift-P`或`⌘⇧P`），选择 `Vue i18n 助手: 手动设置语言目录` 并按照指南操作。
     - 打开 VSCode 的设置文件并手动设置 `vue-i18n-ally.localesPaths`。
2. **源语言/显示语言设置**。 默认语言环境设置为英语（`en`）。 如果您的项目不支持英语，则可能需要通过命令 `Vue i18n 助手: 更改源语言` 进行修改。
3. 检查你的 **目录结构**

## 👨‍💻 感谢

本插件最初来源于 [think2011/vscode-vue-i18n](https://github.com/think2011/vscode-vue-i18n)，非常感谢 [@think2011](https://github.com/think2011) 的启发。

Vue SFC 的支持来自于 vue-i18n 的作者 [kazupon](https://github.com/kazupon) 的 [kazupon/vue-i18n-locale-message](https://github.com/kazupon/vue-i18n-locale-message)。感谢提供的帮助!

同时也十分感谢所有这些很棒的 [贡献者](https://github.com/antfu/i18n-ally/graphs/contributors) 和看到这里的你。

最后，我希望特别感谢我的伴侣 [@iiiiiiines](https://github.com/iiiiiiines) 支持我并鼓励我做出这个项目。

## ☕ 请我喝杯咖啡

我在这个项目里投入了许多精力和时间，如果您觉得它有用，你也可以考虑请我喝杯咖啡！

通过 [PayPal](https://paypal.me/antfu7) 或者 [支付宝](https://github.com/antfu/vue-i18n-ally/blob/master/screenshots/alipay.jpg)，**干杯！！！ 🙌**

## 📄 License

antfu/i18n-ally

简介

发行版

贡献者

近期动态

antfu/i18n-ally .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

antfu/i18n-ally