Creation:2025-03-25Last update:2026-05-06

    Traduci il tuo sito web Tanstack Start con Solid.js usando Intlayer | Internazionalizzazione (i18n)

    Sommario

    Questa guida dimostra come integrare Intlayer per un'internazionalizzazione fluida nei progetti Tanstack Start con Solid.js, routing sensibile alla localizzazione, supporto TypeScript e moderne pratiche di sviluppo.

    Cos'è Intlayer?

    Intlayer è una libreria di internazionalizzazione (i18n) innovativa e open-source progettata per semplificare il supporto multilingue nelle moderne applicazioni web.

    Con Intlayer, puoi:

    • Gestire facilmente le traduzioni utilizzando dizionari dichiarativi a livello di componente.
    • Localizzare dinamicamente metadati, rotte e contenuti.
    • Garantire il supporto TypeScript con tipi autogenerati, migliorando l'autocompletamento e il rilevamento degli errori.
    • Beneficiare di funzionalità avanzate, come il rilevamento e la commutazione dinamica della lingua.
    • Abilitare il routing sensibile alla localizzazione con il sistema di routing basato su file di Tanstack Start.

    Guida passo-passo per configurare Intlayer in un'applicazione Tanstack Start

    www.youtube.com

    Vedi il Modello di applicazione su GitHub.

    Passaggio 1: Crea il progetto

    Inizia creando un nuovo progetto TanStack Start seguendo la guida Avvia un nuovo progetto sul sito web di TanStack Start.

    Passaggio 2: Installa i pacchetti Intlayer

    Installa i pacchetti necessari utilizzando il tuo gestore di pacchetti preferito:

    bash
    npm install intlayer solid-intlayernpm install vite-intlayer --save-devnpx intlayer init

    • intlayer

      Il pacchetto principale che fornisce strumenti di internazionalizzazione per la gestione della configurazione, la traduzione, la dichiarazione dei contenuti, la traspilazione e i comandi CLI.

    • solid-intlayer Il pacchetto che integra Intlayer con l'applicazione Solid. Fornisce fornitori di contesto e hook per l'internazionalizzazione di Solid.

    • vite-intlayer Include il plugin Vite per integrare Intlayer con il bundler Vite, oltre al middleware per rilevare la lingua preferita dell'utente, gestire i cookie e gestire il reindirizzamento degli URL.

    Passaggio 3: Configurazione del progetto

    Crea un file di configurazione per configurare le lingue della tua applicazione:

    intlayer.config.ts
    import type { IntlayerConfig } from "intlayer";import { Locales } from "intlayer";const config: IntlayerConfig = {  internationalization: {    defaultLocale: Locales.ENGLISH,    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],  },};export default config;
    Attraverso questo file di configurazione, puoi impostare URL localizzati, reindirizzamento del middleware, nomi dei cookie, la posizione e l'estensione delle tue dichiarazioni di contenuto, disabilitare i log di Intlayer nella console e altro ancora. Per un elenco completo dei parametri disponibili, fai riferimento alla documentazione di configurazione.

    Passaggio 4: Integra Intlayer nella tua configurazione Vite

    Aggiungi il plugin intlayer nella tua configurazione:

    vite.config.ts
    import { intlayer } from "vite-intlayer";import { defineConfig } from "vite";import { devtools } from "@tanstack/devtools-vite";import { tanstackStart } from "@tanstack/solid-start/plugin/vite";import solidPlugin from "vite-plugin-solid";export default defineConfig({  plugins: [    devtools(),    tanstackStart({      router: {        routeFileIgnorePattern:          ".content.(ts|tsx|js|mjs|cjs|jsx|json|jsonc|json5)$",      },    }),    solidPlugin({ ssr: true }),    intlayer(),  ],});
    Il plugin Vite intlayer() viene utilizzato per integrare Intlayer con Vite. Garantisce la creazione dei file di dichiarazione dei contenuti e li monitora in modalità sviluppo. Definisce le variabili d'ambiente di Intlayer all'interno dell'applicazione Vite. Inoltre, fornisce alias per ottimizzare le prestazioni.

    Passaggio 5: Crea il layout radice (Root Layout)

    Configura il tuo layout radice per supportare l'internazionalizzazione utilizzando useParams per rilevare la lingua corrente e impostando gli attributi lang e dir sul tag html.

    src/routes/__root.tsx
    import {  HeadContent,  Scripts,  createRootRouteWithContext,} from "@tanstack/solid-router";import { HydrationScript } from "solid-js/web";import { Suspense, type ParentComponent } from "solid-js";import { IntlayerProvider } from "solid-intlayer";import { defaultLocale, getHTMLTextDir } from "intlayer";import { Route as LocaleRoute } from "./{-$locale}/route";export const Route = createRootRouteWithContext()({  shellComponent: RootComponent,});const RootComponent: ParentComponent = (props) => {  const params = LocaleRoute.useParams();  const locale = params()?.locale ?? defaultLocale;  return (    <html dir={getHTMLTextDir(locale)} lang={locale}>      <head>        <HydrationScript />        <HeadContent />      </head>      <body>        <IntlayerProvider locale={locale}>          <Suspense>{props.children}</Suspense>        </IntlayerProvider>        <Scripts />      </body>    </html>  );};

    Passaggio 6: Crea il layout della lingua (Opzionale)

    Crea un layout che gestisca il prefisso della lingua ed effettui la validazione. Questo layout assicurerà che vengano elaborati solo prefissi di lingua validi.

    Questo passaggio è opzionale se non hai bisogno di validare il prefisso della lingua a livello di rotta.
    src/routes/{-$locale}/route.tsx
    import { createFileRoute, Outlet, redirect } from "@tanstack/solid-router";import { validatePrefix } from "intlayer";export const Route = createFileRoute("/{-$locale}")({  beforeLoad: ({ params }) => {    const localeParam = params.locale;    // Convalida il prefisso della lingua    const { isValid, localePrefix } = validatePrefix(localeParam);    if (!isValid) {      throw redirect({        to: "/{-$locale}/404",        params: { locale: localePrefix },        replace: true,      });    }  },  component: Outlet,});
    Qui, {-$locale} è un parametro di rotta dinamico che viene sostituito con la lingua corrente. Questa notazione rende lo slot opzionale, consentendogli di funzionare con modalità di routing come 'prefix-no-default', ecc.

    Tieni presente che questo slot può causare problemi se utilizzi più segmenti dinamici nella stessa rotta (ad esempio, /{-$locale}/altro-percorso/$unAltroPercorsoDinamico/...). Per la modalità 'prefix-all', potresti preferire cambiare lo slot in $locale. Per la modalità 'no-prefix' o 'search-params', puoi rimuovere completamente lo slot.

    Passaggio 7: Dichiarazione dei contenuti

    Crea e gestisci le tue dichiarazioni dei contenuti per memorizzare le traduzioni:

    src/contents/page.content.ts
    import type { Dictionary } from "intlayer";import { t } from "intlayer";const appContent = {  content: {    links: {      about: t({        en: "About",        es: "Acerca de",        fr: "À propos",      }),      home: t({        en: "Home",        es: "Inicio",        fr: "Accueil",      }),    },    meta: {      title: t({        en: "Welcome to Intlayer + TanStack Router",        es: "Bienvenido a Intlayer + TanStack Router",        fr: "Bienvenue à Intlayer + TanStack Router",      }),      description: t({        en: "This is an example of using Intlayer with TanStack Router",        es: "Este es un ejemplo de uso de Intlayer con TanStack Router",        fr: "Ceci est un esempio d'utilizzo d'Intlayer avec TanStack Router",      }),    },  },  key: "app",} satisfies Dictionary;export default appContent;
    Le tue dichiarazioni dei contenuti possono essere definite ovunque nella tua applicazione, a condizione che siano incluse nella directory contentDir (per impostazione predefinita, ./app). E corrispondano all'estensione del file di dichiarazione dei contenuti (per impostazione predefinita, .content.{json,ts,tsx,js,jsx,mjs,cjs}).
    Per maggiori dettagli, fai riferimento alla documentazione sulla dichiarazione dei contenuti.

    Passaggio 8: Utilizza componenti e hook sensibili alla lingua

    Crea un componente LocalizedLink per una navigazione sensibile alla lingua:

    src/components/LocalizedLink.tsx
    import { Link, type LinkProps } from "@tanstack/solid-router";import { getPrefix } from "intlayer";import { useLocale } from "solid-intlayer";import type { JSX } from "solid-js";export const LOCALE_ROUTE = "{-$locale}" as const;export type RemoveLocaleParam<TVal> = TVal extends string  ? RemoveLocaleFromString<TVal>  : TVal;export type To = RemoveLocaleParam<LinkProps["to"]>;type CollapseDoubleSlashes<TString extends string> =  TString extends `${infer THead}//${infer TTail}`    ? CollapseDoubleSlashes<`${THead}/${TTail}`>    : TString;export type LocalizedLinkProps = Omit<LinkProps, "to"> & {  to?: To;} & JSX.AnchorHTMLAttributes<HTMLAnchorElement>;type RemoveAll<  TString extends string,  TSub extends string,> = TString extends `${infer THead}${TSub}${infer TTail}`  ? RemoveAll<`${THead}${TTail}`, TSub>  : TString;type RemoveLocaleFromString<TString extends string> = CollapseDoubleSlashes<  RemoveAll<TString, typeof LOCALE_ROUTE>>;export const LocalizedLink = (props: LocalizedLinkProps) => {  const { locale } = useLocale();  return (    <Link      {...props}      params={{        locale: getPrefix(locale()).localePrefix,        ...(typeof props.params === "object" ? props.params : {}),      }}      to={`/${LOCALE_ROUTE}${props.to ?? ""}` as LinkProps["to"]}    />  );};

    Questo componente ha due obiettivi:

    • Rimuovere il prefisso inutile {-$locale} dall'URL.
    • Iniettare il parametro della lingua nell'URL per garantire che l'utente venga reindirizzato direttamente alla rotta localizzata.

    Quindi possiamo creare un hook useLocalizedNavigate per la navigazione programmatica:

    src/hooks/useLocalizedNavigate.tsx
    import { useNavigate } from "@tanstack/solid-router";import { getLocalizedUrl } from "intlayer";import { useLocale } from "solid-intlayer";export const useLocalizedNavigate = () => {  const navigate = useNavigate();  const { locale } = useLocale();  const localizedNavigate = (to: string) => {    const localizedTo = getLocalizedUrl(to, locale());    return navigate({ to: localizedTo });  };  return localizedNavigate;};

    Passaggio 9: Utilizza Intlayer nelle tue pagine

    Accedi ai tuoi dizionari dei contenuti in tutta l'applicazione:

    Home Page localizzata

    src/routes/{-$locale}/index.tsx
    import { createFileRoute } from "@tanstack/solid-router";import { useIntlayer } from "solid-intlayer";import { LocalizedLink } from "@/components/LocalizedLink";export const Route = createFileRoute("/{-$locale}/")({  component: RouteComponent,});function RouteComponent() {  const content = useIntlayer("index-page");  return (    <main>      <h1>{content.heroTitle}</h1>      <p>{content.heroDesc}</p>      <div>        <LocalizedLink to="/">{content.navHome}</LocalizedLink>        <LocalizedLink to="/about">{content.navAbout}</LocalizedLink>      </div>    </main>  );}
    Se vuoi usare il tuo contenuto in un attributo di tipo string, come alt, title, href, aria-label, ecc., devi chiamare il valore della funzione, ad esempio:
    html
    <img src="{content.image.src.value}" alt="{content.image.value}" /><img src="{content.image.src.toString()}" alt="{content.image.toString()}" /><img src="{String(content.image.src)}" alt="{String(content.image)}" />

    In Solid, useIntlayer restituisce contenuti reattivi (ad esempio, content). Puoi accedere direttamente alle sue proprietà.

    Per saperne di più sull'hook useIntlayer, fai riferimento alla documentazione.

    Passaggio 10: Crea un componente per cambiare lingua (Locale Switcher)

    Crea un componente per consentire agli utenti di cambiare lingua:

    src/components/LocaleSwitcher.tsx
    import { useLocation } from "@tanstack/solid-router";import { getLocaleName, getPathWithoutLocale, getPrefix } from "intlayer";import { For } from "solid-js";import { useIntlayer, useLocale } from "solid-intlayer";import { LocalizedLink, type To } from "./LocalizedLink";export const LocaleSwitcher = () => {  const content = useIntlayer("locale-switcher");  const location = useLocation();  const { availableLocales, locale, setLocale } = useLocale();  const pathWithoutLocale = () => getPathWithoutLocale(location().pathname);  return (    <div class="flex flex-row gap-2">      <For each={availableLocales}>        {(localeEl) => (          <LocalizedLink            aria-current={localeEl === locale() ? "page" : undefined}            onClick={() => setLocale(localeEl)}            params={{ locale: getPrefix(localeEl).localePrefix }}            to={pathWithoutLocale() as To}          >            {getLocaleName(localeEl)}          </LocalizedLink>        )}      </For>    </div>  );};export default LocaleSwitcher;

    In Solid, locale da useLocale è un accessore di segnale. Usa locale() (con le parentesi) per leggere il suo valore corrente in modo reattivo.

    Per saperne di più sull'hook useLocale, fai riferimento alla documentazione.

    Passaggio 11: Gestione degli attributi HTML

    Come visto nel Passaggio 5, puoi gestire gli attributi lang e dir del tag html utilizzando useParams nel tuo componente radice. Questo assicura che vengano impostati gli attributi corretti sia sul server che sul client.

    src/routes/__root.tsx
    const RootComponent: ParentComponent = (props) => {  const params = LocaleRoute.useParams();  const locale = params()?.locale ?? defaultLocale;  return (    <html dir={getHTMLTextDir(locale)} lang={locale}>      {/* ... */}    </html>  );};

    Passaggio 12: Aggiungi il middleware (Opzionale)

    Puoi anche utilizzare intlayerProxy per aggiungere il routing lato server alla tua applicazione. Questo plugin rileverà automaticamente la lingua corrente in base all'URL e imposterà il cookie della lingua appropriato. Se non viene specificata alcuna lingua, il plugin determinerà la lingua più appropriata in base alle preferenze linguistiche del browser dell'utente. Se non viene rilevata alcuna lingua, reindirizzerà alla lingua predefinita.

    Tieni presente che per utilizzare intlayerProxy in produzione, è necessario spostare il pacchetto vite-intlayer da devDependencies a dependencies.
    vite.config.ts
    import { tanstackStart } from "@tanstack/solid-start/plugin/vite";import solid from "vite-plugin-solid";import { nitro } from "nitro/vite";import { defineConfig } from "vite";import { intlayer, intlayerProxy } from "vite-intlayer";export default defineConfig({  plugins: [    intlayerProxy(), // Il proxy deve essere posizionato prima del server se si usa Nitro    nitro(),    intlayer(),    tanstackStart({      router: {        routeFileIgnorePattern:          ".content.(ts|tsx|js|mjs|cjs|jsx|json|jsonc|json5)$",      },    }),    solid(),  ],});

    Passaggio 13: Internazionalizza i tuoi metadati (Opzionale)

    Puoi anche usare la funzione getIntlayer per accedere ai tuoi dizionari dei contenuti all'interno del loader head per i metadati sensibili alla localizzazione:

    src/routes/{-$locale}/index.tsx
    import { createFileRoute } from "@tanstack/solid-router";import { getIntlayer } from "intlayer";export const Route = createFileRoute("/{-$locale}/")({  component: RouteComponent,  head: ({ params }) => {    const { locale } = params;    const path = "/"; // The path for this route    const metaContent = getIntlayer("app", locale);    return {      links: [        // Canonical link: Points to the current localized page        { rel: "canonical", href: getLocalizedUrl(path, locale) },        // Hreflang: Tell Google about all localized versions        ...localeMap(({ locale: mapLocale }) => ({          rel: "alternate",          hrefLang: mapLocale,          href: getLocalizedUrl(path, mapLocale),        })),        // x-default: For users in unmatched languages        // Define the default fallback locale (usually your primary language)        {          rel: "alternate",          hrefLang: "x-default",          href: getLocalizedUrl(path, defaultLocale),        },      ],      meta: [        { title: metaContent.title },        { name: "description", content: metaContent.meta.description },      ],    };  },});

    Passaggio 14: Recupera la lingua nelle tue azioni server (Opzionale)

    Potresti voler accedere alla lingua corrente dall'interno delle tue azioni server o dei tuoi endpoint API. Puoi farlo usando l'aiutante getLocale di intlayer.

    Ecco un esempio usando le funzioni server di TanStack Start:

    src/routes/{-$locale}/index.tsx
    import { createServerFn } from "@tanstack/solid-start";import {  getRequestHeader,  getRequestHeaders,} from "@tanstack/solid-start/server";import { getCookie, getIntlayer, getLocale } from "intlayer";export const getLocaleServer = createServerFn().handler(async () => {  const locale = await getLocale({    // Ottenere il cookie dalla richiesta (predefinito: 'INTLAYER_LOCALE')    getCookie: (name) => {      const cookieString = getRequestHeader("cookie");      return getCookie(name, cookieString);    },    // Ottenere l'intestazione dalla richiesta (predefinito: 'x-intlayer-locale')    // Fallback usando la negoziazione Accept-Language    getHeader: (name) => getRequestHeader(name),  });  // Recuperare del contenuto usando getIntlayer()  const content = getIntlayer("app", locale);  return { locale, content };});

    Passaggio 15: Gestione delle pagine non trovate (Opzionale)

    Quando un utente visita una pagina inesistente, puoi mostrare una pagina di errore 404 personalizzata e il prefisso della lingua può influenzare il modo in cui tale pagina viene attivata.

    Capire la gestione 404 di TanStack Router con i prefissi della lingua

    In TanStack Router, la gestione delle pagine 404 con rotte localizzate richiede un approccio a più livelli:

    1. Rotta 404 dedicata: Una rotta specifica per visualizzare l'interfaccia utente 404
    2. Validazione a livello di rotta: Convalida i prefissi della lingua e reindirizza quelli non validi alla pagina 404
    3. Rotta catch-all: Cattura qualsiasi percorso non corrispondente all'interno del segmento della lingua
    src/routes/{-$locale}/404.tsx
    import { createFileRoute } from "@tanstack/solid-router";// Questo crea una rotta dedicata /[locale]/404// È usata sia come rotta diretta che importata come componente in altri fileexport const Route = createFileRoute("/{-$locale}/404")({  component: NotFoundComponent,});// Esportata separatamente in modo da poter essere riutilizzata in notFoundComponent e nelle rotte catch-allexport function NotFoundComponent() {  return (    <div>      <h1>404</h1>    </div>  );}
    src/routes/{-$locale}/route.tsx
    import { createFileRoute, Outlet, redirect } from "@tanstack/solid-router";import { validatePrefix } from "intlayer";import { NotFoundComponent } from "./404";export const Route = createFileRoute("/{-$locale}")({  // beforeLoad viene eseguito prima del rendering della rotta (sia sul server che sul client)  // È il posto ideale per convalidare il prefisso della lingua  beforeLoad: ({ params }) => {    const localeParam = params.locale;    // validatePrefix controlla se la lingua è valida secondo la tua configurazione intlayer    const { isValid, localePrefix } = validatePrefix(localeParam);    if (!isValid) {      // Prefisso della lingua non valido - reindirizza alla pagina 404 con un prefisso della lingua valido      throw redirect({        to: "/{-$locale}/404",        params: { locale: localePrefix },      });    }  },  component: Outlet,  // notFoundComponent viene chiamato quando una rotta figlia non esiste  // ad esempio, /en/pagina-inesistente attiva questo all'interno del layout /en  notFoundComponent: NotFoundComponent,});
    src/routes/{-$locale}/$.tsx
    import { createFileRoute } from "@tanstack/solid-router";import { NotFoundComponent } from "./404";// La rotta $ (splat/catch-all) corrisponde a qualsiasi percorso che non corrisponde ad altre rotte// ad esempio, /en/qualche/percorso/profondo/non-valido// Questo assicura che TUTTI i percorsi non corrispondenti all'interno di una lingua mostrino la pagina 404// Senza questo, i percorsi profondi non corrispondenti potrebbero mostrare una pagina bianca o un erroreexport const Route = createFileRoute("/{-$locale}/$")({  component: NotFoundComponent,});

    (Opzionale) Passaggio 15: Estrarre il contenuto dei componenti

    Se hai una base di codice esistente, trasformare migliaia di file può richiedere molto tempo.

    Per facilitare questo processo, Intlayer propone un compilatore / estrattore per trasformare i tuoi componenti ed estrarre il contenuto.

    Per configurarlo, puoi aggiungere una sezione compiler nel tuo file intlayer.config.ts:

    intlayer.config.ts
    import { type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  // ... Resto della configurazione
  compiler: {
    /**
     * Indica se il compilatore deve essere abilitato.
     */
    enabled: true,

    /**
     * Definisce il percorso dei file di output
     */
    output: ({ fileName, extension }) => `./${fileName}${extension}`,

    /**
     * Indica se i componenti devono essere salvati dopo essere stati trasformati.
     *
     * - Se `true`, il compilatore riscriverà il file del componente sul disco. Quindi la trasformazione sarà permanente e il compilatore salterà la trasformazione per il processo successivo. In questo modo, il compilatore può trasformare l'app e poi essere rimosso.
     *
     * - Se `false`, il compilatore inietterà la chiamata alla funzione `useIntlayer()` solo nel codice dell'output di build, mantenendo intatta la base di codice. La trasformazione avverrà solo in memoria.
     */
    saveComponents: false,

    /**
     * Prefisso della chiave del dizionario
     */
    dictionaryKeyPrefix: "",
  },
};

export default config;

    Esegui l'estrattore per trasformare i tuoi componenti ed estrarre il contenuto

    bash
    npx intlayer extract

    Passaggio 16: Generare una Sitemap (Opzionale)

    Intlayer include un generatore di sitemap integrato per aiutarti a creare facilmente una sitemap per la tua applicazione. Gestisce le rotte localizzate e aggiunge i metadati necessari per i motori di ricerca.

    La sitemap generata da Intlayer supporta lo spazio dei nomi xhtml:link (Hreflang XML Extensions). A differenza dei generatori di sitemap predefiniti che elencano solo URL grezzi, Intlayer crea automaticamente i collegamenti bidirezionali richiesti tra tutte le versioni linguistiche di una pagina (ad esempio, /about, /about?lang=fr e /about?lang=es). Ciò garantisce che i motori di ricerca indicizzino e servano correttamente la versione linguistica corretta al pubblico giusto.

    Per utilizzarlo, devi prima configurare il tuo file vite.config.ts per abilitare il pre-rendering per i tuoi percorsi localizzati e disabilitare la generazione predefinita della sitemap di TanStack Start.

    vite.config.ts
    import { localeMap, localeFlatMap } from "intlayer";// ... altre importazioniexport const pathList = ["", "/about", "/404"];const localizedPages = localeFlatMap(({ urlPrefix }) =>  pathList.map((path) => ({    path: `${urlPrefix}${path}`,    prerender: {      enabled: true,    },  })));export default defineConfig({  plugins: [    // ... altri plugin    tanstackStart({      // ... altre configurazioni      sitemap: {        enabled: false,      },      prerender: {        enabled: true,        crawlLinks: false,        concurrency: 10,      },      pages: localizedPages,    }),  ],});

    Quindi, crea un percorso src/routes/sitemap[.]xml.ts che utilizzi la funzione generateSitemap:

    src/routes/sitemap[.]xml.ts
    import { createFileRoute } from "@tanstack/solid-router";import { generateSitemap } from "intlayer";const SITE_URL = "http://localhost:3000";export const Route = createFileRoute("/sitemap.xml")({  server: {    handlers: {      GET: async () => {        const sitemap = generateSitemap(          [            { path: "/", changefreq: "daily", priority: 1.0 },            { path: "/about", changefreq: "monthly", priority: 0.8 },          ],          { siteUrl: SITE_URL }        );        return new Response(sitemap, {          headers: { "Content-Type": "application/xml" },        });      },    },  },});

    Passaggio 17: Configura TypeScript (Opzionale)

    Intlayer utilizza l'aumento dei moduli per sfruttare i vantaggi di TypeScript e rendere la tua base di codice più robusta.

    Assicurati che la tua configurazione TypeScript includa i tipi autogenerati:

    tsconfig.json
    {  // ... le tue configurazioni esistenti  include: [    // ... i tuoi include esistenti    ".intlayer/**/*.ts", // Includi i tipi autogenerati  ],}

    Configurazione Git

    Si consiglia di ignorare i file generati da Intlayer. Ciò consente di evitare di inserirli nel repository Git.

    Per fare ciò, puoi aggiungere le seguenti istruzioni al tuo file .gitignore:

    .gitignore
    # Ignora i file generati da Intlayer.intlayer

    Estensione VS Code

    Per migliorare la tua esperienza di sviluppo con Intlayer, puoi installare l'estensione ufficiale Intlayer VS Code.

    Installa dal Marketplace di VS Code

    Questa estensione fornisce:

    • Autocompletamento per le chiavi di traduzione.
    • Rilevamento degli errori in tempo reale per le traduzioni mancanti.
    • Anteprime in linea del contenuto tradotto.
    • Azioni rapide per creare e aggiornare facilmente le traduzioni.

    Per maggiori dettagli su come utilizzare l'estensione, fai riferimento alla documentazione dell'estensione Intlayer VS Code.

    Approfondimenti

    Per approfondire, puoi implementare l'editor visuale o esternalizzare i tuoi contenuti utilizzando il CMS.

    Riferimenti della documentazione

    Tanstack Start
    Astro