Sheet Language Global Helper

A VS Code extension that fetches multilingual data from Google Sheets and displays it via hover in your code.

🌐 Languages

English (Current)
한국어 (Korean)

🔗 Links

📦 VS Code Marketplace
💻 GitHub Repository

✨ Features

📊 Google Sheets Integration: Fetch data via Service Account JSON, Google Sheets API key, JSON API URL, or CSV URL
🔍 Hover Feature: Hover over keys starting with WD, ST, CD in your code to see multilingual information
🏷️ Inline Translation (Inlay Hints): Show translations inline next to keys and translation calls (no hover needed)
💾 Local Caching: Data is stored in local storage for offline use
🔄 Manual Sync: Update to the latest data only when needed
📝 Multi-Sheet Support: Fetch multiple sheets (WD, ST, CD, etc.) at once

Complete Workflow

flowchart LR
    A[Google Sheets] -->|API or CSV| B[Data Sync]
    B --> C[Local Storage<br/>Save]
    C --> D[Write Code<br/>in VS Code]
    D --> E[Hover over Keys<br/>WD000001, ST000001, etc.]
    E --> F[Hover Popup<br/>Multilingual Info]
    
    style A fill:#c8e6c9,color:#000000
    style B fill:#b3e5fc,color:#000000
    style C fill:#e1bee7,color:#000000
    style D fill:#ffe0b2,color:#000000
    style E fill:#ffe0b2,color:#000000
    style F fill:#c8e6c9,color:#000000

🚀 Getting Started

Installation

Open VS Code Extensions Marketplace with Ctrl + Shift + X (or Cmd + Shift + X on Mac)
Search for "Sheet Language Global Helper"
Click Install

Configuration

Open VS Code settings with Ctrl + , (or Cmd + , on Mac) and search for "Sheet Language Global Helper".

If hint-related settings (Show Inline Translation, Inline Translation Language, Hover Key Patterns) do not appear:

Scroll down in the extension settings — they may be below the sheet/API options.
Search for inline or hoverKey in the settings search box to jump to them.
Add manually — Cmd + Shift + P → "Open User Settings (JSON)", then add:

"languageHelper.showInlineTranslation": true,
"languageHelper.inlineTranslationLanguage": "ko",
"languageHelper.hoverKeyPatterns": "WD,ST,CD"

Also ensure Editor: Inlay Hints is set to on in VS Code settings so inline hints are visible.

Data source priority: Service Account JSON → API Key → JSON API URL → CSV URL (first available is used).

Method 1: Service Account JSON (Priority 1, recommended for private sheets)

Create a Service Account
- Go to Google Cloud Console → IAM & Admin → Service Accounts → Create Service Account
- Create a key (JSON) and download the file
Share the spreadsheet with the service account email (e.g. xxx@project.iam.gserviceaccount.com) as Viewer
VS Code Settings
- Sheet Service Account Json: Paste the entire contents of the JSON key file (not the file path)
- Sheet Id or Sheet Url: Spreadsheet ID or full URL
- All Sheet Names / Target Sheet Names: Choose which sheets to fetch

Method 2: Google Sheets API Key (Priority 2)

Get API Key
- Go to Google Cloud Console → APIs & Services > Library → Enable "Google Sheets API"
- APIs & Services > Credentials > Create API Key
Share Sheet Settings ⚠️ Required
- Open your Google Spreadsheet → Share → Anyone with the link → Viewer
VS Code Settings
- Sheet Api Key: Enter your API key
- Sheet Id: Spreadsheet ID or full URL
- All Sheet Names / Target Sheet Names: As needed

Method 3: JSON API URL (Priority 2 alternative)

Use a URL that returns JSON (e.g. your own API or published JSON).
Sheet Json Url: Enter the URL. Response must be an array [{ "key", "ko", "en", ... }] or an object { "WD001": { "ko": "...", "en": "..." }, ... }.

Method 4: CSV URL (Priority 3)

In Google Spreadsheet, go to File > Share > Publish to web → Select CSV format
Sheet Url: Enter the generated CSV URL

💡 Priority: Service Account JSON → API Key or JSON URL → CSV URL. The first one you configure is used.

Configuration Method Comparison

flowchart TD
    A[Start Configuration] --> B{Service Account JSON?}
    B -->|Yes| C[Method 1: Service Account JSON]
    B -->|No| F{API Key?}
    F -->|Yes| D[Method 2: Google Sheets API]
    F -->|No| G{JSON URL?}
    G -->|Yes| H[Method 3: JSON API URL]
    G -->|No| I[Method 4: CSV URL]
    
    C --> C1[Paste full JSON key in<br/>Sheet Service Account Json]
    C1 --> E[Run Sync]
    D --> D1[Enter sheetApiKey, sheetId]
    D1 --> E
    H --> H1[Enter Sheet Json Url]
    H1 --> E
    I --> I1[Enter Sheet Url - CSV]
    I1 --> E
    
    style C fill:#c8e6c9,color:#000000
    style D fill:#b3e5fc,color:#000000
    style H fill:#e1bee7,color:#000000
    style I fill:#ffe0b2,color:#000000
    style E fill:#b3e5fc,color:#000000

📖 Usage

Data Synchronization

Press Ctrl + Shift + P → Run "Sheet Language Global Helper: Sheet Connect Sync"
Confirm the sync completion message

Synchronization Process

flowchart LR
    A[Run Command<br/>Ctrl+Shift+P] --> B{Data source?}
    B -->|Service Account JSON| C[Sheets API - OAuth]
    B -->|API Key| C
    B -->|JSON URL| D[JSON API<br/>Fetch Data]
    B -->|CSV URL| E2[CSV URL<br/>Fetch Data]
    
    C --> C1{allSheetNames?}
    C1 -->|Yes| C2[Fetch All Sheets]
    C1 -->|No| C3[targetSheetNames]
    C2 --> E[Parse & Save]
    C3 --> E
    D --> E
    E2 --> E
    
    E --> F[Local Storage]
    F --> G[Sync Complete]
    
    style A fill:#b3e5fc,color:#000000
    style C fill:#c8e6c9,color:#000000
    style D fill:#e1bee7,color:#000000
    style E2 fill:#ffe0b2,color:#000000
    style G fill:#c8e6c9,color:#000000

View Multilingual Info via Hover

Hover over keys matching the patterns specified in hoverKeyPatterns to see multilingual information:

const code = "WD000001";  // Shows multilingual info on hover
getLang("ST000001");      // Also detects inside function calls
t("CD000001");            // Supports getLang, t, i18n, translate, etc.

Display Info: 🇰🇷 KO, 🇺🇸 EN, 🇯🇵 JA

Hover Example

Example: Hovering over WD000527 displays multilingual translations (EN: Client, KO: 클라이언트)

How Hover Works

flowchart TD
    A[Hover over Code] --> B{Pattern Match<br/>WD/ST/CD + Numbers}
    B -->|Matched| C[Query Local Storage<br/>Data]
    B -->|Not Matched| D[No Hover]
    
    C --> E{Data Exists?}
    E -->|Yes| F[Display Multilingual Info<br/>🇰🇷 KO, 🇺🇸 EN, 🇯🇵 JA]
    E -->|No| D
    
    F --> G[Show Hover Popup]
    
    style A fill:#b3e5fc,color:#000000
    style B fill:#ffe0b2,color:#000000
    style C fill:#e1bee7,color:#000000
    style F fill:#c8e6c9,color:#000000
    style G fill:#c8e6c9,color:#000000

Show Inline Translation (Inlay Hints)

After running sync, translations can be displayed inline (without hover) as inlay hints:

t("WD000001");         // → Hello (based on inlineTranslationLanguage)
t("프로그램 등록");      // → Program Registration (if your sheet key is the Korean text)

Inlay Hints Example

Note: Inlay hints are refreshed automatically after sync and when related settings change.

⚙️ Configuration

Setting	Description	Required	Default
`sheetApiKey`	Google Sheets API Key	When using API	-
`sheetId`	Spreadsheet ID	Optional	-
`allSheetNames`	Fetch all sheets	Optional	`true`
`targetSheetNames`	Target sheet list (comma-separated)	Optional	`WD,ST,CD`
`hoverKeyPatterns`	Hover/Hint key patterns (comma-separated). Used to detect codes like `WD123`, `ST123`.	Optional	`WD,ST,CD`
`showInlineTranslation`	Show inline translation as inlay hints	Optional	`true`
`inlineTranslationLanguage`	Language to display for inline translation (dropdown: `ko`, `en`, `ja`, etc.)	Optional	`ko`
`sheetUrl`	CSV URL	When using CSV	-

How It Works

flowchart TD
    A[Run Sync Command] --> B{API Key Configured?}
    
    B -->|Yes| C[Use Google Sheets API]
    B -->|No| D[Use CSV URL]
    
    C --> C1{allSheetNames<br/>Checked?}
    C1 -->|Yes| C2[Fetch All Sheets<br/>Auto Query Sheet List]
    C1 -->|No| C3[targetSheetNames<br/>Fetch Specified Sheets Only<br/>e.g., WD,ST,CD]
    
    C2 --> E[Parse CSV Data]
    C3 --> E
    D --> E
    
    E --> F[Save to Local Storage]
    F --> G[Available for Hover]
    
    style B fill:#ffe0b2,color:#000000
    style C fill:#c8e6c9,color:#000000
    style D fill:#ffe0b2,color:#000000
    style C2 fill:#b3e5fc,color:#000000
    style C3 fill:#b3e5fc,color:#000000
    style F fill:#e1bee7,color:#000000
    style G fill:#c8e6c9,color:#000000

Summary:

API Key Available: Use Google Sheets API
- allSheetNames checked → Fetch all sheets
- allSheetNames unchecked → Fetch only sheets specified in targetSheetNames
No API Key: Use CSV URL (single sheet only)

📝 Spreadsheet Format

key	ko	en	ja
WD000001	안녕하세요	Hello	こんにちは
ST000001	감사합니다	Thank you	ありがとう

First row is used as header
key column is required; ko, en, ja are optional

🐛 Troubleshooting

"API Key is Invalid"

Verify Google Sheets API is enabled
Check if the sheet is shared with "Anyone with the link"

"Sheet ID is Incorrect"

Verify the ID is correctly extracted from the spreadsheet URL

Hover Not Working

Make sure data synchronization has been run first
Verify you're using keys starting with WD, ST, CD in your code

🛠️ Development

Requirements

Node.js 20.x or higher (Required)
pnpm (or npm)

Installation and Build

# Install dependencies
pnpm install

# Development mode (watch)
pnpm run watch

# Production build
pnpm run build

Testing

Press F5 to run Extension Development Host
Create a test file in the new window
Hover over codes like WD000001 to verify

📦 Deployment

Prerequisites

Create account/organization on Azure DevOps
Generate Personal Access Token (Marketplace > Manage permission required)

Deployment Process

flowchart TD
    A[Modify Code] --> B[Update package.json<br/>version]
    B --> C[pnpm run build<br/>Production Build]
    C --> D{Build Success?}
    D -->|Failed| E[Fix Errors]
    E --> C
    D -->|Success| F[vsce publish<br/>--no-dependencies]
    F --> G[Enter Personal Access Token]
    G --> H[VSIX Packaging<br/>Auto Execute]
    H --> I[Upload to Marketplace]
    I --> J[Deployment Complete<br/>Reflected in a few minutes]
    
    style A fill:#ffe0b2,color:#000000
    style B fill:#b3e5fc,color:#000000
    style C fill:#ffe0b2,color:#000000
    style F fill:#e1bee7,color:#000000
    style J fill:#c8e6c9,color:#000000

Deployment Commands

# 1. Install vsce
pnpm add -g @vscode/vsce

# 2. Build
pnpm run build

# 3. Package VSIX
pnpm run package:vsix

# 4. Deploy (skip dependency check)
vsce publish --no-dependencies -p <YOUR_PERSONAL_ACCESS_TOKEN>

Update Deployment

⚠️ Important: You must increment the version in package.json before redeploying after code changes.

# 1. Update version in package.json (e.g., 0.0.1 → 0.0.2)
# 2. Build and deploy
pnpm run build
vsce publish --no-dependencies -p <TOKEN>

Apply Icon

Add icon.png to root folder (128x128 recommended)
Add "icon": "icon.png" to package.json
Update version and redeploy

📄 License

MIT

🤝 Contributing

Issues and pull requests are welcome!

Made with ❤️ for better multilingual development experience

Sheet Language Global Helper

language-global-helper

Sheet Language Global Helper

🌐 Languages

🔗 Links

✨ Features

Complete Workflow

🚀 Getting Started

Installation

Configuration

Method 1: Service Account JSON (Priority 1, recommended for private sheets)

Method 2: Google Sheets API Key (Priority 2)

Method 3: JSON API URL (Priority 2 alternative)

Method 4: CSV URL (Priority 3)

Configuration Method Comparison

📖 Usage

Data Synchronization

Synchronization Process

View Multilingual Info via Hover

Hover Example

How Hover Works

Show Inline Translation (Inlay Hints)

Inlay Hints Example

⚙️ Configuration

How It Works

📝 Spreadsheet Format

🐛 Troubleshooting

"API Key is Invalid"

"Sheet ID is Incorrect"

Hover Not Working

🛠️ Development

Requirements

Installation and Build

Testing

📦 Deployment

Prerequisites

Deployment Process

Deployment Commands

Update Deployment

Apply Icon

📄 License

🤝 Contributing