VS Code Copilot

GitHub Copilot Integration

GitHub Copilot in VS Code can be configured to understand your i18n workflow and suggest translation-aware code completions.

Note on MCP Support

GitHub Copilot doesn't currently support MCP servers natively. However, you can still optimize your i18n workflow using Copilot Instructions and the IntlPull CLI. For full MCP support, consider Cursor or Claude Code.

Quick Start

1. Install the IntlPull CLI:

npm install -g @intlpullhq/cli

2. Create Copilot instructions file:

mkdir -p .github && touch .github/copilot-instructions.md

Copilot Instructions

Create .github/copilot-instructions.md to teach Copilot your i18n patterns:

# Translation Guidelines

This project uses i18next for internationalization.

## Key Conventions
- Use `useTranslation` hook for all user-facing text
- Import from react-i18next: `import { useTranslation } from 'react-i18next'`
- Key format: namespace.section.element (e.g., checkout.form.submitButton)

## Example Usage
```tsx
import { useTranslation } from 'react-i18next';

function Button() {
  const { t } = useTranslation('common');
  return <button>{t('buttons.submit')}</button>;
}
```

## Translation Files
- Location: ./messages/{lang}.json
- Source language: English (en)
- Use IntlPull CLI for syncing: `npx @intlpullhq/cli upload` and `npx @intlpullhq/cli download`

## Never Hardcode
- Button labels, form labels, error messages
- Navigation items, page titles, headings
- Placeholder text, tooltips, descriptions

## Pluralization
Use ICU message format:
```json
{
  "items": "{count, plural, =0 {No items} one {# item} other {# items}}"
}
```

Workflow with IntlPull CLI

While Copilot suggests translation-aware code, use the CLI for translation management:

Push new keys

npx @intlpullhq/cli upload

Uploads new translation keys to IntlPull.

Check for missing translations

npx @intlpullhq/cli check

Finds missing translations across all languages.

Translate missing content

npx @intlpullhq/cli translate --lang es,fr,de

Auto-translates missing strings to target languages.

Pull translations

npx @intlpullhq/cli download

Downloads latest translations to local files.

VS Code Tasks

Add these tasks to .vscode/tasks.json for quick access:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "IntlPull: Push translations",
      "type": "shell",
      "command": "npx @intlpullhq/cli upload",
      "problemMatcher": []
    },
    {
      "label": "IntlPull: Pull translations",
      "type": "shell",
      "command": "npx @intlpullhq/cli download",
      "problemMatcher": []
    },
    {
      "label": "IntlPull: Translate missing",
      "type": "shell",
      "command": "npx @intlpullhq/cli translate --lang es,fr,de",
      "problemMatcher": []
    },
    {
      "label": "IntlPull: Check status",
      "type": "shell",
      "command": "npx @intlpullhq/cli status",
      "problemMatcher": []
    }
  ]
}

Run tasks with Cmd+Shift+P → "Tasks: Run Task"

Using Copilot Chat

With your instructions file in place, Copilot Chat understands your i18n setup:

Ask about extraction

"What hardcoded strings in this file should be translated?"

Get key suggestions

"Suggest translation keys for the strings in this component"

Refactor component

"Refactor this to use useTranslation hook for all text"

Want Full MCP Integration?

For direct IntlPull integration where AI can create keys, translate, and sync without leaving the editor, try these MCP-enabled tools:

Cursor

VS Code fork with MCP

Claude Code

CLI with MCP

Next Steps

CLI Reference Framework Integrations API Reference