Recevez des notifications en avant-première sur les prochains lancements de Intlayer
    Création:2025-04-18Dernière mise à jour:2025-06-29

    Commencer l'internationalisation (i18n) avec Intlayer, Vite et Preact

    Ce package est en cours de développement. Consultez le problème pour plus d'informations. Montrez votre intérêt pour Intlayer avec Preact en aimant ce problème.

    Voir le Modèle d'application sur GitHub.

    Qu'est-ce qu'Intlayer ?

    Intlayer est une bibliothèque d'internationalisation (i18n) innovante et open-source conçue pour simplifier la prise en charge multilingue dans les applications web modernes.

    Avec Intlayer, vous pouvez :

    • Gérer facilement les traductions en utilisant des dictionnaires déclaratifs au niveau des composants.
    • Localiser dynamiquement les métadonnées, les routes et le contenu.
    • Assurer la prise en charge de TypeScript avec des types générés automatiquement, améliorant l'autocomplétion et la détection des erreurs.
    • Bénéficiez de fonctionnalités avancées, telles que la détection et le changement dynamiques de la langue.

    Guide étape par étape pour configurer Intlayer dans une application Vite et Preact

    Étape 1 : Installer les dépendances

    Installez les paquets nécessaires avec npm :

    bash
    npm install intlayer preact-intlayernpm install vite-intlayer --save-dev
    • intlayer

    • intlayer

      Le paquet principal qui fournit des outils d'internationalisation pour la gestion de la configuration, la traduction, la déclaration de contenu, la transpilation, et les commandes CLI.

    • preact-intlayer Le paquet qui intègre Intlayer avec une application Preact. Il fournit des fournisseurs de contexte et des hooks pour l'internationalisation avec Preact.

    • vite-intlayer Inclut le plugin Vite pour intégrer Intlayer avec le bundler Vite, ainsi qu'un middleware pour détecter la langue préférée de l'utilisateur, gérer les cookies, et gérer la redirection des URL.

    Étape 2 : Configuration de votre projet

    Créez un fichier de configuration pour configurer les langues de votre application :

    intlayer.config.ts
    import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [      Locales.ENGLISH,      Locales.FRENCH,      Locales.SPANISH,      // Vos autres langues    ],    defaultLocale: Locales.ENGLISH,  },};export default config;

    Grâce à ce fichier de configuration, vous pouvez configurer des URL localisées, la redirection via middleware, les noms des cookies, l'emplacement et l'extension de vos déclarations de contenu, désactiver les logs Intlayer dans la console, et bien plus encore. Pour une liste complète des paramètres disponibles, consultez la documentation de configuration.

    Étape 3 : Intégrer Intlayer dans votre configuration Vite

    Ajoutez le plugin intlayer dans votre configuration.

    vite.config.ts
    import { defineConfig } from "vite";import preact from "@preact/preset-vite";import { intlayerPlugin } from "vite-intlayer";// https://vitejs.dev/config/export default defineConfig({  plugins: [preact(), intlayerPlugin()],});

    Le plugin Vite intlayerPlugin() est utilisé pour intégrer Intlayer avec Vite. Il assure la génération des fichiers de déclaration de contenu et les surveille en mode développement. Il définit les variables d'environnement Intlayer au sein de l'application Vite. De plus, il fournit des alias pour optimiser les performances.

    Étape 4 : Déclarez Votre Contenu

    Créez et gérez vos déclarations de contenu pour stocker les traductions :

    src/app.content.tsx
    import { t, type Dictionary } from "intlayer";import type { ComponentChildren } from "preact";const appContent = {  key: "app",  content: {    viteLogo: t({      en: "Vite logo",      fr: "Logo Vite",      es: "Logo Vite",    }),    preactLogo: t({      en: "Preact logo",      fr: "Logo Preact",      es: "Logo Preact",    }),    title: "Vite + Preact",    count: t({      en: "count is ",      fr: "le compte est ",      es: "el recuento es ",    }),    edit: t<ComponentChildren>({      en: (        <>          Éditez <code>src/app.tsx</code> et enregistrez pour tester HMR        </>      ),      fr: (        <>          Éditez <code>src/app.tsx</code> et enregistrez pour tester HMR        </>      ),      es: (        <>          Edita <code>src/app.tsx</code> y guarda para probar HMR        </>      ),    }),    readTheDocs: t({      en: "Cliquez sur les logos Vite et Preact pour en savoir plus",      fr: "Cliquez sur les logos Vite et Preact pour en savoir plus",      es: "Haga clic en los logotipos de Vite y Preact para obtener más información",    }),  },} satisfies Dictionary;export default appContent;

    Vos déclarations de contenu peuvent être définies n'importe où dans votre application dès qu'elles sont incluses dans le répertoire contentDir (par défaut, ./src). Et correspondent à l'extension de fichier de déclaration de contenu (par défaut, .content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}).

    Pour plus de détails, consultez la documentation sur la déclaration de contenu.

    Si votre fichier de contenu inclut du code TSX, vous devrez peut-être importer import { h } from "preact"; ou vous assurer que votre pragma JSX est correctement configuré pour Preact.

    Étape 5 : Utiliser Intlayer dans votre code

    Accédez à vos dictionnaires de contenu dans toute votre application :

    src/app.tsx
    import { useState } from "preact/hooks";import type { FunctionalComponent } from "preact";import preactLogo from "./assets/preact.svg"; // En supposant que vous avez un preact.svgimport viteLogo from "/vite.svg";import "./app.css"; // En supposant que votre fichier CSS s'appelle app.cssimport { IntlayerProvider, useIntlayer } from "preact-intlayer";const AppContent: FunctionalComponent = () => {  const [count, setCount] = useState(0);  const content = useIntlayer("app");  return (    <>      <div>        <a href="https://vitejs.dev" target="_blank">          <img src={viteLogo} class="logo" alt={content.viteLogo.value} />        </a>        <a href="https://preactjs.com" target="_blank">          <img            src={preactLogo}            class="logo preact"            alt={content.preactLogo.value}          />        </a>      </div>      <h1>{content.title}</h1>      <div class="card">        <button onClick={() => setCount((count) => count + 1)}>          {content.count}          {count}        </button>        <p>{content.edit}</p>      </div>      <p class="read-the-docs">{content.readTheDocs}</p>    </>  );};const App: FunctionalComponent = () => (  <IntlayerProvider>    <AppContent />  </IntlayerProvider>);export default App;

    Si vous souhaitez utiliser votre contenu dans un attribut string, tel que alt, title, href, aria-label, etc., vous devez appeler la valeur de la fonction, comme ceci :

    jsx
    <img src={content.image.src.value} alt={content.image.value} />

    Remarque : Dans Preact, className s'écrit généralement class.

    Pour en savoir plus sur le hook useIntlayer, consultez la documentation (L'API est similaire pour preact-intlayer).

    (Optionnel) Étape 6 : Changer la langue de votre contenu

    Pour changer la langue de votre contenu, vous pouvez utiliser la fonction setLocale fournie par le hook useLocale. Cette fonction vous permet de définir la locale de l'application et de mettre à jour le contenu en conséquence.

    src/components/LocaleSwitcher.tsx
    import type { FunctionalComponent } from "preact";import { Locales } from "intlayer";import { useLocale } from "preact-intlayer";const LocaleSwitcher: FunctionalComponent = () => {  const { setLocale } = useLocale();  return (    <button onClick={() => setLocale(Locales.ENGLISH)}>      Changer la langue en anglais    </button>  );};export default LocaleSwitcher;

    Pour en savoir plus sur le hook useLocale, consultez la documentation (L'API est similaire pour preact-intlayer).

    (Optionnel) Étape 7 : Ajouter un routage localisé à votre application

    Le but de cette étape est de créer des routes uniques pour chaque langue. Cela est utile pour le SEO et pour des URLs optimisées pour le référencement. Exemple :

    plaintext
    - https://example.com/about- https://example.com/es/about- https://example.com/fr/about

    Par défaut, les routes ne sont pas préfixées pour la locale par défaut. Si vous souhaitez préfixer la locale par défaut, vous pouvez définir l'option middleware.prefixDefault à true dans votre configuration. Consultez la documentation de configuration pour plus d'informations.

    Pour ajouter un routage localisé à votre application, vous pouvez créer un composant LocaleRouter qui enveloppe les routes de votre application et gère le routage basé sur la locale. Voici un exemple utilisant preact-iso :

    Tout d'abord, installez preact-iso :

    bash
    npm install preact-iso
    src/components/LocaleRouter.tsx
    import { type Locales, configuration, getPathWithoutLocale } from "intlayer";import { ComponentChildren, FunctionalComponent } from "preact";import { IntlayerProvider } from "preact-intlayer";import { LocationProvider, useLocation } from "preact-iso";import { useEffect } from "preact/hooks";const { internationalization, middleware } = configuration;const { locales, defaultLocale } = internationalization;const Navigate: FunctionalComponent<{ to: string; replace?: boolean }> = ({  to,  replace,}) => {  const { route } = useLocation();  useEffect(() => {    route(to, replace);  }, [to, replace, route]);  return null;};/**/** * Un composant qui gère la localisation et enveloppe les enfants avec le contexte de langue approprié. * Il gère la détection et la validation de la langue basée sur l'URL. */const AppLocalized: FunctionalComponent<{  children: ComponentChildren;  locale?: Locales;}> = ({ children, locale }) => {  const { path: pathname, url } = useLocation();  if (!url) {    return null;  }  const search = url.substring(pathname.length);  // Détermine la langue courante, en revenant à la langue par défaut si elle n'est pas fournie  const currentLocale = locale ?? defaultLocale;  // Supprime le préfixe de langue du chemin pour construire un chemin de base  const pathWithoutLocale = getPathWithoutLocale(    pathname // Chemin URL actuel  );  /**   * Si middleware.prefixDefault est vrai, la locale par défaut doit toujours être préfixée.   */  if (middleware.prefixDefault) {    // Valider la locale    if (!locale || !locales.includes(locale)) {      // Rediriger vers la locale par défaut avec le chemin mis à jour      return (        <Navigate          to={`/${defaultLocale}/${pathWithoutLocale}${search}`}          replace // Remplacer l'entrée actuelle de l'historique par la nouvelle        />      );    }    // Envelopper les enfants avec IntlayerProvider et définir la locale actuelle    return (      <IntlayerProvider locale={currentLocale}>{children}</IntlayerProvider>    );  } else {    /**     * Lorsque middleware.prefixDefault est faux, la locale par défaut n'est pas préfixée.     * Assurez-vous que la locale actuelle est valide et n'est pas la locale par défaut.     */    if (      currentLocale.toString() !== defaultLocale.toString() &&      !locales        .filter(          (loc) => loc.toString() !== defaultLocale.toString() // Exclure la locale par défaut        )        .includes(currentLocale) // Vérifier si la locale actuelle est dans la liste des locales valides    ) {      // Rediriger vers le chemin sans préfixe de locale      return <Navigate to={`${pathWithoutLocale}${search}`} replace />;    }    // Envelopper les enfants avec IntlayerProvider et définir la locale actuelle    return (      <IntlayerProvider locale={currentLocale}>{children}</IntlayerProvider>    );  }};const RouterContent: FunctionalComponent<{  children: ComponentChildren;}> = ({ children }) => {  const { path } = useLocation();  if (!path) {    return null;  }  const pathLocale = path.split("/")[1] as Locales;  const isLocaleRoute = locales    .filter((locale) => middleware.prefixDefault || locale !== defaultLocale)    .some((locale) => locale.toString() === pathLocale);  if (isLocaleRoute) {    return <AppLocalized locale={pathLocale}>{children}</AppLocalized>;  }  return (    <AppLocalized      locale={!middleware.prefixDefault ? defaultLocale : undefined}    >      {children}    </AppLocalized>  );};/** * Un composant de routeur qui configure des routes spécifiques à la locale. * Il utilise preact-iso pour gérer la navigation et rendre des composants localisés. */export const LocaleRouter: FunctionalComponent<{  children: ComponentChildren;}> = ({ children }) => (  <LocationProvider>    <RouterContent>{children}</RouterContent>  </LocationProvider>);

    Ensuite, vous pouvez utiliser le composant LocaleRouter dans votre application :

    src/app.tsx
    import { LocaleRouter } from "./components/LocaleRouter";import type { FunctionalComponent } from "preact";// ... Votre composant AppContent (défini à l'Étape 5)const App: FunctionalComponent = () => (  <LocaleRouter>    <AppContent />  </LocaleRouter>);export default App;

    En parallèle, vous pouvez également utiliser le intLayerMiddlewarePlugin pour ajouter un routage côté serveur à votre application. Ce plugin détectera automatiquement la locale actuelle en fonction de l'URL et définira le cookie de locale approprié. Si aucune locale n'est spécifiée, le plugin déterminera la locale la plus appropriée en fonction des préférences linguistiques du navigateur de l'utilisateur. Si aucune locale n'est détectée, il redirigera vers la locale par défaut.

    vite.config.ts
    import { defineConfig } from "vite";import preact from "@preact/preset-vite";import { intlayerPlugin, intLayerMiddlewarePlugin } from "vite-intlayer";// https://vitejs.dev/config/export default defineConfig({  plugins: [preact(), intlayerPlugin(), intLayerMiddlewarePlugin()],});

    (Optionnel) Étape 8 : Changer l'URL lorsque la langue change

    Pour changer l'URL lorsque la langue change, vous pouvez utiliser la propriété onLocaleChange fournie par le hook useLocale. Parallèlement, vous pouvez utiliser useLocation et route de preact-iso pour mettre à jour le chemin de l'URL.

    src/components/LocaleSwitcher.tsx
    import { useLocation, route } from "preact-iso";import {  Locales,  getHTMLTextDir,  getLocaleName,  getLocalizedUrl,} from "intlayer";import { useLocale } from "preact-intlayer";import type { FunctionalComponent } from "preact";const LocaleSwitcher: FunctionalComponent = () => {  const location = useLocation();  const { locale, availableLocales, setLocale } = useLocale({    onLocaleChange: (newLocale) => {      const currentFullPath = location.url; // preact-iso fournit l'URL complète      // Construire l'URL avec la locale mise à jour      // Exemple : /es/about?foo=bar      const pathWithLocale = getLocalizedUrl(currentFullPath, newLocale);      // Mettre à jour le chemin de l'URL      route(pathWithLocale, true); // true pour remplacer    },  });  return (    <div>      <button popovertarget="localePopover">{getLocaleName(locale)}</button>      <div id="localePopover" popover="auto">        {availableLocales.map((localeItem) => (          <a            href={getLocalizedUrl(location.url, localeItem)}            hreflang={localeItem}            aria-current={locale === localeItem ? "page" : undefined}            onClick={(e) => {              e.preventDefault();              setLocale(localeItem);              // La navigation programmatique après le changement de langue sera gérée par onLocaleChange            }}            key={localeItem}          >            <span>              {/* Locale - ex. FR */}              {localeItem}            </span>            <span>              {/* Langue dans sa propre locale - ex. Français */}              {getLocaleName(localeItem, localeItem)}            </span>            <span dir={getHTMLTextDir(localeItem)} lang={localeItem}>              {/* Langue dans la locale courante - ex. Francés avec la locale courante définie sur Locales.SPANISH */}              {getLocaleName(localeItem, locale)}            </span>            <span dir="ltr" lang={Locales.ENGLISH}>              {/* Langue en anglais - ex. French */}              {getLocaleName(localeItem, Locales.ENGLISH)}            </span>          </a>        ))}      </div>    </div>  );};export default LocaleSwitcher;

    Références de la documentation :

    Voici la mise à jour de l’Étape 9 avec des explications supplémentaires et des exemples de code affinés :


    (Optionnel) Étape 9 : Modifier les attributs de langue et de direction du HTML

    Lorsque votre application prend en charge plusieurs langues, il est crucial de mettre à jour les attributs lang et dir de la balise <html> pour qu’ils correspondent à la locale actuelle. Cela garantit :

    • Accessibilité : Les lecteurs d’écran et les technologies d’assistance s’appuient sur l’attribut lang correct pour prononcer et interpréter le contenu avec précision.
    • Rendu du texte : L’attribut dir (direction) garantit que le texte est affiché dans le bon ordre (par exemple, de gauche à droite pour l’anglais, de droite à gauche pour l’arabe ou l’hébreu), ce qui est essentiel pour la lisibilité.
    • SEO : Les moteurs de recherche utilisent l'attribut lang pour déterminer la langue de votre page, ce qui permet de proposer le contenu localisé approprié dans les résultats de recherche.

    En mettant à jour ces attributs dynamiquement lorsque la locale change, vous garantissez une expérience cohérente et accessible pour les utilisateurs dans toutes les langues prises en charge.

    Implémentation du Hook

    Créez un hook personnalisé pour gérer les attributs HTML. Ce hook écoute les changements de locale et met à jour les attributs en conséquence :

    src/hooks/useI18nHTMLAttributes.tsx
    import { useEffect } from "preact/hooks";import { useLocale } from "preact-intlayer";import { getHTMLTextDir } from "intlayer";/** * Met à jour les attributs `lang` et `dir` de l'élément HTML <html> en fonction de la locale actuelle. * - `lang` : Informe les navigateurs et les moteurs de recherche de la langue de la page. * - `dir` : Assure l'ordre de lecture correct (par exemple, 'ltr' pour l'anglais, 'rtl' pour l'arabe). * * Cette mise à jour dynamique est essentielle pour un rendu correct du texte, l'accessibilité et le SEO. */export const useI18nHTMLAttributes = () => {  const { locale } = useLocale();  useEffect(() => {    // Met à jour l'attribut de langue avec la locale actuelle.    document.documentElement.lang = locale;    // Définit la direction du texte en fonction de la locale actuelle.    document.documentElement.dir = getHTMLTextDir(locale);  }, [locale]);};

    Utilisation du Hook dans votre application

    Intégrez le hook dans votre composant principal afin que les attributs HTML soient mis à jour à chaque changement de locale :

    src/app.tsx
    import type { FunctionalComponent } from "preact";import { IntlayerProvider } from "preact-intlayer"; // useIntlayer déjà importé si AppContent en a besoinimport { useI18nHTMLAttributes } from "./hooks/useI18nHTMLAttributes";import "./app.css";// Définition de AppContent depuis l'étape 5const AppWithHooks: FunctionalComponent = () => {  // Appliquer le hook pour mettre à jour les attributs lang et dir de la balise <html> en fonction de la locale.  useI18nHTMLAttributes();  // En supposant que AppContent est votre composant principal d'affichage du contenu de l'Étape 5  return <AppContent />;};const App: FunctionalComponent = () => (  <IntlayerProvider>    <AppWithHooks />  </IntlayerProvider>);export default App;

    En appliquant ces modifications, votre application va :

    • Assurer que l'attribut langue (lang) reflète correctement la locale actuelle, ce qui est important pour le SEO et le comportement du navigateur.
    • Ajuster la direction du texte (dir) en fonction de la locale, améliorant la lisibilité et l'utilisabilité pour les langues avec des ordres de lecture différents.
    • Offrir une expérience plus accessible, car les technologies d'assistance dépendent de ces attributs pour fonctionner de manière optimale.

    (Optionnel) Étape 10 : Création d'un composant de lien localisé

    Pour garantir que la navigation de votre application respecte la locale actuelle, vous pouvez créer un composant Link personnalisé. Ce composant préfixe automatiquement les URL internes avec la langue courante.

    Ce comportement est utile pour plusieurs raisons :

    • SEO et expérience utilisateur : Les URL localisées aident les moteurs de recherche à indexer correctement les pages spécifiques à une langue et fournissent aux utilisateurs du contenu dans leur langue préférée.
    • Cohérence : En utilisant un lien localisé dans toute votre application, vous garantissez que la navigation reste dans la locale actuelle, évitant ainsi des changements de langue inattendus.
    • Maintenabilité : Centraliser la logique de localisation dans un seul composant simplifie la gestion des URLs.

    Pour Preact avec preact-iso, les balises <a> standard sont généralement utilisées pour la navigation, et preact-iso gère le routage. Si vous avez besoin d'une navigation programmatique au clic (par exemple, pour effectuer des actions avant de naviguer), vous pouvez utiliser la fonction route provenant de useLocation. Voici comment créer un composant d'ancre personnalisé qui localise les URLs :

    src/components/LocalizedLink.tsx
    import { getLocalizedUrl } from "intlayer";import { useLocale, useLocation, route } from "preact-intlayer"; // En supposant que useLocation et route peuvent provenir de preact-iso via preact-intlayer si réexportés, ou importés directement// Si non ré-exporté, importer directement : import { useLocation, route } from "preact-iso";import type { JSX } from "preact"; // Pour HTMLAttributesimport { forwardRef } from "preact/compat"; // Pour le passage des refsexport interface LocalizedLinkProps  extends JSX.HTMLAttributes<HTMLAnchorElement> {  href: string;  replace?: boolean; // Optionnel : pour remplacer l'état de l'historique}/** * Fonction utilitaire pour vérifier si une URL donnée est externe. * Si l'URL commence par http:// ou https://, elle est considérée comme externe. */export const checkIsExternalLink = (href?: string): boolean =>  /^https?:\/\//.test(href ?? "");/** * Un composant Link personnalisé qui adapte l'attribut href en fonction de la locale courante. * Pour les liens internes, il utilise `getLocalizedUrl` pour préfixer l'URL avec la locale (par exemple, /fr/about). * Cela garantit que la navigation reste dans le même contexte de locale. * Il utilise une balise <a> standard mais peut déclencher une navigation côté client en utilisant `route` de preact-iso. */export const LocalizedLink = forwardRef<HTMLAnchorElement, LocalizedLinkProps>(  ({ href, children, onClick, replace = false, ...props }, ref) => {    const { locale } = useLocale();    const location = useLocation(); // depuis preact-iso    const isExternalLink = checkIsExternalLink(href);    const hrefI18n =      href && !isExternalLink ? getLocalizedUrl(href, locale) : href;    const handleClick = (event: JSX.TargetedMouseEvent<HTMLAnchorElement>) => {      if (onClick) {        onClick(event);      }      if (        !isExternalLink &&        href && // Assurer que href est défini        event.button === 0 && // Clic gauche        !event.metaKey &&        !event.ctrlKey &&        !event.shiftKey &&        !event.altKey && // Vérification des modificateurs standards        !props.target // Ne cible pas un nouvel onglet/fenêtre      ) {        event.preventDefault();        if (location.url !== hrefI18n) {          // Naviguer uniquement si l'URL est différente          route(hrefI18n, replace); // Utiliser la route de preact-iso        }      }    };    return (      <a href={hrefI18n} ref={ref} onClick={handleClick} {...props}>        {children}      </a>    );  });

    Comment ça fonctionne

    • Détection des liens externes :
      La fonction utilitaire checkIsExternalLink détermine si une URL est externe. Les liens externes restent inchangés.
    • Récupération de la locale courante :
      Le hook useLocale fournit la locale actuelle.
    • Localisation de l'URL :
      Pour les liens internes, getLocalizedUrl préfixe l'URL avec la locale courante.
    • Navigation côté client : La fonction handleClick vérifie s'il s'agit d'un lien interne et si la navigation standard doit être empêchée. Le cas échéant, elle utilise la fonction route de preact-iso (obtenue via useLocation ou importée directement) pour effectuer une navigation côté client. Cela offre un comportement de type SPA sans rechargement complet de la page.
    • Retour du lien :
      Le composant retourne un élément <a> avec l'URL localisée et le gestionnaire de clic personnalisé.

    Configurer TypeScript

    Intlayer utilise l'augmentation de module pour tirer parti de TypeScript et renforcer votre base de code.

    texte alternatif

    texte alternatif

    Assurez-vous que votre configuration TypeScript inclut les types générés automatiquement.

    tsconfig.json
    {  // ... Vos configurations TypeScript existantes  "compilerOptions": {    // ...    "jsx": "react-jsx",    "jsxImportSource": "preact", // Recommandé pour Preact 10+    // ...  },  "include": [    // ... Vos configurations TypeScript existantes    ".intlayer/**/*.ts", // Inclure les types générés automatiquement  ],}

    Assurez-vous que votre tsconfig.json est configuré pour Preact, en particulier les options jsx et jsxImportSource ou jsxFactory/jsxFragmentFactory pour les versions plus anciennes de Preact si vous n'utilisez pas les valeurs par défaut de preset-vite.

    Configuration Git

    Il est recommandé d'ignorer les fichiers générés par Intlayer. Cela vous permet d'éviter de les commettre dans votre dépôt Git.

    Pour ce faire, vous pouvez ajouter les instructions suivantes à votre fichier .gitignore :

    plaintext
    # Ignorer les fichiers générés par Intlayer.intlayer

    Extension VS Code

    Pour améliorer votre expérience de développement avec Intlayer, vous pouvez installer l’extension officielle Intlayer pour VS Code.

    Installer depuis le Marketplace VS Code

    Cette extension offre :

    • Autocomplétion pour les clés de traduction.
    • Détection d’erreurs en temps réel pour les traductions manquantes.
    • Aperçus en ligne du contenu traduit.
    • Actions rapides pour créer et mettre à jour facilement les traductions.

    Pour plus de détails sur l’utilisation de l’extension, consultez la documentation de l’extension Intlayer pour VS Code.


    Aller plus loin

    Pour aller plus loin, vous pouvez implémenter l’éditeur visuel ou externaliser votre contenu en utilisant le CMS.


    Historique de la documentation

    • 5.5.10 - 2025-06-29 : Historique initial
    Recevez des notifications en avant-première sur les prochains lancements de Intlayer