Offizielle VS Code Erweiterung

Übersicht

Intlayer ist die offizielle Visual Studio Code Erweiterung für Intlayer, die entwickelt wurde, um die Entwicklererfahrung beim Arbeiten mit lokalisierten Inhalten in Ihren Projekten zu verbessern.

Erweiterungslink: https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension

Funktionen

• Inhalt extrahieren – Extrahieren Sie Inhalte aus Ihren React / Vue / Svelte Komponenten

• Sofortige Navigation – Schneller Sprung zur richtigen Inhaltsdatei beim Klicken auf einen useIntlayer-Schlüssel.
• Wörterbücher füllen – Füllen Sie Wörterbücher mit Inhalten aus Ihrem Projekt.

• Einfacher Zugriff auf Intlayer-Befehle – Erstellen, pushen, pullen, füllen und testen Sie Inhaltswörterbücher mühelos.

• Generator für Inhaltsdeklarationen – Erstellen Sie Wörterbuch-Inhaltsdateien in verschiedenen Formaten (.ts, .esm, .cjs, .json).

• Wörterbücher testen – Testen Sie Wörterbücher auf fehlende Übersetzungen.

• Halten Sie Ihre Wörterbücher aktuell – Halten Sie Ihre Wörterbücher mit den neuesten Inhalten aus Ihrem Projekt auf dem neuesten Stand.

• Intlayer-Tab (Aktivitätsleiste) – Durchsuchen und durchsuchen Sie Wörterbücher über einen dedizierten Seiten-Tab mit Symbolleiste und Kontextaktionen (Build, Pull, Push, Fill, Refresh, Test, Create File).

Verwendung

Schnelle Navigation

1. Öffnen Sie ein Projekt, das react-intlayer verwendet.

2. Suchen Sie einen Aufruf von useIntlayer(), zum Beispiel:

   tsx

   Inhalt kopieren

   Code kopieren

   Kopieren Sie den Code in die Zwischenablage

   const content = useIntlayer("app");

3. Befehl-Klick (⌘+Klick auf macOS) oder Strg-Klick (auf Windows/Linux) auf den Schlüssel (z. B. "app").
4. VS Code öffnet automatisch die entsprechende Wörterbuchdatei, z. B. src/app.content.ts.

Intlayer-Tab (Aktivitätsleiste)

Verwenden Sie den Seiten-Tab, um Wörterbücher zu durchsuchen und zu verwalten:

• Öffnen Sie das Intlayer-Symbol in der Aktivitätsleiste.
• Geben Sie in Suche ein, um Wörterbücher und Einträge in Echtzeit zu filtern.
• Durchsuchen Sie in Wörterbücher Umgebungen, Wörterbücher und Dateien. Verwenden Sie die Symbolleiste für Erstellen, Abrufen, Senden, Füllen, Aktualisieren, Testen und Wörterbuchdatei erstellen. Rechtsklick für Kontextaktionen (Abrufen/Senden bei Wörterbüchern, Füllen bei Dateien). Die aktuelle Editor-Datei wird bei Bedarf automatisch im Baum angezeigt.

Zugriff auf die Befehle

Sie können auf die Befehle über die Befehlspalette zugreifen.

Cmd + Shift + P (macOS) / Ctrl + Shift + P (Windows/Linux)

• Wörterbücher erstellen
• Wörterbücher hochladen
• Wörterbücher herunterladen
• Wörterbücher füllen
• Wörterbücher testen
• Wörterbuchdatei erstellen

Laden von Umgebungsvariablen

Intlayer empfiehlt, Ihre AI-API-Schlüssel sowie die Intlayer-Client-ID und das Secret in Umgebungsvariablen zu speichern.

Die Erweiterung kann Umgebungsvariablen aus Ihrem Arbeitsbereich laden, um Intlayer-Befehle im richtigen Kontext auszuführen.

• Ladereihenfolge (nach Priorität): .env.<env>.local → .env.<env> → .env.local → .env
• Nicht destruktiv: vorhandene process.env-Werte werden nicht überschrieben.
• Geltungsbereich: Dateien werden vom konfigurierten Basisverzeichnis aus aufgelöst (standardmäßig das Stammverzeichnis des Arbeitsbereichs).

Auswahl der aktiven Umgebung

• Befehls-Palette: Öffnen Sie die Palette und führen Sie Intlayer: Select Environment aus, wählen Sie dann die Umgebung aus (z. B. development, staging, production). Die Erweiterung versucht, die erste verfügbare Datei in der oben genannten Prioritätsliste zu laden und zeigt eine Benachrichtigung wie „Env geladen von .env.<env>.local“ an.
• Einstellungen: Gehen Sie zu Einstellungen → Erweiterungen → Intlayer und setzen Sie:
  • Umgebung: der Umgebungsname, der zur Auflösung von .env.<env>* Dateien verwendet wird.
  • (Optional) Env-Datei: ein expliziter Pfad zu einer .env-Datei. Wenn angegeben, hat dieser Vorrang vor der ermittelten Liste.

Monorepos und benutzerdefinierte Verzeichnisse

Wenn sich Ihre .env-Dateien außerhalb des Arbeitsbereichs-Stammverzeichnisses befinden, legen Sie das Basisverzeichnis unter Einstellungen → Erweiterungen → Intlayer fest. Der Loader sucht dann nach .env-Dateien relativ zu diesem Verzeichnis.