TypeScript Hints and Navigation

Integrate with VS Code for TypeScript hints and navigation to translation files.

Overview

The @resourge/translations library provides integration with VS Code, offering TypeScript hints for translations and easy navigation to translation files. This feature enhances your development experience by providing quick access to translation values and the ability to navigate to translation files directly from your code.

Prerequisites

Before you begin, ensure that you have the following:

  • Visual Studio Code (VS Code) installed on your system
  • The VS Code project workspace open and configured for your project

Usage

  1. Open your Vue.js or React component file that uses translations.

  2. Place the cursor on top of a translation usage, such as T.global.hello.

Hover translations

  1. VS Code will display a TypeScript hint that shows the translation values for each language. This helps you quickly identify the translation values without navigating to the translation file.

  2. To navigate to the translation file, click on the translation key (e.g., hello). VS Code will open the translation file, allowing you to make edits or review the translations.

Auto complete

  1. Make any necessary changes to the translations and save the file.

  2. Return to your component file, and the updated translation values will automatically be reflected in the TypeScript hint.

  3. Repeat the process to navigate to other translation files and make any necessary changes.

Configuration

The TypeScript hints and navigation feature is enabled by default and does not require any additional configuration. If you encounter any issues with the TypeScript hints or navigation, ensure that you have the latest version of the @resourge/translations library installed and that your VS Code workspace is properly configured.