Vue i18n Ally

🌍 Better Vue i18n experiences with VSCode - 中文文档

Now with Single File Component support! 🎉

⚡ Features

Inline annotation

Hover & Direct actions

Manage all translations in one place

Translations missing report

JSON, YAML and JSON5 are supported

Refactors & Auto translate

Extract translations from code

Overview

Multi-root workspace supported
Supports .json, .yaml, .json5, .js and .ts locale message formats
Remote development supported
Supports both vue-i18n, vuex-i18n, vue-i18next and nuxt-i18n
i18n for the extension itself, of course. (supporting: English, 简体中文, 繁體中文 or help us translate)

⚙ Installation

Install the extension from VSCode Marketplace and you are good to go!

🎯 Troubleshooting

Extension doesn't work/show up

Extension will only be enabled on vue-i18n"-ish" project. Make sure you have one of the following package in the dependencies or devDependencies fields of your package.json

I can see the icon, but nothing show up

Locales path config missing. locales path will be detected automatically at the first time you open a project. If the nothing show up, you may need to configure it manually. There are two ways to do that:
- Open Command Palette (Ctrl-Shift-P or ⌘⇧P), type Vue i18n Ally: Manual configure locales path then press enter and follow the guide.
- Goto to the settings of VSCode and set vue-i18n-ally.localesPaths manually.
The source / displaying locale. The default locale is set to English(en). If you don't have English in your supporting locales, you may need to config it through command Vue i18n Ally: Change source language
Directory structure please read the next section

📂 Directory structure

You can have locales directory structured like this with zero-configuration

  locales         # i18n, langs, locale are also acceptable
  ├── en.json
  ├── de-DE.json
  ├── zh-CN.yaml  # YAML is also supported
  ├── zh-TW.yaml
  ├── ...
  └── <contry-code>.json

or

  locales
  ├── en
  |   ├── common.json
  |   ├── buttons.json
  |   ├── ...
  |   └── <filenames>.json
  ├── de-DE
  |   ├── common.json
  |   ├── buttons.json
  |   └── ...
  └── <contry-code>
      ├── common.json
      ├── buttons.json
      └── ...

🗂 Advanced folder directory configurations

In some cases, you may use modules, monorepo or other philosophies to organize your locale files. The follow configs might be helpful.

vue-i18n-ally.localesPaths accept an array of glob patterns which allows you to specify the folders containing your locale files.

vue-i18n-ally.matchRegex accept a regex allows you to map the filenames. The first group in regex should be the locale code. Filenames with not match will be ignored.

For example, you have following directory structure need to be config.

  packages
  ├── pkgA
  |   └── i18n
  |       ├── en.messages.json
  |       ├── zh-CN.messages.json
  |       └── ...
  ├── pkgB
  |   └── i18n
  |       ├── en.messages.json
  |       ├── zh-CN.messages.json
  |       └── ...
  └── ...

You could change your config like this:

{
  "vue-i18n-ally.localesPaths": [
    "packages/**/**/i18n"
  ],
  "vue-i18n-ally.matchRegex": "^([\\w-]*)\\.messages\\.json",
}

⚙ More configurations

Comments in YAML/JSON5

Since there is no easy way to perserve comments in yaml.dumps(#196) or JSON5.stringify(#177), comments in YAML and JSON5 will be OMITTED on any writings by this extension (editing, translating, etc).

Although you can make this extension works in readonly mode, preventing losing the comments.

"vue-i18n-ally.readonly": true

Keys sorting

You can turn on keys sorting by

"vue-i18n-ally.sortedKeys": true // default disabled

The keys sorting is only avaliable in JSON and YAML, but not JSON5.

⚗ Experimental `.js`/`.ts` support

From v0.24.x, we shipped the support for loading *.js/*.ts locale files. You can use them already with no config required.

⚠ You will have limited features in this extension

Features like editting and translating are not avaliable in javascript/typescript locales (a.k.a forced to work on readonly mode). They can be very complex and there is not a proper way to update the changes.

We would recommend you to use static files like JSON or YAML storing locale messages to work best with this extension.

⚗ Experimental SFC support

From v0.29.x, we shipped the support for loading Single File Components <i18n> section. The feature is disabled by default. You can opt-in by changing setting:

"vue-i18n-ally.experimental.sfc": true

Note currently SFC only works in READONLY mode, the other features will be landed in future release.

🌍 Help translate this extension

This extension itself supports i18n as well, it will be auto matched to the display language you used in your vscode editor. If you would like to help translate this extension, you can do it by following steps.

Fork this repo and clone it to you local machine
Copy package.nls.json to package.nls.<locale-code>.json in the root of the repo
Translate every single message in the new json file you created.
Commit changes and make a PR to this repo

We would recommend you to use vscode with vue-i18n-ally installed. It can helps you translate itself 😁, all the configs were already set in the workspace settings.

📅 TODOs

We have not determined schedule to implement the TODOs. If you would like to see them implemented, please open an issue and share your use cases. PR is also welcome.

Todo:

Done:

👨‍💻 Thanks

This extension is original forked from think2011/vscode-vue-i18n, it can't be existed without @think2011's great work.

And thanks for all the awesome contributors.

License

About

🌍 Better Vue i18n experiences with VSCode

https://marketplace.visualstudio.com/items?itemName=antfu.vue-i18n-ally

MIT License

Languages

Language:TypeScript 99.2%Language:JavaScript 0.8%