Lab 1.3: Workbench Optimization & VS Code Mechanics

Objective

In this lab, you will optimize your Visual Studio Code workbench for localization engineering. You will practice split-screen navigation for multi-lingual side-by-side QA, configure essential editor display settings (word wrap, status bar indicators), and master keyboard shortcuts across multi-lingual test files.

Step-by-Step Instructions

Step 1: Create Multi-Lingual Test Assets

1. Inside assets/loc/games/, create two files: dialogue_en-US.json and dialogue_ja-JP.json.

2. dialogue_en-US.json content:

   json
   {
     "quest_01_title": "The Forgotten Temple",
     "quest_01_desc": "Explore the ancient ruins south of the river and locate the sacred artifact before nightfall.",
     "btn_accept": "Accept Quest",
     "btn_decline": "Decline"
   }

3. dialogue_ja-JP.json content:

   json
   {
     "quest_01_title": "忘れられた寺院",
     "quest_01_desc": "川の南にある古代の遺跡を探索し、日没前に聖なる遺物を見つけ出してください。",
     "btn_accept": "クエストを受ける",
     "btn_decline": "辞退する"
   }

Step 2: Configure Word Wrap & Status Bar Inspection

1. Open dialogue_en-US.json.

2. Toggle Word Wrap (Option + Z on macOS / Alt + Z on Windows).

3. Inspect the Status Bar: verify UTF-8 encoding and JSON language mode.

Step 3: Set Up Side-by-Side Split View for QA Alignment

Localization engineers frequently compare source text against localized target files to check key alignment and string formatting.

1. Click on the dialogue_en-US.json tab in the editor.

2. Split the editor group:

   • macOS: Press Cmd + \ (or right-click the editor tab and select Split Right).

   • Windows: Press Ctrl + \ (or right-click the editor tab and select Split Right).

3. In the right-hand editor group, open dialogue_ja-JP.json using the Explorer panel or Quick Open (Cmd + P / Ctrl + P).

4. You now have English source on the left and Japanese target on the right. Verify that every key on the left matches its corresponding key on the right row-by-row.

+-----------------------------------+-----------------------------------+
| dialogue_en-US.json               | dialogue_ja-JP.json               |
| 1 {                               | 1 {                               |
| 2   "quest_01_title": "The...",   | 2   "quest_01_title": "忘れ...",   |
| 3   "btn_accept": "Accept Quest"  | 3   "btn_accept": "クエスト...", |
| 4 }                               | 4 }                               |
+-----------------------------------+-----------------------------------+

Step 4: Master Command Palette Navigation & Quick Open

Practice navigating complex workspace file structures without using your mouse.

1. Open the Command Palette:

   • macOS: Cmd + Shift + P

   • Windows: Ctrl + Shift + P

2. Type Change Language Mode and press Enter.

3. Select JSON to re-enforce syntax highlighting rules explicitly.

4. Press Cmd + P (macOS) / Ctrl + P (Windows) to open the Quick File Picker.

5. Type captions_en.vtt and press Enter to open your media subtitle asset from Lab 1.1 instantly.

Self-Verification Checklist

Before completing Module 1, verify your workbench mastery against these metrics:

• [ ] Word Wrap toggles reliably (Option + Z / Alt + Z) without horizontal scrolling.

• [ ] VS Code Status Bar explicitly displays UTF-8 and JSON language mode.

• [ ] Side-by-side split view is active with source text on the left and target text on the right.

• [ ] You can launch the Command Palette (Cmd+Shift+P / Ctrl+Shift+P) and Quick Open (Cmd+P / Ctrl+P) fluently using keyboard shortcuts.