Esker LgKeys

Visualize and manage Esker translation keys with highlighting, navigation, bulk creation, and Git branch analysis.

Features

In code files (.js, .ts, .cs, etc.)

• 🟢 Green highlighting: key is defined in the translation file
• 🔴 Red highlighting: key is missing
• 📋 Side panel: list of keys in the current file (missing keys first)
• 🖱️ Ctrl+Click: navigation to the key definition in the translation file
• 💬 Hover: displays translations in all available languages with flags (en, fr, de, etc.) and directory path. For global translation keys, shows the English translation from the global translation file
• ➕ Key creation: quick addition of missing keys (individually or in bulk)
• 📁 Folder selection: when adding keys in a Package workspace, choose between local lg folder or global translations, with pickers for template/folder selection

In HTML template files (.html, .htm, .cshtml)

• 📝 %[KEY_NAME] format: detects keys in template format (without _ prefix)
• 🔄 Automatic matching: %[MY_KEY] in HTML corresponds to MY_KEY in the translation file
• ✨ Same features: highlighting, side panel, key creation

In translation files (process_to-DO.xml, template_to-do.xml)

• 🟢 Green highlighting: key is used in the code
• 🔴 Red highlighting: key is not used
• 🟡 Yellow highlighting: key is a duplicate (appears multiple times in the file)
• 🖱️ Click: navigation to the first usage of the key
• 🔍 Global search: command to list all usages of a key in the workspace

Side panel (TreeView)

• 📊 Categorization: Missing / Defined keys (or Used / Unused keys)
• 🔢 Badge: shows the number of missing keys on the sidebar icon
• 💬 Rich Tooltip: displays translations with flags on hover, same as in code
• ➕ Inline button: quick creation of a missing key
• ⚡ Bulk creation: button to create all missing keys at once

Status bar

• 📊 Key counter: displays OK/Total in the status bar
• ⚠️ Visual indicator: yellow background if keys are missing
• ⚠️ Duplicate warning: yellow status bar item when duplicates are detected
• 🖱️ Click: opens the Esker LgKeys side panel (or the fix duplicates dialog for the duplicate item)

Branch Changes

Dedicated view for translation keys modified in the current branch compared to the base branch. (By default, the base branch is default, but it is configurable.)

• 🔍 Branch analysis: compares translation files with the merge-base of the base branch
• ✅ Added keys: new keys created in this branch (green icon)
• 🗑️ Removed keys: keys removed in this branch (red icon)
• 📁 Grouping by file: displays changes by translation file
• 🖱️ Navigation: click on a key to go to its definition
• ⚙️ Configurable base branch: setting eskerLgKeys.baseBranch (default: default)
• 🔄 Automatic analysis: branch changes are analyzed automatically when switching branches or opening the workspace
• ▶️ Refresh: button to re-run the analysis manually

Note: If you are on the base branch, a message will prompt you to switch to a feature branch.

Local Changes

Dedicated view for locally modified translation keys (uncommitted).

• 🔍 Modification analysis: compares translation files with their HEAD version
• ✅ Added keys: new keys created locally (green icon)
• 🗑️ Removed keys: keys removed from translation files (red icon)
• 📍 Usage detection: for added keys, indicates if they are used in the code
  • Contextual search: respects translation scope (process vs library)
  • For a key in a process: searches in the process folder + library files
  • For a key in a global lib: searches only in library files
  • Optimization: only modified files (branch + uncommitted) are analyzed
• ⚠️ Unused keys: yellow warning icon if an added key is not used
• 💬 Detailed tooltip: displays translations + links to files using the key
• 🔄 Automatic analysis: local changes are analyzed automatically when translation files are saved
• ▶️ Refresh: button to re-run the analysis manually

Note: This view is useful to verify that your new translation keys are used before committing.

Duplicate Keys

Dedicated view that detects duplicate translation keys within translation files modified in your branch or locally.

• ⚠️ Duplicate detection: scans translation files for keys that appear more than once in the same file
• 🟰 Same/different value: indicates whether all occurrences of a duplicate key have the same value or different values
• 🌐 Cross-file grouping: duplicates are grouped by key name, with flag icons and language codes for each file
• 🟡 Yellow highlighting: duplicate keys are highlighted in yellow in the editor, distinct from used/unused decorations
• 🔧 Interactive fix: QuickPick dialog lets you choose which occurrence to keep for each duplicate key
• 🔍 CodeLens: "⚠️ Duplicate key (N occurrences)" displayed above each duplicate with a click to fix
• ⚠️ Status bar warning: yellow warning in the status bar when duplicates are present
• 🔢 Badge: the Duplicates panel shows a badge with the total duplicate count
• 🖱️ Clickable tooltips: flag images, language codes and line numbers in tooltips navigate directly to occurrences
• 💬 Hover with usages: hovering a duplicate key still shows all usage locations from the codebase
• 🔔 Notification: warning notification on detection with "Fix Duplicates" and "Notification Settings" buttons
• ⚙️ Configurable notifications: eskerLgKeys.duplicateNotifications setting to toggle alerts (default: enabled)
• 👁️ Auto-hide panel: the Duplicates panel is hidden when no duplicates are found
• 🔄 Automatic analysis: runs on file save, git state changes and branch switches
• ▶️ Refresh: button to re-run the analysis manually

Note: This view helps catch accidental duplicate keys that can cause translation issues.

Automatic Updates

• 🔄 Automatic check: the extension periodically checks for new versions on the VS Code Marketplace
• 📢 Update notification: a dedicated panel in the sidebar shows available update details
• ⬇️ One-click update: install the latest version directly from the notification panel
• 📋 Changelog: view the changelog from the update panel or via the Command Palette

General

• 🔄 Asynchronous loading (2-phase):
  • Phase 1 - Package keys (instantaneous): Package translation keys are loaded and displayed immediately for instant feedback
  • Phase 2 - Global keys (background): Global translations are loaded in the background
  • Auto-refresh: Decorations and tree view are automatically updated as each phase completes
• 🌍 Global keys integration:
  • Loads English translation files (*en.xml, case-insensitive)
  • Keys display with (Global) label in hover tooltips
  • Prevents false "Undefined Key" warnings for shared keys
  • Read-only enforcement: editing is disabled when only global keys are available
• 📊 Loading indicator: status bar and side panel message during loading
• 📍 Key origin display: hover tooltips and tree icons show key source - (Package) or (Global)
• 🔧 Configurable extensions: customizable supported file types (.js, .ts, .cs, etc.)
• 👁️ Toggle highlight: enable/disable highlighting via the panel
• 📁 Flexible detection: loads all XML files from lg/ and lg_*/ directories

Key Detection

Code files (.js, .ts, .cs, etc.)

Only keys within strings (enclosed in ", ' or `) are detected.

// ✅ Detected (inside a string)
const msg = Lg("_MyTranslationKey");

// ❌ Not detected (not a string)
const _MyVariable = 123;

HTML template files (.html, .htm, .cshtml)

Keys in %[KEY_NAME] format are automatically detected.

<!-- ✅ Detected -->
<p>%[WELCOME_MESSAGE]</p>
<button>%[BUTTON_SUBMIT]</button>

Configuration

The extension provides detailed settings to customize the appearance of defined and missing keys (background color, border, underline, etc.) through the eskerLgKeys.definedKey.* and eskerLgKeys.undefinedKey.* settings.

Usage

The extension works automatically in any workspace containing one or more lg/ or lg_*/ folders with XML translation files.