i18n-ally

repository·main·Indexed 26 days ago

https://github.com/lokalise/i18n-ally

A comprehensive VS Code extension for managing internationalization (i18n) within the development environment. It provides tools for extracting hardcoded strings, editing and reviewing translations via a visual editor, and managing locale files. Key features include inline annotations, missing translation reports, machine translation support, and compatibility with popular web frameworks and structured locale files (JSON/YAML).

Tokens
7.6K
Snippets
12
Records
61
Agent score
89%

What's inside i18n-ally

  1. Overview of i18n-ally features

    main

    i18n-ally is a VS Code extension designed to manage internationalization (i18n) in your development workflow. Key features include:

    • Inline Annotations: View translation context directly in your code.
    • Hover & Quick Actions: Access translation details and quick actions via hover windows.
    • Unified Translation Management: Manage all translations through a centralized sidebar.
    • Visual Editor & Review System: Use a dedicated UI for editing translations and a system for reviewing changes.
    • Extraction: Automatically extract text from your source code into translation files.
    • Missing Translation Reports: Identify and report missing keys/translations.
    • Machine Translation: Leverage machine translation for quick localization.
    • JSON/YAML Support: Inline annotations for structured locale files.
    • Advanced Support: Works with multi-directory workspaces, remote development, and most popular web frameworks.
  2. Configure locale file paths automatically

    main

    You can automatically detect and configure your locale directories using the config_locales_auto command. The extension searches for directories matching common naming patterns such as locales, locale, i18n, lang, langs, language, languages, or messages.

    It automatically ignores common non-source directories like node_modules, dist, build, test, and others to avoid false positives. If directories are found, they are automatically registered as locale paths in the configuration.

  3. Manually configure locale file paths

    main
    If automatic detection does not find your directories, you can manually select them using the config_locales command. This will open a folder picker dialog allowing you to select one or more directories. The selected paths will be converted to relative paths from your workspace root and saved to the extension configuration.
  4. Configure Lingui with Next.js in i18n-ally

    main

    When using Lingui with Next.js, you can configure i18n-ally by creating a lingui.config.js file. This configuration defines the supported locales, the source locale, and the catalog paths where your translation messages are stored. You can use <rootDir> as a placeholder to reference the project root.

    module.exports = {
      locales: ["en", "cs"],
      sourceLocale: "en",
      catalogs: [
        {
          path: "<rootDir>/locale/{locale}/messages",
          include: ["<rootDir>/"],
          exclude: ["**/node_modules/**"],
        },
      ],
    }
  5. Configure Vue i18n loader in Webpack

    main

    When using Vue with vue-i18n, you can configure Webpack to handle i18n blocks within Single File Components (SFCs) by using @kazupon/vue-i18n-loader. This is achieved by targeting the i18n module rule with a resource query for blockType=i18n.

    module.exports = {
      chainWebpack: (config) => {
        config.module
          .rule('i18n')
          .resourceQuery(/blockType=i18n/)
          .type('javascript/auto')
          .use('i18n')
          .loader('@kazupon/vue-i18n-loader')
          .end()
      },
      devServer: {
        disableHostCheck: true,
      },
    }
  6. Detect hardcoded strings with DetectHardStrings

    main

    The DetectHardStrings function scans the active document for hardcoded strings that are not part of the i18n framework. It identifies strings based on the extraction frameworks supported by the document's languageId.

    Results are automatically filtered against the following configuration settings:

    • Config.extractIgnored: A list of specific text strings to ignore.
    • Config.extractIgnoredByFiles: A mapping of file paths to lists of strings to ignore within those specific files.

    If no extraction frameworks are supported for the current language, a warning message is displayed (if warn is set to true).

  7. Identify enabled frameworks using getEnabledFrameworks()

    main

    The getEnabledFrameworks(dependencies: PackageDependencies, root: string) function determines which frameworks should be active based on the detected project dependencies and the project root.

    It evaluates framework detection logic which can be based on:

    • Function-based detection
    • Array inclusion
    • Logic gates: none, any, and every requirements.

    Note: If a framework is marked as a monopoly, it will be the only enabled framework. If only the general framework is detected, no frameworks are returned.

  8. Enable specific frameworks by ID using getEnabledFrameworksByIds()

    main

    Use getEnabledFrameworksByIds(ids: string[], root: string) to force-enable a specific set of frameworks.

    • If an ID is provided that does not match a known framework, a warning is logged via Log.warn.
    • If a CustomFramework is requested, the load(root) method is automatically called for it.
  9. Fulfill all missing keys in the current file

    main

    The FulfillAllMissingKeys function identifies all missing translation keys across all Global.visibleLocales for the current file and prepares them to be written as empty strings.

    • prompt: If true (default), a modal confirmation dialog will appear.
    • extraKeys: An optional array of strings (string[]) representing additional keys to include in the fulfillment process even if they aren't currently detected in the loader.
  10. Use the Translator class to perform translations

    main

    The Translator class acts as a registry and entry point for various translation engines. You can use the translate method by providing a TranslateOptions object along with a specific engine key to select which provider to use.

    Available engine keys include:

    • google (GoogleTranslateEngine)
    • google-cn (GoogleTranslateCnEngine)
    • deepl (DeepLTranslateEngine)
    • libretranslate (LibreTranslateEngine)
    • baidu (BaiduTranslate)
    • openai (OpenAITranslateEngine)