VSCode Asset Autocomplete

April 15, 2026 · View on GitHub

VSCode Asset Autocomplete is a powerful VSCode extension that provides intelligent translation key autocomplete and asset path completions for Flutter, React, and React Native projects. Version 1.0.0 introduces native translation management directly within VSCode - no external CLI tools required!

✨ Features

🔤 Smart Translation Management

Intelligent autocomplete for translation keys from your JSON i18n files
Reverse-lookup suggestions from translation text
Multi-level nested key support with dot notation
Native extraction and merging - no CLI dependencies needed
Language support:
- Dart (Flutter)
- JavaScript / TypeScript (React, React Native)

🖼️ Asset Path Autocompletion

Provides completions for files in your asset folder:
- assets/ for Flutter projects
- src/assets/ for React/React Native projects

🚀 Built-in Translation Commands

⭐ Native Translation Management (No CLI Required!)

I18n: Native Extract All – Extract translations for all configured languages
I18n: Native Extract – Extract for a specific language (with picker)
I18n: Merge – Merge translation files
I18n: Analyze Translations – Analyze translations without generating files
I18n: Configure Language – Add new language to configuration

Smart Extraction Features:

✅ Preserves existing translations - keeps your translated text intact
✅ Adds new keys only - found in source code
✅ Removes orphan keys - no longer used in code
✅ Flat key structure - simple "key.name": "value" format
✅ Works with nested files - converts to flat automatically
✅ Zero external dependencies - everything runs within VSCode

⚙️ Configuration

Quick Setup

Add this configuration to your .vscode/settings.json file:

For Dart/Flutter Projects:

{
  "i18n-autocomplete.languages": ["en", "vi"],
  "i18n-autocomplete.projectLanguage": "dart",
  "i18n-autocomplete.jsonPath": "assets/i18n",
  "i18n-autocomplete.localeFileMode": "multiple",
  "i18n-autocomplete.localeFilePattern": "*.json",
  "i18n-autocomplete.sourceDirs": ["lib/", "src/"],
  "i18n-autocomplete.excludePatterns": [
    "**/*.test.dart",
    "**/*.g.dart",
    "**/build/**",
    "**/.dart_tool/**"
  ]
}

For TypeScript/JavaScript Projects:

{
  "i18n-autocomplete.languages": ["en", "vi"],
  "i18n-autocomplete.projectLanguage": "typescript",
  "i18n-autocomplete.jsonPath": "src/locales",
  "i18n-autocomplete.localeFileMode": "multiple",
  "i18n-autocomplete.localeFilePattern": "*.json",
  "i18n-autocomplete.sourceDirs": ["src/", "components/", "pages/"],
  "i18n-autocomplete.excludePatterns": [
    "**/*.test.ts",
    "**/*.test.js",
    "**/*.spec.ts",
    "**/node_modules/**",
    "**/dist/**",
    "**/build/**"
  ]
}

Minimal Configuration (uses defaults):

{
  "i18n-autocomplete.languages": ["en", "vi"],
  "i18n-autocomplete.projectLanguage": "typescript"
}

Single file per locale (e.g. `assets/i18n/en.arb`):

{
  "i18n-autocomplete.jsonPath": "assets/i18n",
  "i18n-autocomplete.languages": ["en", "vi"],
  "i18n-autocomplete.localeFileMode": "single",
  "i18n-autocomplete.localeFilePattern": "*.arb"
}

Multiple files per locale (default, e.g. `assets/i18n/en/*.json`):

{
  "i18n-autocomplete.jsonPath": "assets/i18n",
  "i18n-autocomplete.languages": ["en", "vi"],
  "i18n-autocomplete.localeFileMode": "multiple",
  "i18n-autocomplete.localeFilePattern": "*.json",
  "i18n-autocomplete.multipleModeConcatNamespace": false,
  "i18n-autocomplete.preferredTranslationLanguage": "en"
}

Nếu muốn tự thêm namespace khi key thiếu namespace trong multiple mode:

{
  "i18n-autocomplete.multipleModeConcatNamespace": true
}

Configuration Settings

Setting	Description	Default
`i18n-autocomplete.languages`	List of language codes for extraction	`["en", "vi"]`
`i18n-autocomplete.projectLanguage`	Project type: "dart" or "typescript"	`"typescript"`
`i18n-autocomplete.jsonPath`	Path to the i18n translation folder	`"assets/i18n"`
`i18n-autocomplete.sourceDirs`	Source directories to scan for translations	`["src/"]`
`i18n-autocomplete.excludePatterns`	Files/folders to exclude from scanning	`["*/.test.ts", "/node_modules/"]`
`i18n-autocomplete.translationFunctions`	Function names used for translation matching	`["t", "translate"]`
`i18n-autocomplete.localeFileMode`	Locale file layout mode: single or multiple	`"multiple"`
`i18n-autocomplete.localeFilePattern`	Locale filename pattern (glob-like or regex literal)	`"*.json"`
`i18n-autocomplete.multipleModeConcatNamespace`	In multiple mode, auto-prefix namespace from filename when key is missing namespace	`false`
`i18n-autocomplete.preferredTranslationLanguage`	Preferred locale for translated text shown in autocomplete	`""`
`i18n-autocomplete.assetPath`	Path to your asset folder	`"assets"`

🧠 Supported Languages

Dart (.dart)
JavaScript (.js, .mjs, .jsx)
TypeScript (.ts, .tsx)

💻 Commands

All commands are available through the Command Palette (Ctrl+Shift+P / Cmd+Shift+P):

Command	Description
I18n: Native Extract All	Extract translations for all configured languages
I18n: Native Extract	Extract for a specific language (with picker)
I18n: Merge	Merge translation files
I18n: Analyze Translations	Analyze translations without generating files
I18n: Configure Language	Add new language to configuration
l10n: Extract	Extract for specific locale (with prompt)
l10n: Extract All Languages	Extract for all configured languages

🛠 Requirements

Version 1.0.0 and above: No external dependencies required! The extension now handles translation management natively within VSCode.

📦 Installation

Search for "vscode-asset-autocomplete" in the VSCode Extensions Marketplace or install manually from VSIX.

🚀 Quick Start

Install the extension from the marketplace
Configure your project by adding settings to .vscode/settings.json
Start using commands via Command Palette (Ctrl+Shift+P)
- Try "I18n: Native Extract All" to extract all translation keys
- Use "I18n: Configure Language" to add new languages

No additional setup or CLI tools required!

🧪 Feedback / Contributions

Contributions and feature requests are welcome!
Open an issue or PR on GitHub.