Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>Show translation in editorNew to Visual Studio Code? Get it now.
Show translation in editor

Show translation in editor

Trần Quang Khương

|
1 install
| (0) | Free
Show translation in editor from json data
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Show translation in editor

  • Extension supports displaying i18n (multilingual) content from JSON files

  • Variable names (e.g. _translate, this._translate) and JSON file paths can be configured via .vscode/vscode-ext-show-translation/config.json

  • Read the configuration section below

💡 Features

  • Show solution content from JSON files when hovering

  • Suggest child key when typing . dot after translation variable

  • Ctrl+Click to open the JSON file and move to the corresponding key location

🔧 Configuration

Create file: .vscode/vscode-ext-show-translation/config.json

{
    "variableNames": ["_translate", "this._translate"],
    "workInFiles": ["typescript", "html"],
    "paths": [
        "src/assets/i18n/vi.json",
        "src/assets/i18n/en.json"
    ]
}

tree demo

Paths to JSON data files may vary within each project. Please fill in the exact path to the JSON file, starting from the project's root directory. As in the example above, my JSON file is located at <root-project>/src/assets/i18n/vi.json

🐞 Note

  • If hover/hint is not displayed: check the variable name in config.json

  • If you don't jump to the file: the key certainly exists in JSON

🖼️ Preview

Hover:

hover 01

hover 02

Completion Item:

completion 01

completion 02

Definition:

definition 01

definition 02

📚 Related documents

  • VSCode Extension API
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft