✨ Features

• 🔍 Shows translation values for each language when hovering over translation keys in templates
• 📋 One-click copy of translation value or key
• 📂 Jump directly to the translation file and key location
• ⚙️ Configurable translation file globs and language priority
• 🛡️ Diagnostics for missing translation keys
• 🧪 Comprehensive test coverage with Jest

📥 Installation

1. Open the Extensions view in Visual Studio Code (Cmd+Shift+X or Ctrl+Shift+X).
2. Search for Peek & Patch and click Install.
3. Once installed, the extension is ready to use!

🚀 Usage

1. Open a template file (HTML).
2. Hover over any translation key in the format {{ 'key.subkey' | translate }}.
3. A tooltip will appear showing:
   • The translation value for each language (EN always on top)
   • [Copy Value] and [Go to File] buttons for each language
   • [Copy Key] button in the footer

💡 Example

For translation files like:

// en.json
{
  "parent": {
    "child": {
      "target": "Hello!"
    }
  }
}

// fr.json
{
  "parent": {
    "child": {
      "target": "Bonjour!"
    }
  }
}

Hovering over {{ 'parent.child.target' | translate }} shows:

EN → Hello!   [Copy Value] [Go to File]
FR → Bonjour! [Copy Value] [Go to File]

[Copy Key]

⚙️ Configuration

You can configure the translation file globs and their priority:

1. Open VS Code Settings (Cmd+, or Ctrl+,).
2. Search for "Peek & Patch".
3. Edit the peekAndPatch.translationFiles array to match your translation file locations and desired priority (topmost has highest priority).

Example:

{
  "peekAndPatch.translationFiles": [
    "src/assets/i18n/*.json",
    "src/locales/*.json"
  ]
}

🛠️ Development

Project Structure

peek-and-patch/
├── src/
│   ├── extension.ts      # Main extension code
│   └── test/             # Test files
├── package.json          # Extension manifest
├── tsconfig.json         # TypeScript configuration
├── esbuild.cjs           # Build script
└── jest.config.js        # Jest configuration

Testing

The extension uses Jest for testing. Tests are located in src/test/.

To run tests:

npm test

Building

npm run compile    # Compile the extension
npm run watch      # Watch mode for development
npm run lint       # Run ESLint

📜 License

This project is licensed under the MIT License. See the LICENSE file for more details.