Oficjalne rozszerzenie VS Code

Przegląd

Intlayer to oficjalne rozszerzenie Visual Studio Code dla Intlayer, zaprojektowane w celu poprawy doświadczenia programisty podczas pracy z zlokalizowanymi treściami w Twoich projektach.

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

Funkcje

• Wyodrębnij Zawartość – Wyodrębnij zawartość z komponentów React / Vue / Svelte

• Natychmiastowa Nawigacja – Szybko przejdź do odpowiedniego pliku z treścią, klikając na klucz useIntlayer.
• Wypełnianie Słowników – Wypełnij słowniki treściami z Twojego projektu.

• Łatwy dostęp do poleceń Intlayer – Buduj, pushuj, pulluj, wypełniaj, testuj słowniki treści z łatwością.

• Generator deklaracji treści – Twórz pliki słowników treści w różnych formatach (.ts, .esm, .cjs, .json).

• Testowanie słowników – Testuj słowniki pod kątem brakujących tłumaczeń.

• Aktualizuj swoje słowniki – Utrzymuj swoje słowniki na bieżąco z najnowszą zawartością z Twojego projektu.

• Zakładka Intlayer (pasek aktywności) – Przeglądaj i wyszukuj słowniki z dedykowanej bocznej zakładki z paskiem narzędzi i akcjami kontekstowymi (Build, Pull, Push, Fill, Refresh, Test, Create File).

Użytkowanie

Szybka nawigacja

1. Otwórz projekt korzystający z react-intlayer.

2. Znajdź wywołanie useIntlayer(), na przykład:

   tsx

   Kopiuj zawartość

   Kopiuj kod

   Skopiuj kod do schowka

   const content = useIntlayer("app");

3. Command-click (⌘+Click na macOS) lub Ctrl+Click (na Windows/Linux) na klucz (np. "app").
4. VS Code automatycznie otworzy odpowiadający plik słownika, np. src/app.content.ts.

Zakładka Intlayer (pasek aktywności)

Użyj bocznej zakładki do przeglądania i zarządzania słownikami:

• Otwórz ikonę Intlayer na pasku aktywności.
• W Search wpisuj, aby filtrować słowniki i wpisy w czasie rzeczywistym.
• W Słownikach przeglądaj środowiska, słowniki i pliki. Użyj paska narzędzi do operacji Build, Pull, Push, Fill, Refresh, Test oraz Create Dictionary File. Kliknij prawym przyciskiem myszy, aby uzyskać akcje kontekstowe (Pull/Push dla słowników, Fill dla plików). Aktualnie otwarty plik w edytorze jest automatycznie podświetlany w drzewie, gdy jest to możliwe.

Dostęp do poleceń

Do poleceń możesz uzyskać dostęp z Command Palette.

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

• Build Dictionaries
• Push Dictionaries
• Pull Dictionaries
• Fill Dictionaries
• Test Dictionaries
• Create Dictionary File

Ładowanie zmiennych środowiskowych

Intlayer zaleca przechowywanie kluczy API AI, a także identyfikatora klienta i sekretu Intlayer w zmiennych środowiskowych.

Rozszerzenie może ładować zmienne środowiskowe z twojego workspace, aby uruchamiać polecenia Intlayer z odpowiednim kontekstem.

• Kolejność ładowania (wg priorytetu): .env.<env>.local → .env.<env> → .env.local → .env
• Bez destrukcji: istniejące wartości process.env nie są nadpisywane.
• Zakres: pliki są rozwiązywane względem skonfigurowanego katalogu bazowego (domyślnie root workspace).

Wybór aktywnego środowiska

• Command Palette: otwórz paletę i uruchom Intlayer: Select Environment, następnie wybierz środowisko (np. development, staging, production). Rozszerzenie spróbuje załadować pierwszy dostępny plik z powyższej listy priorytetów i wyświetli powiadomienie takie jak „Załadowano env z .env.<env>.local”.
• Ustawienia: przejdź do Settings → Extensions → Intlayer i ustaw:
  • Environment: nazwa środowiska używana do rozwiązywania plików .env.<env>*.
  • (Opcjonalnie) Plik Env: jawna ścieżka do pliku .env. Jeśli jest podana, ma pierwszeństwo przed listą domyślną.

Monorepo i niestandardowe katalogi

Jeśli twoje pliki .env znajdują się poza rootem workspace, ustaw Katalog Bazowy w Settings → Extensions → Intlayer. Loader będzie szukał plików .env względem tego katalogu.