Translation Editor - VS Code Extension

A powerful VS Code extension for managing i18n JSON translation files with support for English, Traditional Chinese (HK), and Simplified Chinese.

Features

🎯 Core Functionality

• Visual Translation Editor: Edit translations in a user-friendly grid interface
• Multi-language Support: English, Traditional Chinese (HK), and Simplified Chinese
• Real-time Validation: Detect punctuation mismatches between languages
• Search & Filter: Quickly find translation keys or content
• Change Tracking: See which translations have been modified

📁 File Management

• Smart Export: Only export files that have actually changed
• Minimal Git Diffs: Alphabetically sorted keys for clean version control
• CSV Export: Export all translations to spreadsheet format
• Direct File Integration: Work directly with your project's JSON files

🔧 VS Code Integration

• Tree View: Browse translation files in the Explorer sidebar
• Status Bar: See translation statistics at a glance
• Commands: Access all features via Command Palette
• Configuration: Customize file paths via VS Code settings
• Diagnostics: View validation errors in the Problems panel

🚀 Productivity Features

• Add New Translations: Built-in modal for adding new translation items
• Copy Keys: Click any translation key to copy to clipboard
• Batch Operations: Add multiple translations at once
• Auto-validation: Automatic validation on file changes

Installation

Development

1. Clone this repository
2. Run npm install to install dependencies
3. Open the project in VS Code
4. Press F5 to launch the Extension Development Host
5. Open a workspace with translation files

From VSIX (when packaged)

1. Download the .vsix file
2. Open VS Code
3. Run Extensions: Install from VSIX... command
4. Select the downloaded file

Configuration

Configure the extension in your VS Code settings:

{
  "translationEditor.paths": {
    "en": "./src/translation/en/HK/hk.json",
    "hk": "./src/translation/hk/HK/hk.json", 
    "zh": "./src/translation/zh/HK/hk.json"
  },
  "translationEditor.autoValidate": true,
  "translationEditor.showStatusBar": true
}

Settings

Usage

Opening the Translation Editor

• Command Palette: Translation: Open Translation Editor
• Tree View: Click on any translation file in the sidebar
• Status Bar: Click on the translation statistics

Adding New Translations

1. Click "Add New Item" in the editor
2. Fill in the translation key and values for each language
3. Click "Add Item" to save

Exporting Translations

• Save Changes: Saves modified files back to your project
• Export to CSV: Downloads a CSV file with all translations
• Export to Directory: (Future feature) Export to a selected directory

Validation

The extension automatically validates:

• Punctuation Consistency: Warns when English punctuation appears in Chinese text and vice versa
• Missing Translations: Highlights empty translation values
• Key Consistency: Ensures keys exist across all language files

Commands

File Structure

The extension expects JSON files with flat key-value structure:

{
  "welcomeMessage": "Welcome to our app",
  "loginButton": "Login",
  "errorMessages.invalid": "Invalid input"
}

Development

Building

npm run compile

Watching for Changes

npm run watch

Running Tests

npm test

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Changelog

1.0.0

• Initial release
• Basic translation editing functionality
• Multi-language support (EN, HK, ZH)
• Validation and export features
• VS Code integration