VS Code ARB Extensions: Translation Suggestions, Validation, and Localization Tools

Finding the right VS Code extensions for Flutter ARB files can dramatically improve your localization workflow. This guide covers the best extensions for translation suggestions, ARB validation, and managing your Flutter localization files directly in VS Code.

Best VS Code Extensions for ARB Files

1. Flutter Intl (localizely.flutter-intl)

The most popular extension for Flutter localization in VS Code:

Features:

• Automatic ARB file generation
• IntelliSense for translation keys
• Extract string to ARB refactoring
• Pluralization support
• Generate localization code on save

Installation:

ext install localizely.flutter-intl

Configuration in settings.json:

{
  "flutter-intl.localizationFile": "lib/l10n/intl_en.arb",
  "flutter-intl.outputDirectory": "lib/generated",
  "flutter-intl.nullSafety": true
}

Usage:

1. Right-click on a hardcoded string
2. Select "Extract to ARB"
3. Enter the translation key
4. The extension adds the entry to your ARB file

2. ARB Editor (AoDev.arb-editor)

A dedicated ARB file editor with visual interface:

Features:

• Side-by-side translation view
• Missing translation detection
• Placeholder validation
• JSON syntax highlighting for ARB
• Quick navigation between language files

Installation:

ext install AoDev.arb-editor

Configuration:

{
  "arb-editor.localeDirectory": "lib/l10n",
  "arb-editor.templateLocale": "en"
}

3. i18n Ally (lokalise.i18n-ally)

Powerful extension supporting multiple i18n formats including ARB:

Features:

• Inline translation previews
• Machine translation integration
• Translation progress tracking
• Review and annotation system
• Side-by-side language comparison

Installation:

ext install lokalise.i18n-ally

Configuration for Flutter ARB:

{
  "i18n-ally.localesPaths": ["lib/l10n"],
  "i18n-ally.keystyle": "nested",
  "i18n-ally.enabledFrameworks": ["flutter-arb"],
  "i18n-ally.sourceLanguage": "en"
}

Getting Translation Suggestions in VS Code

Using i18n Ally for Translation Suggestions

i18n Ally provides translation suggestions from multiple sources:

{
  "i18n-ally.translate.engines": [
    "google",
    "deepl"
  ],
  "i18n-ally.translate.google.apiKey": "your-api-key",
  "i18n-ally.translate.deepl.apiKey": "your-api-key"
}

How to get suggestions:

1. Open an ARB file
2. Hover over an untranslated key
3. Click "Translate" in the hover menu
4. Select from suggested translations
5. Accept or modify the suggestion

Manual Translation Workflow

Without API keys, use this workflow:

// app_en.arb - English (source)
{
  "welcomeMessage": "Welcome to our app",
  "@welcomeMessage": {
    "description": "Greeting shown on home screen"
  }
}

// app_es.arb - Spanish (target)
{
  "welcomeMessage": "Bienvenido a nuestra aplicación",
  "@welcomeMessage": {
    "description": "Greeting shown on home screen"
  }
}

Validating ARB Files in VS Code

JSON Schema for ARB Validation

Create a schema file for ARB validation:

// .vscode/arb-schema.json
{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "type": "object",
  "patternProperties": {
    "^@@": {
      "description": "ARB metadata"
    },
    "^@[^@]": {
      "type": "object",
      "properties": {
        "description": { "type": "string" },
        "placeholders": {
          "type": "object",
          "additionalProperties": {
            "type": "object",
            "properties": {
              "type": { "type": "string" },
              "example": { "type": "string" },
              "format": { "type": "string" }
            }
          }
        }
      }
    },
    "^[^@]": {
      "type": "string",
      "description": "Translation string"
    }
  }
}

Link schema in settings.json:

{
  "json.schemas": [
    {
      "fileMatch": ["*.arb"],
      "url": "./.vscode/arb-schema.json"
    }
  ]
}

Common ARB Validation Errors

1. Missing metadata:

// Wrong - no description
{
  "welcomeTitle": "Welcome"
}

// Correct - includes metadata
{
  "welcomeTitle": "Welcome",
  "@welcomeTitle": {
    "description": "Title on welcome screen"
  }
}

2. Placeholder mismatch:

// Wrong - placeholder defined but not used
{
  "greeting": "Hello",
  "@greeting": {
    "placeholders": {
      "name": {"type": "String"}
    }
  }
}

// Correct - placeholder used in string
{
  "greeting": "Hello, {name}!",
  "@greeting": {
    "placeholders": {
      "name": {"type": "String"}
    }
  }
}

3. Invalid JSON:

// Wrong - trailing comma
{
  "title": "My App",
}

// Correct - no trailing comma
{
  "title": "My App"
}

Extracting Strings from Dart to ARB

Using Flutter Intl Quick Actions

1. Select a hardcoded string in your Dart file
2. Press Ctrl+. (or Cmd+. on Mac)
3. Select "Extract to ARB"
4. Enter a meaningful key name
5. The string is added to your ARB file

Before extraction:

Text('Welcome to the app')

After extraction:

Text(AppLocalizations.of(context)!.welcomeMessage)

Bulk String Extraction

For large codebases, use regex search to find hardcoded strings:

Search pattern:

Text\(['"]([^'"]+)['"]\)

This finds all Text('...') widgets with hardcoded strings.

Comparing ARB Files for Missing Translations

Using i18n Ally Comparison View

1. Open Command Palette (Ctrl+Shift+P)
2. Run "i18n Ally: Open Editor"
3. View all translations side-by-side
4. Missing translations are highlighted in red

VS Code Diff View

Compare two ARB files manually:

1. Right-click the source ARB file (e.g., app_en.arb)
2. Select "Select for Compare"
3. Right-click the target ARB file (e.g., app_es.arb)
4. Select "Compare with Selected"

Script for Finding Missing Keys

Create a VS Code task to check for missing translations:

// .vscode/tasks.json
{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Check Missing Translations",
      "type": "shell",
      "command": "dart run scripts/check_translations.dart",
      "problemMatcher": []
    }
  ]
}

Dart script:

// scripts/check_translations.dart
import 'dart:convert';
import 'dart:io';

void main() {
  final sourceFile = File('lib/l10n/app_en.arb');
  final targetFiles = [
    File('lib/l10n/app_es.arb'),
    File('lib/l10n/app_de.arb'),
    File('lib/l10n/app_fr.arb'),
  ];

  final sourceKeys = _getTranslationKeys(sourceFile);

  for (final targetFile in targetFiles) {
    final targetKeys = _getTranslationKeys(targetFile);
    final missing = sourceKeys.difference(targetKeys);

    if (missing.isNotEmpty) {
      print('${targetFile.path} missing ${missing.length} keys:');
      for (final key in missing) {
        print('  - $key');
      }
    }
  }
}

Set<String> _getTranslationKeys(File file) {
  final content = jsonDecode(file.readAsStringSync()) as Map<String, dynamic>;
  return content.keys
      .where((key) => !key.startsWith('@'))
      .toSet();
}

IntelliSense for Translation Keys

Enabling Key Autocomplete

With Flutter Intl, get autocomplete for translation keys:

// Type: AppLocalizations.of(context)!.
// VS Code shows: welcome, homeTitle, loginButton, etc.

Custom Snippets for Common Patterns

Create snippets in .vscode/flutter.code-snippets:

{
  "Localized Text Widget": {
    "prefix": "ltext",
    "body": [
      "Text(AppLocalizations.of(context)!.${1:key})"
    ],
    "description": "Localized Text widget"
  },
  "ARB Entry": {
    "prefix": "arb",
    "body": [
      "\"${1:key}\": \"${2:value}\",",
      "\"@${1:key}\": {",
      "  \"description\": \"${3:description}\"",
      "}"
    ],
    "description": "ARB translation entry with metadata"
  },
  "ARB Placeholder Entry": {
    "prefix": "arbp",
    "body": [
      "\"${1:key}\": \"${2:message with {placeholder}}\",",
      "\"@${1:key}\": {",
      "  \"description\": \"${3:description}\",",
      "  \"placeholders\": {",
      "    \"${4:placeholder}\": {",
      "      \"type\": \"${5:String}\"",
      "    }",
      "  }",
      "}"
    ],
    "description": "ARB entry with placeholder"
  }
}

Recommended VS Code Settings for Flutter Localization

Complete settings configuration for optimal ARB editing:

// .vscode/settings.json
{
  // Flutter Intl settings
  "flutter-intl.localizationFile": "lib/l10n/app_en.arb",
  "flutter-intl.outputDirectory": "lib/l10n/generated",
  "flutter-intl.nullSafety": true,

  // JSON formatting for ARB files
  "json.format.enable": true,
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features",
    "editor.formatOnSave": true
  },

  // ARB file associations
  "files.associations": {
    "*.arb": "json"
  },

  // i18n Ally settings (if using)
  "i18n-ally.localesPaths": ["lib/l10n"],
  "i18n-ally.sourceLanguage": "en",
  "i18n-ally.enabledFrameworks": ["flutter-arb"],
  "i18n-ally.displayLanguage": "en",

  // Exclude generated files from search
  "search.exclude": {
    "**/lib/l10n/generated/**": true
  }
}

Troubleshooting Common Issues

Extension Not Detecting ARB Files

Solution 1: Check file associations

{
  "files.associations": {
    "*.arb": "json"
  }
}

Solution 2: Verify l10n.yaml exists in project root:

arb-dir: lib/l10n
template-arb-file: app_en.arb
output-localization-file: app_localizations.dart

Translation Suggestions Not Appearing

Check these settings:

1. API keys are configured correctly
2. Network connectivity for translation APIs
3. Source language is set correctly
4. Extension is enabled for the workspace

Autocomplete Not Working

Run these commands:

1. Ctrl+Shift+P → "Flutter: Clean Project"
2. Ctrl+Shift+P → "Developer: Reload Window"
3. Ensure flutter pub get has been run

Online Alternatives to VS Code Extensions

If VS Code extensions don't meet your needs, consider:

1. FlutterLocalisation Online Editor

• Free online ARB editor at flutterlocalisation.com/tools/arb-editor
• No installation required
• Visual interface for editing
• Automatic validation

2. Localizely Web Platform

• Web-based translation management
• Collaboration features
• Git integration

3. POEditor

• Supports ARB format
• Team collaboration
• Translation memory

Best Practices Summary

1. Use consistent metadata: Always include @key descriptions
2. Validate before committing: Run validation tasks in CI/CD
3. Extract strings early: Don't leave hardcoded strings in code
4. Review translations in context: Use inline preview features
5. Automate repetitive tasks: Create snippets and tasks
6. Compare regularly: Check for missing translations before releases

Conclusion

VS Code with the right extensions transforms Flutter ARB localization from a tedious task into an efficient workflow. Flutter Intl handles code generation, i18n Ally provides translation suggestions, and proper configuration ensures validation catches errors early. Whether you choose a single extension or combine several, these tools make managing multi-language Flutter apps much more manageable.