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

Overview

logo

English | ็ฎ€ไฝ“ไธญๆ–‡

Visual Studio Marketplace Version Visual Studio Marketplace Downloads Visual Studio Marketplace Installs Marketplace Trending Monthly
Wiki GitHub last commit GitHub issues GitHub stars

v2.0 is released with new Editor UI and Review System ๐ŸŽ‰

Migrate from v1.x


Supported Frameworks

Maintained by

Lokalise logo
Lokalise is the fastest growing language cloud technology made by developers, for developers.
As a collaborative productivity platform, it helps structure and automate the translation and localization process for any company in the world.
Learn more


Sponsored by


Eliminate context switching and costly distractions. Create and merge PRs and perform code reviews from inside your IDE while using jump-to-definition, your favorite keybindings, and other IDE tools. Learn more


๐Ÿ“– Docs  |  ๐Ÿ’ญ FAQ  |  โš™๏ธ Configs  |  ๐Ÿ“œ Supported Formats  |  ๐Ÿงฑ Contribute



Inline Annotations

Hover and Direct Actions

Manage All Translations in One Place

Editor UI & Review System

Extract Translations from Code

Report Missing Translations

Machine Translation

Annotations for JSON and YAML

General Features

  • Supports multi-root workspaces
  • Supports remote development
  • Supports numerous popular frameworks
  • Supports linked locale messages
  • Uses i18n for the extension itself, of course. Translation List

๐ŸŒ Multilingual Support

This extension itself supports i18n as well. It will be auto-matched to the display language you use in your VS Code editor. We currently support the following languages.

Language Maintainer Contributors
English @antfu @rubjo, @EdRands
Simplified Chinese (็ฎ€ไฝ“ไธญๆ–‡) @antfu
Traditional Chinese (็น้ซ”ไธญๆ–‡) @antfu
Norwegian (Norsk) @rubjo
Spanish (Espaรฑol) @Baltimer
Japanese (ๆ—ฅๆœฌ่ชž) @isdh
Dutch (Nederlands) @Niekvdm, @Excalibaard
Portuguese (Brazilian) @Ibcs16
French (Franรงais) @Nicoxx45
Swedish (Svenska) @vladdeSV
Ukrainian (ะฃะบั€ะฐั—ะฝััŒะบะฐ) @uhodav
Russian (ะ ัƒััะบะธะน) @uhodav
German (Deutsch) @alexanderniebuhr

Help Translate

๐Ÿ‘จโ€๐Ÿ’ป If you would like to help a language's translation up to date, feel free to put your name in the Maintainers field. I will @mention you when needed. Much appreciated.

โค๏ธ Thanks

This extension was inspired by think2011/vscode-vue-i18n, it wouldn't exist without @think2011's great work.

Support for Vue Single File Component (SFC) is powered by kazupon/vue-i18n-locale-message, which is created by the author of vue-i18n. Thanks for making this!

Code Contributors

My great thanks to all the awesome contributors:

๐Ÿ“„ License

MIT License ยฉ 2019-PRESENT Anthony Fu

MIT License ยฉ 2018-2019 think2011

Issues
  • [Framework Request] Laravel

    [Framework Request] Laravel

    What framework do you want to have? Please provide links of its i18n solution/package. The Laravel Framework.
    Here are the docs for the i18n solution.

    Please provide some overall screenshots about how the i18n usage would be like I assume it would work just like Vue ally. The way it works is a bit similar.

    Laravel uses __() and trans(). There is also trans_choice for multiple options.

    There is also @lang() which is used in blade templates, which is a DSL (pretty much like vue templates).

    Please provide a minimal starter project Well, laravel/laravel has a starter project that everyone uses. You could go from there.

    framework request 
    opened by ghost 26
  • [Framework Request] Angular-Transloco

    [Framework Request] Angular-Transloco

    What framework do you want to have? Please provide links of its i18n solution/package. https://github.com/ngneat/transloco And the doc: https://netbasal.gitbook.io/transloco/translation-in-the-template/structural-directive

    Please provide some overall screenshots about how the i18n usage would be like <ng-container *transloco="let t">

    {{ t('title') }}

    Please provide a minimal starter project Here is a stackBlitz sandbox: https://stackblitz.com/edit/ngneat-transloco

    Thx for this great extention

    Regards

    enhancement framework request 
    opened by roseyda 24
  • No locale files loaded. Probably there is something wrong with your project config.

    No locale files loaded. Probably there is something wrong with your project config.

    ๐Ÿ“ฃ By @antfu: If you found yourself facing the same warning, please browser the discussion in the following comments first. And if your problem didn't get solved, please leave a comment with your workspace settings, i18n ally Output, and screenshots of your dir structure.

    I would love to help but be sure to provide enough information! Thanks!


    Describe the bug No locale files loaded. Probably there is something wrong with your project config.

    Extension Version i18n Ally(2.0.9)

    Framework/i18n package you are using vue-i18n

    To Reproduce Steps to reproduce the behavior:

    1. open vscode
    2. The system pops up a dialog box
    3. No locale files loaded. Probably there is something wrong with your project config.

    Device Infomation

    • OS: macOS 10.15.4
    • Version:
    • VS Code Version:1.44.2

    Extension Log Go to View -> Output -> i18n Ally, and paste the content below. You should mask any sensitive information

    
    

    Screenshots

    image

    bug 
    opened by MaxPeak 22
  • WIP: Support for Namespace

    WIP: Support for Namespace

    Refer to #122

    This PR is working in the process. However, the basic functions are already done. If you would like to try it now, you can clone this branch and compile it by vsce package and install it from .VISX file.

    Checklist

    • [x] Reading namespace files
    • [x] Basic writing for namespace
    • [x] Default namespace for every file
    • [x] namespace: hello support
    • [ ] Multiple default namespace
    • [x] Refactoring
    • [ ] Fulfilling and other commands
    • [ ] Config to force enable
    • [ ] Nested namespace
    • [x] Should not enable by some conditions
    • [x] Key display in "Current File" view.
    • [ ] Overall test (should not affect other frameworks/features)

    image

    stale 
    opened by antfu 19
  • Single File Components i18n Support

    Single File Components i18n Support

    Edit: 2019-07-29

    Experimental support for SFC is landed in v0.29.0, please check out the release note for more details.

    https://github.com/antfu/vue-i18n-ally/releases/tag/0.29.0


    vue-i18n has a feature allow user to define their locale messages in the i18n section of Single File Components(SFC)

    Something like this:

    <i18n>
    {
      "en": {
        "hello": "helloworld!"
      },
      "ja": {
        "hello": "ใ“ใ‚“ใซใกใฏใ€ไธ–็•Œ"
      }
    }
    </i18n>
    
    <template>
      <div class="parent">
        <p>message: {{ $t('hello') }}</p>
      </div>
    </template>
    

    Supporting SFC locales need a lot of work to the current code base. And I am not sure if it's a good practice at all. So I opened this issue for make a survey about this feature usages.

    If you are using SFC locales and would like to see it supported by this extension. Please upvote this comment ๐Ÿ‘

    Also, feel free to leave comments to discuss about this topic. Thanks. ๐Ÿ˜„

    stale feature request 0.x 
    opened by antfu 18
  • There is no data provider registered that can provide view data. te

    There is no data provider registered that can provide view data. te

    I got the following message in the Progress and tree section. I'm on Mac-os X Latest version of VsCode Working on vue-i18n on nuxt.js.

    In the output it says it's activated and enabled.

    Thanks! Looking forward to using this plugin!

    0.x 
    opened by AlbatiQue 17
  • [Feature Request] Browser Extension

    [Feature Request] Browser Extension

    Is your feature related to a specific framework or general for this extension

    No, it's related to the extension itself

    Is your feature request related to a problem? Please describe.

    Partially, currently it's really hard to see inside the browser, which text is created by which key.

    Describe the solution you'd like

    I would be amazing to have a i18n-ally browser extension, which functions a bit like Vue's Devtools. With this extension you would be able to turn on a special mode which shows the actual translation keys instead of the resolved texts. Why? Simple, on big projects it can get really hard to find a piece of text just based on the content of it - so having browser based support which van tell you what key is used where would be really amazing! Maybe in the future even allow you to edit it straight from the browser would make it even usable for non-development team members to edit a small piece of text in the application.

    feature request no-stale 
    opened by ThaDaVos 16
  • No locale files loaded for `react-i18next` using TS/Yaml

    No locale files loaded for `react-i18next` using TS/Yaml

    Describe the bug I have a workspace that contains 2 framework i18n's. Rails and React-I18Next. i18n-ally automatically scan the workspace and properly find both frameworks and their localization folder paths. But only Rails is works. Even react-i18next is identified byyour extension, its not parsed. If I manually disable rails, react is not parsed.

    Error:

    No locale files loaded. Probably there is something wrong with your project config.
    

    Extension Version 2.0.9

    Framework/i18n package you are using react-i18next

    To Reproduce Steps to reproduce the behavior:

    1. Open workspace
    2. You will get No locale files loaded. Probably there is something wrong with your project config.
    3. See error

    Device Infomation

    • OS: Ubuntu
    • Version: 20.04 LTS
    • VS Code Version: 1.44.2

    Extension Log

    ๐Ÿˆถ Activated, v2.0.9
    
    โ€•โ€•โ€•โ€•โ€•โ€•
    
    ๐Ÿ’ผ Workspace root changed to "/home/gencer/sources/nienbo/gitsby"
    ๐Ÿ“ฆ Packages file "package.json" found
    ๐Ÿ•ณ Packages file "pubspec.yaml" not exists
    ๐Ÿ•ณ Packages file "composer.json" not exists
    ๐Ÿ“ฆ Packages file "Gemfile" found
    ๐ŸŒž Enabled
    ๐Ÿงฉ Enabled frameworks: React
    ๐Ÿงฌ Enabled parsers: yaml, js, ts
    
    ๐Ÿš€ Initializing loader "/home/gencer/sources/nienbo/gitsby"
    ๐Ÿ“‚ Directory structure: file
    ๐Ÿ—ƒ Path Matcher Regex: /^(?<locale>[\w-_]+)\.(?<ext>ya?ml|m?js|ts)$/
    
    ๐Ÿ“‚ Loading locales under /home/gencer/sources/nienbo/gitsby/app/javascript/components/locales
    
    ๐Ÿ‘€ Watching change on /home/gencer/sources/nienbo/gitsby/app/javascript/components/locales
    โœ… Loading finished
    
    โ€•โ€•โ€•โ€•โ€•โ€•
    

    Screenshots

    This is how my locale structure for react-i18next is look like:

    image

    Instead of en.yml or cn.yml, I use folders like en/translations.yml or cn/translations.yml. Could this be the problem?

    bug stale 
    opened by gencer 15
  • Need to restart vs code to update

    Need to restart vs code to update

    Nothing seems to update before restarting visual studio. Maybe add a update button for manually refreshing vue i18n ally ?

    bug help wanted no-stale 
    opened by olemarius 15
  • Inline annotation doesn't work if the JSON is flat

    Inline annotation doesn't work if the JSON is flat

    If you use a plain tree to organize the translations in the JSON, the extension won't work correctly.

    It will detect the translation on it's own menu but won't detect it on inline annotations like this example: imagen

    But if I use the classic tree in JSON it will work correctly: imagen

    0.x 
    opened by JJBocanegra 15
  • Keys with plurals not found with new i18next v4 JSON format

    Keys with plurals not found with new i18next v4 JSON format

    Describe the bug Keys with plurals show up as non-existent when using the new i18next v4 JSON format introduced with i18next v21, see: https://www.i18next.com/misc/migration-guide https://www.i18next.com/misc/json-format

    Extension Version i18n Ally v2.8.1

    Framework/i18n package you are using i18next v21.2.4 react-i18next v11.12.0

    To Reproduce Steps to reproduce the behavior:

    1. Use i18next >= v21 with JSON format v4 Plural keys must then use suffixes "one", "other", ...
    2. Use a key with plurals and pass count parameter as option
    3. See that the key is not automatically shown the translation; when hovering the key, the popup shows a message i18n key "my key" does not exist

    Device Infomation

    • OS: Windows 10
    • Version: 21H1
    • VS Code Version: 1.61.0

    Extension Log Go to View -> Output -> i18n Ally, and paste the content below. You should mask any sensitive information

    ๐Ÿˆถ Activated, v2.8.1
    
    โ€•โ€•โ€•โ€•โ€•โ€•
    
    ๐Ÿ’ผ Workspace root changed to ...
    ๐Ÿ“ฆ Packages file "package.json" found
    ๐Ÿ•ณ Packages file "pubspec.yaml" not exists
    ๐Ÿ•ณ Packages file "composer.json" not exists
    ๐Ÿ•ณ Packages file "Gemfile" not exists
    ๐ŸŒž Enabled
    ๐Ÿงฉ Enabled frameworks: React, General
    ๐Ÿงฌ Enabled parsers: json, yaml, json5
    
    ๐Ÿ“ˆ Telemetry id: ...
    ๐Ÿš€ Initializing loader ...
    ๐Ÿ“‚ Directory structure: dir
    ๐Ÿ—ƒ Path Matcher Regex: /^(?<locale>[\w-_]+)(?:.*\/|^).*\.(?<ext>json|ya?ml|json5)$/
    
    ๐Ÿ“‚ Loading locales under ...
    	๐Ÿ“‘ Loading ....json [1634105397153.191]
    	๐Ÿ“‘ Loading ...json [1633599168201.008]
    	๐Ÿ“‘ Loading ....json [1634105537745.4314]
    	๐Ÿ“‘ Loading ....json [1633599168201.008]
    
    ๐Ÿ‘€ Watching change on ....
    โœ… Loading finished
    
    
    bug 
    opened by ahoisl 0
  • 2 locale file for same language - only loads one file for that language

    2 locale file for same language - only loads one file for that language

    Describe the bug We have to countries we have to have translations for. They both use the same language but there might be some differences in translations. Hence the two different locale files. The extension only recognizes the one file

    Extension Version Vue i18n Ally (v2.8.1)

    Framework/i18n package you are using vue-i18n,

    To Reproduce Steps to reproduce the behavior:

    1. Create 2 locale files for the same language but name them differently starting with the same language abbreviation sw_KE and sw_TZ
    2. The i18n confgi/setup is as follows import { numberFormats } from '../formats/numberFormats' import { dateTimeFormats } from '../formats/dateTimeFormats' import en from '../locales/en.json' import swKE from '../locales/sw_KE.json' import swTZ from '../locales/sw_TZ.json' import fr from '../locales/fr.json' import es from '../locales/es.json' export default { defaultLocale: 'en', fallbackLocale: 'en', numberFormats, dateTimeFormats, messages: { en, 'sw-KE': swKE, 'sw-TZ': swTZ, fr, es }, silentTranslationWarn: true, silentFallbackWarn: true, } You will only see on sw key and value for a translation in the editor

    Device Infomation

    • OS: Windows 11/10
    • VS Code Version: 1.60.2

    Extension Log ๐Ÿ“‚ Loading locales under ..... ๐Ÿ“‘ Loading (en) en.json [1633605494426.326] ๐Ÿ“‘ Loading (es) es.json [1633605494426.326] ๐Ÿ“‘ Loading (fr) fr.json [1633605494427.3252] ๐Ÿ“‘ Loading (sw) sw_KE.json [1633605494426.326] ๐Ÿ“‘ Loading (sw) sw_TZ.json [1633606951569.4822]

    Screenshots image

    bug 
    opened by LudwigNel 0
  • hard coded strings language detection is incorrect

    hard coded strings language detection is incorrect

    Describe the bug

    When trying to use the hard-coded strings beta feature, it will check if the file type is supported before trying to find hard-coded strings. According to the wiki page this supports html, js, ts, jsx and tsx. But in vscode all i get is 'javascript' is not supported yet and 'javascriptreact' is not supported yet. I'm assuming it responds only to files the IDE tells it are .js or .jsx files, rather than a list of possible matches

    Extension Version

    i18n Ally v2.8.1

    Framework/i18n package you are using

    react-i18next 11.11

    To Reproduce Steps to reproduce the behavior:

    1. Open a jsx file in vscode with extension installed
    2. open i18n ally tab
    3. check hard-coded strings section
    4. image

    Device Infomation

    • OS: Windows
    • Version: 10 pro 64-bit build 20H2
    • VS Code Version: 1.60.2

    Extension Log N/A

    Screenshots image

    bug 
    opened by jasperfirecai2 0
  • Fix file reloading on write

    Fix file reloading on write

    This syncs the logic of populating files cache to match the one from loadFile function. unflatten() call was missing and causing cache to be populated with wrong object structure.

    Fixes #555, see comment for more details: https://github.com/lokalise/i18n-ally/issues/555#issuecomment-937570752

    opened by 4O4 0
  • fix: i18next greedy namespace regex

    fix: i18next greedy namespace regex

    It seems this regex was incorrect when using multiple namespaces with react-i18next. For example, if our hook was:

    useTranslation(['foo', 'bar'])
    

    The regex matched foo', 'bar because it was greedy. With this pull request, it correctly matches foo as the default namespace.

    opened by Vardiak 1
  • Namespaces somehow breaks locales

    Namespaces somehow breaks locales

    Extension fails to start with namespace setup. I have never seen this before, the locale identifier work fine in projects without namespaces enabled.

    VSCode Settings

    {
      "i18n-ally.sortKeys": true,
      "i18n-ally.keepFulfilled": true,
      "i18n-ally.translate.saveAsCandidates": false,
      "i18n-ally.keystyle": "flat",
      "i18n-ally.encoding": "utf-8",
      "i18n-ally.indent": 2,
      "i18n-ally.tabStyle": "space",
      "i18n-ally.translate.overrideExisting": false,
      "i18n-ally.namespace": true,
      "i18n-ally.pathMatcher": "{namespaces}/{locale}.{ext}",
      "i18n-ally.localesPaths": ["locales"]
    }
    

    File Structure image Error logs

    [2021-10-04 21:26:00.471] [exthost] [error] Activating extension lokalise.i18n-ally failed due to an error:
    [2021-10-04 21:26:00.471] [exthost] [error] RangeError: Incorrect locale information provided
        at Intl.getCanonicalLocales (<anonymous>)
        at BCP47.lookup (c:\Users\Alexander\.vscode-insiders\extensions\lokalise.i18n-ally-2.8.1\dist\extension.js:316106:32)
        at c:\Users\Alexander\.vscode-insiders\extensions\lokalise.i18n-ally-2.8.1\dist\extension.js:310873:75
        at Array.map (<anonymous>)
        at LocaleLoader.guessDirStructure (c:\Users\Alexander\.vscode-insiders\extensions\lokalise.i18n-ally-2.8.1\dist\extension.js:310873:14)
        at processTicksAndRejections (internal/process/task_queues.js:93:5)
        at LocaleLoader.init (c:\Users\Alexander\.vscode-insiders\extensions\lokalise.i18n-ally-2.8.1\dist\extension.js:310815:35)
        at Function.initLoader (c:\Users\Alexander\.vscode-insiders\extensions\lokalise.i18n-ally-2.8.1\dist\extension.js:309015:9)
        at Function.update (c:\Users\Alexander\.vscode-insiders\extensions\lokalise.i18n-ally-2.8.1\dist\extension.js:309099:13)
        at Function.updateRootPath (c:\Users\Alexander\.vscode-insiders\extensions\lokalise.i18n-ally-2.8.1\dist\extension.js:309040:13)
        at Function.init (c:\Users\Alexander\.vscode-insiders\extensions\lokalise.i18n-ally-2.8.1\dist\extension.js:308819:9)
        at activate (c:\Users\Alexander\.vscode-insiders\extensions\lokalise.i18n-ally-2.8.1\dist\extension.js:312584:5)
    
    bug 
    opened by alexanderniebuhr 0
  • Question mark breaks translation key

    Question mark breaks translation key

    Describe the bug Question mark breaks translation key

    Extension Version Name: i18n Ally Id: lokalise.i18n-ally Description: ๐ŸŒ All in one i18n extension for VS Code Version: 2.8.1

    Framework/i18n package you are using react-i18next

    To Reproduce Steps to reproduce the behavior:

    1. Use a string with question mark in key (see screenshots)
    2. The key is not being recognized by extension

    Device Infomation

    • OS: Ubuntu
    • Version: 21.04
    • VS Code Version: 1.60.2

    Screenshots i18n-ally-question-1 i18n-ally-question-2

    bug 
    opened by stryaponoff 0
  • Inner quotes breaks translation key

    Inner quotes breaks translation key

    Describe the bug Nested quotes breaks translation key

    Extension Version Name: i18n Ally Id: lokalise.i18n-ally Description: ๐ŸŒ All in one i18n extension for VS Code Version: 2.8.1

    Framework/i18n package you are using react-i18next

    To Reproduce Steps to reproduce the behavior:

    1. Use a string with nested quotes (see screenshots)

    Device Infomation

    • OS: Ubuntu
    • Version: 21.04
    • VS Code Version: 1.60.2

    Screenshots i18n-ally-nested-quotes i18n-ally-nested-quotes-2

    bug 
    opened by stryaponoff 0
  • auto translate from default language to detected locals

    auto translate from default language to detected locals

    Is your feature related to a specific framework or general for this extension

    general feature should work on all frameworks.

    As a developer I want translations to happen automatically

    GIVEN I am a developer and I have text selected already WHEN I choose i18n-ally extract text THEN a key is created in my en.json with the selected text as the value, in addition all other detected localization files (ar.json, pt.json, ft.json) are updated to add this new key with the corresponding Arabic, Portuguese and french translation.

    Currently, The developer has to click the globe button to get Arabic translation, another click will be required for Portuguese and a final click for French. If we can eliminate these three clicks then translation will even be more enjoyable.

    Is your feature request related to a problem? Please describe.

    No

    Describe the solution you'd like

    The solution, is to automatically translate. no user interface changes are needed

    Additional context

    feature request 
    opened by hajonsoft 0
  • unknow setting error

    unknow setting error

    Describe the bug

    Extension Version

    v2.8.1

    Framework/i18n package you are using

    To Reproduce Steps to reproduce the behavior:

    1. open setting.json

    Device Infomation ็‰ˆๆœฌ: 1.61.0-insider (system setup) ๆไบค: 53aff5e347865fe22f9487ebd54dec9db23773b2 ๆ—ฅๆœŸ: 2021-09-23T13:51:38.771Z Electron: 13.4.0 Chrome: 91.0.4472.164 Node.js: 14.16.0 V8: 9.1.269.39-electron.0 OS: Windows_NT x64 10.0.14393 Extension Log Go to View -> Output -> i18n Ally, and paste the content below. You should mask any sensitive information

    
    

    Screenshots

    image

    bug detail-requested 
    opened by heartacker 2
Releases(v2.8.1)
  • v2.8.1(Sep 13, 2021)

  • v2.8.0(Aug 30, 2021)

  • v2.7.1(Aug 21, 2021)

  • v2.7.0(Aug 12, 2021)

  • v2.6.26(Aug 11, 2021)

  • v2.6.25(Aug 11, 2021)

  • v2.6.24(Aug 10, 2021)

  • v2.6.23(Jul 31, 2021)

  • v2.6.22(Jul 28, 2021)

  • v2.6.21(Jul 28, 2021)

  • v2.6.20(Jul 28, 2021)

  • v2.6.19(Jul 16, 2021)

  • v2.6.18(Jul 14, 2021)

  • v2.6.17(Jul 14, 2021)

  • v2.6.16(Jul 14, 2021)

  • v2.6.15(Jul 14, 2021)

  • v2.6.14(Jul 14, 2021)

  • v2.6.13(Jul 7, 2021)

  • v2.6.11(Jul 7, 2021)

  • v2.6.10(Jun 29, 2021)

    Bug Fixes

    • do not override localesPath if empty array passed, close #578 (52a8fff)

    Features

    • allow toggle i18n-ally.extract.autoDetect from UI, close #591 (a9ca8ca)
    • extract all in file, close #592 (5b61082)
    • extract batch in files, close #593 (c4ca3b8)
    • extraction key reuse and auto increment (a148839), closes #594 #595
    • new autoDetection config, close #606 (bcb9fa2)
    • support selection of folders for bulk extraction, close #603 (33f339b)
    • ngx-translate: add support for stream method (#598) (ade5701)
    Source code(tar.gz)
    Source code(zip)
  • v2.6.3(Jun 8, 2021)

  • v2.6.2(Jun 2, 2021)

  • v2.6.1(Jun 1, 2021)

  • v2.6.0(May 27, 2021)

    Bug Fixes

    • do not prompt when no locales found, log in the terminal instead (8e74c8f)
    • remove question mark in hard strings sidebar, close #557 (f5c58cb)

    Features

    • add flag for eo (#569) (c0907b5)
    • detection: exclude all lowercases string as target (6950438)
    • support detection for js/ts/jsx/tsx, close #558 (e11ec25)
    • support vue