Skip to content

MohammadKurjieh/i18n-ally

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

logo

i18n Ally

๐ŸŒ i18n helpers for Vue, React, Angular and more in VSCode

Visual Studio Marketplace Version Visual Studio Marketplace Downloads Visual Studio Marketplace Installs GitHub last commit GitHub issues

Vue i18n Ally is now i18n Ally!

โšก Features

Inline annotation

Hover & Direct actions

Manage all translations in one place

Translations missing report

Multiple formats supported

Refactors & Auto translate

Extract translations from code

Annonation for JSON and YAML

Overview

  • Multi-root workspace supported
  • 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)

๐Ÿงฑ Supported Frameworks

Frameworks will be auto detected when one of the dependencies can be found in the project.

Format Manage Annonations Triggers Note
Vue โœ… โœ… vue-i18n, vuex-i18n, vue-i18next, nuxt-i18n
React โœ… โœ… react-i18next, react-intl
General i18next โœ… โŒ i18next and none of above

๐Ÿ“œ Supported Formats

Format Read Write Annonations Note
JSON โœ… โœ… โœ…
YAML โœ… โœ… โœ… Comments will NOT preserved*
JSON5 โœ… โœ… โŒ Comments will NOT preserved*
JavaScript โœ… โŒ โŒ Forced in readonly mode
TypeScript โœ… โŒ โŒ Forced in readonly mode

* Due to the limitation of yaml.dumps(#196) and JSON5.stringify(#177), comments in YAML and JSON5 will be OMITTED on any modification by this extension (editing, translating, etc). If you are using comments in your locale files, you can turn on readonly mode by vue-i18n-ally.readonly to prevent lossing comments.

๐Ÿ“‚ 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.yml   # YAML
  โ”œโ”€โ”€ zh-TW.ts    # You can mix different formats
  โ”œโ”€โ”€ ...
  โ””โ”€โ”€ <contry-code>.json

or

  locales
  โ”œโ”€โ”€ en
  |   โ”œโ”€โ”€ common.json
  |   โ”œโ”€โ”€ buttons.json
  |   โ”œโ”€โ”€ ...
  |   โ””โ”€โ”€ <filenames>.json
  โ”œโ”€โ”€ de-DE
  |   โ”œโ”€โ”€ common.json
  |   โ”œโ”€โ”€ buttons.json
  |   โ””โ”€โ”€ ...
  โ””โ”€โ”€ <contry-code>
      โ”œโ”€โ”€ common.json
      โ”œโ”€โ”€ buttons.json
      โ””โ”€โ”€ ...

โš™ Common Configurations

All fields should add prefix "vue-i18n-ally." in the setting.

Field Default Description
sourceLanguage en The primary locale for the project. It will also be the source language on translating.
displayLanguage en Displaying language in annotations and tree views.
localesPaths Auto detect Locales directory path, relative to root of the project. Can also be an array of paths. Glob patterns are acceptable.
sortedKeys false Sorting keys alphabetically on saving
readonly false Work on readonly mode. Translating and editing will be disabled.
annotations true Enabling inline annotations

๐Ÿ”ฉ Advanced Configurations

Field Default Description
filenameMatchRegex null Accept a regex allows you to map the filenames. The first group in regex should be the locale code.
forceEnabled false Extension will on enabled when vue-i18n-ish dependencies is installed in the project. Turning on this option will force the extension enabled anyway.
experimental.sfc false Support for loading Single File Components <i18n> section. 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.

  1. Fork this repo and clone it to you local machine
  2. Copy package.nls.json to package.nls.<locale-code>.json in the root of the repo
  3. Translate every single message in the new json file you created.
  4. 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.

๐ŸŽฏ Troubleshooting

Extension doesn't work/show up. There is no icon in activity bar

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 in activity bar, but nothing show up

  1. 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 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.
  2. 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 i18n Ally: Change source language
  3. Check your Directory structure

๐Ÿ—‚ Advanced folder directory configurations

In some cases, you may use modules, monorepo or other philosophies to organize your locale files.

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.filenameMatchRegex": "^([\\w-]*)\\.messages\\.json",
}

๐Ÿ“… 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:

  • Tests
  • Live share support
  • esm hot reloading, #97
  • Enhance SFC support

Done:

  • Machine translating
  • Locales Tree
  • Translating progress
  • Workspace support
  • YAML support
  • $tc, $d, $n, v-t support
  • Hide/Show specific locales
  • Language flags
  • Goto definition
  • Source language indicator
  • i18n for the plugin itself
  • Annoation config (on/off, maxlength)
  • Option to force enabling on non-vue-i18n project
  • Find all references
  • Loading .js locales
  • Loading .ts locales
  • Analysis report
  • JSON/YAML file annonation & hint
  • Single File Components i18n support

๐Ÿ‘จโ€๐Ÿ’ป 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

MIT License ยฉ 2019 Anthony Fu

MIT License ยฉ 2018-2019 think2011

About

๐ŸŒ All in one i18n extension for VS Code

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 92.8%
  • Vue 5.7%
  • JavaScript 1.4%
  • HTML 0.1%