@intlayer/docs 8.4.10 → 8.5.0

package/docs/fr/intlayer_with_vite+vanilla.md

@@ -0,0 +1,722 @@
+---
+createdAt: 2026-03-23
+updatedAt: 2026-03-23
+title: i18n Vite + Vanilla JS - Comment traduire une application Vanilla JS en 2026
+description: Découvrez comment rendre votre site web Vite et Vanilla JS multilingue. Suivez la documentation pour l'internationaliser (i18n) et le traduire.
+keywords:
+  - Internationalisation
+  - Documentation
+  - Intlayer
+  - Vite
+  - Vanilla JS
+  - JavaScript
+  - TypeScript
+  - HTML
+slugs:
+  - doc
+  - environment
+  - vite-and-vanilla
+applicationTemplate: https://github.com/aymericzip/intlayer-vite-vanilla-template
+history:
+  - version: 8.4.10
+    date: 2026-03-23
+    changes: "Init history"
+---
+
+# Traduisez votre site web Vite et Vanilla JS en utilisant Intlayer | Internationalisation (i18n)
+
+## Table des matières
+
+<TOC/>
+
+## Qu'est-ce qu'Intlayer ?
+
+**Intlayer** est une bibliothèque d'internationalisation (i18n) innovante et open-source conçue pour simplifier le support 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 le support TypeScript** avec des types autogénérés, améliorant l'autocomplétion et la détection d'erreurs.
+- **Bénéficier de fonctionnalités avancées**, comme la détection et le changement dynamique de langue.
+
+---
+
+## Guide étape par étape pour configurer Intlayer dans une application Vite et Vanilla JS
+
+### Étape 1 : Installer les dépendances
+
+Installez les paquets nécessaires en utilisant npm :
+
+```bash packageManager="npm"
+npm install intlayer vanilla-intlayer
+npm install vite-intlayer --save-dev
+npx intlayer init
+```
+
+```bash packageManager="pnpm"
+pnpm add intlayer vanilla-intlayer
+pnpm add vite-intlayer --save-dev
+pnpm intlayer init
+```
+
+```bash packageManager="yarn"
+yarn add intlayer vanilla-intlayer
+yarn add vite-intlayer --save-dev
+yarn intlayer init
+```
+
+```bash packageManager="bun"
+bun add intlayer vanilla-intlayer
+bun add vite-intlayer --dev
+bunx intlayer init
+```
+
+- **intlayer**
+  Le paquet principal qui fournit des outils d'internationalisation pour la gestion de la configuration, la traduction, la [déclaration de contenu](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/dictionary/content_file.md), la transpilation et les [commandes CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/cli/index.md).
+
+- **vanilla-intlayer**
+  Le paquet qui intègre Intlayer avec des applications en JavaScript pur / TypeScript. Il fournit un singleton pub/sub (`IntlayerClient`) et des helpers basés sur des callbacks (`useIntlayer`, `useLocale`, etc.) pour que n'importe quelle partie de votre application puisse réagir aux changements de langue sans dépendre d'un framework UI.
+
+- **vite-intlayer**
+  Comprend le plugin Vite pour intégrer Intlayer avec le [bundler Vite](https://vite.dev/guide/why.html#why-bundle-for-production), 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 d'URL.
+
+### Étape 2 : Configuration de votre projet
+
+Créez un fichier de configuration pour configurer les langues de votre application :
+
+```typescript fileName="intlayer.config.ts" codeFormat="typescript"
+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;
+```
+
+```javascript fileName="intlayer.config.mjs" codeFormat="esm"
+import { Locales } from "intlayer";
+
+/** @type {import('intlayer').IntlayerConfig} */
+const config = {
+  internationalization: {
+    locales: [
+      Locales.ENGLISH,
+      Locales.FRENCH,
+      Locales.SPANISH,
+      // Vos autres langues
+    ],
+    defaultLocale: Locales.ENGLISH,
+  },
+};
+
+export default config;
+```
+
+```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
+const { Locales } = require("intlayer");
+
+/** @type {import('intlayer').IntlayerConfig} */
+const config = {
+  internationalization: {
+    locales: [
+      Locales.ENGLISH,
+      Locales.FRENCH,
+      Locales.SPANISH,
+      // Vos autres langues
+    ],
+    defaultLocale: Locales.ENGLISH,
+  },
+};
+
+module.exports = config;
+```
+
+> Via ce fichier de configuration, vous pouvez configurer les URL localisées, la redirection du 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 plus encore. Pour une liste complète des paramètres disponibles, reportez-vous à la [documentation de configuration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/configuration.md).
+
+### Étape 3 : Intégrer Intlayer dans votre configuration Vite
+
+Ajoutez le plugin intlayer dans votre configuration.
+
+```typescript fileName="vite.config.ts" codeFormat="typescript"
+import { defineConfig } from "vite";
+import { intlayer } from "vite-intlayer";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [intlayer()],
+});
+```
+
+```javascript fileName="vite.config.mjs" codeFormat="esm"
+import { defineConfig } from "vite";
+import { intlayer } from "vite-intlayer";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [intlayer()],
+});
+```
+
+```javascript fileName="vite.config.cjs" codeFormat="commonjs"
+const { defineConfig } = require("vite");
+const { intlayer } = require("vite-intlayer");
+
+// https://vitejs.dev/config/
+module.exports = defineConfig({
+  plugins: [intlayer()],
+});
+```
+
+> Le plugin Vite `intlayer()` est utilisé pour intégrer Intlayer avec Vite. Il assure la construction des fichiers de déclaration de contenu et les surveille en mode développement. Il définit les variables d'environnement Intlayer dans l'application Vite. De plus, il fournit des alias pour optimiser les performances.
+
+### Étape 4 : Initialiser Intlayer dans votre point d'entrée
+
+Appelez `installIntlayer()` **avant** que tout contenu ne soit rendu afin que le singleton global de langue soit prêt.
+
+```typescript fileName="src/main.ts" codeFormat="typescript"
+import { installIntlayer } from "vanilla-intlayer";
+
+// Doit être appelé avant de rendre tout contenu i18n.
+installIntlayer();
+
+// Importez et exécutez vos modules d'application.
+import "./app.js";
+```
+
+Si vous utilisez également des déclarations de contenu `md()` (Markdown), installez également le moteur de rendu markdown :
+
+```typescript fileName="src/main.ts" codeFormat="typescript"
+import { installIntlayer, installIntlayerMarkdown } from "vanilla-intlayer";
+
+installIntlayer();
+installIntlayerMarkdown();
+
+import "./app.js";
+```
+
+### Étape 5 : Déclarer votre contenu
+
+Créez et gérez vos déclarations de contenu pour stocker les traductions :
+
+```typescript fileName="src/app.content.ts" contentDeclarationFormat="typescript"
+import { insert, t, type Dictionary } from "intlayer";
+
+const appContent = {
+  key: "app",
+  content: {
+    title: "Vite + Vanilla",
+
+    viteLogoLabel: t({
+      en: "Vite Logo",
+      fr: "Logo Vite",
+      es: "Logo Vite",
+    }),
+
+    count: insert(
+      t({
+        en: "count is {{count}}",
+        fr: "le compte est {{count}}",
+        es: "el recuento es {{count}}",
+      })
+    ),
+
+    readTheDocs: t({
+      en: "Click on the Vite logo to learn more",
+      fr: "Cliquez sur le logo Vite pour en savoir plus",
+      es: "Haga clic en el logotipo de Vite pour obtenir plus d'informations",
+    }),
+  },
+} satisfies Dictionary;
+
+export default appContent;
+```
+
+```javascript fileName="src/app.content.mjs" contentDeclarationFormat="esm"
+import { insert, t } from "intlayer";
+
+/** @type {import('intlayer').Dictionary} */
+const appContent = {
+  key: "app",
+  content: {
+    title: "Vite + Vanilla",
+
+    viteLogoLabel: t({
+      en: "Vite Logo",
+      fr: "Logo Vite",
+      es: "Logo Vite",
+    }),
+
+    count: insert(
+      t({
+        en: "count is {{count}}",
+        fr: "le compte est {{count}}",
+        es: "el recuento es {{count}}",
+      })
+    ),
+
+    readTheDocs: t({
+      en: "Click on the Vite logo to learn more",
+      fr: "Cliquez sur le logo Vite pour en savoir plus",
+      es: "Haga clic en le logo de Vite pour obtenir plus d'informations",
+    }),
+  },
+};
+
+export default appContent;
+```
+
+```javascript fileName="src/app.content.cjs" contentDeclarationFormat="commonjs"
+const { insert, t } = require("intlayer");
+
+/** @type {import('intlayer').Dictionary} */
+const appContent = {
+  key: "app",
+  content: {
+    title: "Vite + Vanilla",
+
+    viteLogoLabel: t({
+      en: "Vite Logo",
+      fr: "Logo Vite",
+      es: "Logo Vite",
+    }),
+
+    count: insert(
+      t({
+        en: "count is {{count}}",
+        fr: "le compte est {{count}}",
+        es: "el recuento es {{count}}",
+      })
+    ),
+
+    readTheDocs: t({
+      en: "Click on the Vite logo to learn more",
+      fr: "Cliquez sur le logo Vite pour en savoir plus",
+      es: "Haga clic en le logo de Vite pour obtenir plus d'informations",
+    }),
+  },
+};
+
+module.exports = appContent;
+```
+
+```json fileName="src/app.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "app",
+  "content": {
+    "title": "Vite + Vanilla",
+    "viteLogoLabel": {
+      "nodeType": "translation",
+      "translation": {
+        "en": "Vite Logo",
+        "fr": "Logo Vite",
+        "es": "Logo Vite"
+      }
+    },
+    "count": {
+      "nodeType": "insertion",
+      "insertion": {
+        "nodeType": "translation",
+        "translation": {
+          "en": "count is {{count}}",
+          "fr": "le compte est {{count}}",
+          "es": "el recuento es {{count}}"
+        }
+      }
+    },
+    "readTheDocs": {
+      "nodeType": "translation",
+      "translation": {
+        "en": "Click on the Vite logo to learn more",
+        "fr": "Cliquez sur le logo Vite pour en savoir plus",
+        "es": "Haga clic en le logo de Vite pour obtenir plus d'informations"
+      }
+    }
+  }
+}
+```
+
+> 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`). Elles doivent correspondre à l'extension du fichier de déclaration de contenu (par défaut, `.content.{json,ts,tsx,js,jsx,mjs,cjs}`).
+>
+> Pour plus de détails, reportez-vous à la [documentation sur la déclaration de contenu](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/dictionary/content_file.md).
+
+### Étape 6 : Utiliser Intlayer dans votre JavaScript
+
+`vanilla-intlayer` reflète l'API de `react-intlayer` : `useIntlayer(key, locale?)` renvoie directement le contenu traduit. Enchaînez `.onChange()` sur le résultat pour vous abonner aux changements de langue — l'équivalent explicite d'un re-rendu React.
+
+```typescript fileName="src/main.ts" codeFormat="typescript"
+import { installIntlayer, useIntlayer } from "vanilla-intlayer";
+
+installIntlayer();
+
+// Obtenir le contenu initial pour la langue actuelle.
+// Enchaîner .onChange() pour être averti chaque fois que la langue change.
+const content = useIntlayer("app").onChange((newContent) => {
+  // Re-rendre ou patcher uniquement les nœuds DOM affectés
+  document.querySelector<HTMLHeadingElement>("h1")!.textContent = String(
+    newContent.title
+  );
+  document.querySelector<HTMLParagraphElement>(".read-the-docs")!.textContent =
+    String(newContent.readTheDocs);
+});
+
+// Rendu initial
+document.querySelector<HTMLHeadingElement>("h1")!.textContent = String(
+  content.title
+);
+document.querySelector<HTMLParagraphElement>(".read-the-docs")!.textContent =
+  String(content.readTheDocs);
+```
+
+> Accédez aux valeurs terminales en tant que chaînes en les enveloppant dans `String()`, qui appelle la méthode `toString()` du nœud et renvoie le texte traduit.
+>
+> Lorsque vous avez besoin de la valeur pour un attribut HTML natif (ex: `alt`, `aria-label`), utilisez directement `.value` :
+>
+> ```typescript
+> img.alt = content.viteLogoLabel.value;
+> ```
+
+### (Optionnel) Étape 7 : Changer la langue de votre contenu
+
+Pour changer la langue de votre contenu, utilisez la fonction `setLocale` exposée par `useLocale`.
+
+```typescript fileName="src/locale-switcher.ts" codeFormat="typescript"
+import { getLocaleName } from "intlayer";
+import { useLocale } from "vanilla-intlayer";
+
+export function setupLocaleSwitcher(container: HTMLElement): () => void {
+  const { locale, availableLocales, setLocale, subscribe } = useLocale();
+
+  const select = document.createElement("select");
+  select.setAttribute("aria-label", "Language");
+
+  const render = (currentLocale: string) => {
+    select.innerHTML = availableLocales
+      .map(
+        (loc) =>
+          `<option value="${loc}"${loc === currentLocale ? " selected" : ""}>
+            ${getLocaleName(loc)}
+          </option>`
+      )
+      .join("");
+  };
+
+  render(locale);
+  container.appendChild(select);
+
+  select.addEventListener("change", () => setLocale(select.value as any));
+
+  // Garder le sélecteur synchronisé lorsque la langue change d'ailleurs
+  return subscribe((newLocale) => render(newLocale));
+}
+```
+
+### (Optionnel) Étape 8 : Rendre du contenu Markdown et HTML
+
+Intlayer prend en charge les déclarations de contenu `md()` et `html()`. En vanilla JS, le résultat compilé est inséré en tant que HTML brut via `innerHTML`.
+
+```typescript fileName="src/app.content.ts" contentDeclarationFormat="typescript"
+import { md, t, type Dictionary } from "intlayer";
+
+const appContent = {
+  key: "app",
+  content: {
+    // ...
+    editNote: md(
+      t({
+        en: "Edit `src/main.ts` and save to test **HMR**",
+        fr: "Modifiez `src/main.ts` et enregistrez pour tester **HMR**",
+        es: "Edite `src/main.ts` y guarde para probar **HMR**",
+      })
+    ),
+  },
+} satisfies Dictionary;
+
+export default appContent;
+```
+
+Compiler et injecter le HTML :
+
+```typescript fileName="src/main.ts" codeFormat="typescript"
+import {
+  compileMarkdown,
+  installIntlayerMarkdown,
+  useIntlayer,
+} from "vanilla-intlayer";
+
+installIntlayerMarkdown();
+
+const content = useIntlayer("app").onChange((newContent) => {
+  const el = document.querySelector<HTMLDivElement>(".edit-note")!;
+  el.innerHTML = compileMarkdown(String(newContent.editNote));
+});
+
+document.querySelector<HTMLDivElement>(".edit-note")!.innerHTML =
+  compileMarkdown(String(content.editNote));
+```
+
+> [!TIP]
+> `String(content.editNote)` appelle `toString()` sur l'`IntlayerNode` qui renvoie la chaîne Markdown brute. Passez-la à `compileMarkdown` pour obtenir une chaîne HTML, puis définissez-la via `innerHTML`.
+
+> [!WARNING]
+> N'utilisez `innerHTML` qu'avec du contenu de confiance. Si le markdown provient d'une entrée utilisateur, assainissez-le d'abord (ex: avec DOMPurify). Vous pouvez installer un moteur de rendu d'assainissement dynamiquement :
+>
+> ```typescript
+> import { installIntlayerMarkdownDynamic } from "vanilla-intlayer";
+>
+> await installIntlayerMarkdownDynamic(async () => {
+>   const DOMPurify = await import("dompurify");
+>   return (markdown) => DOMPurify.sanitize(compileMarkdown(markdown));
+> });
+> ```
+
+### (Optionnel) Étape 9 : Ajouter le routage localisé à votre application
+
+Pour créer des routes uniques pour chaque langue (utile pour le SEO), vous pouvez utiliser `intlayerProxy` dans votre config Vite pour la détection de la langue côté serveur.
+
+Tout d'abord, ajoutez `intlayerProxy` à votre config Vite :
+
+> Notez que pour utiliser `intlayerProxy` en production, vous devez déplacer `vite-intlayer` de `devDependencies` vers `dependencies`.
+
+```typescript {3,7} fileName="vite.config.ts" codeFormat="typescript"
+import { defineConfig } from "vite";
+import { intlayer, intlayerProxy } from "vite-intlayer";
+
+export default defineConfig({
+  plugins: [
+    intlayerProxy(), // doit être placé en premier
+    intlayer(),
+  ],
+});
+```
+
+```javascript {3,7} fileName="vite.config.mjs" codeFormat="esm"
+import { defineConfig } from "vite";
+import { intlayer, intlayerProxy } from "vite-intlayer";
+
+export default defineConfig({
+  plugins: [
+    intlayerProxy(), // doit être placé en premier
+    intlayer(),
+  ],
+});
+```
+
+```javascript {3,7} fileName="vite.config.cjs" codeFormat="commonjs"
+const { defineConfig } = require("vite");
+const { intlayer, intlayerProxy } = require("vite-intlayer");
+
+module.exports = defineConfig({
+  plugins: [
+    intlayerProxy(), // doit être placé en premier
+    intlayer(),
+  ],
+});
+```
+
+### (Optionnel) Étape 10 : Changer l'URL lorsque la langue change
+
+Pour mettre à jour l'URL du navigateur lorsque la langue change, appelez `useRewriteURL()` après avoir installé Intlayer :
+
+```typescript fileName="src/main.ts" codeFormat="typescript"
+import { installIntlayer, useRewriteURL } from "vanilla-intlayer";
+
+installIntlayer();
+
+// Réécrit l'URL immédiatement et lors de chaque changement de langue ultérieur.
+// Renvoie une fonction de désabonnement pour le nettoyage.
+const stopRewriteURL = useRewriteURL();
+```
+
+### (Optionnel) Étape 11 : Changer les attributs de langue et de direction HTML
+
+Mettez à jour les attributs `lang` et `dir` de la balise `<html>` pour qu'ils correspondent à la langue actuelle pour l'accessibilité et le SEO.
+
+```typescript fileName="src/main.ts" codeFormat="typescript"
+import { getHTMLTextDir } from "intlayer";
+import { installIntlayer, useLocale } from "vanilla-intlayer";
+
+installIntlayer();
+
+useLocale({
+  onLocaleChange: (locale) => {
+    document.documentElement.lang = locale;
+    document.documentElement.dir = getHTMLTextDir(locale);
+  },
+});
+```
+
+### (Optionnel) Étape 12 : Chargement différé des dictionnaires par langue
+
+Pour les grandes applications, vous pouvez fractionner le dictionnaire de chaque langue dans son propre chunk. Utilisez `useDictionaryDynamic` aux côtés de l'`import()` dynamique de Vite :
+
+```typescript fileName="src/app.ts" codeFormat="typescript"
+import { installIntlayer, useDictionaryDynamic } from "vanilla-intlayer";
+
+installIntlayer();
+
+const unsubscribe = useDictionaryDynamic(
+  {
+    en: () => import("../.intlayer/dictionaries/en/app.mjs"),
+    fr: () => import("../.intlayer/dictionaries/fr/app.mjs"),
+    es: () => import("../.intlayer/dictionaries/es/app.mjs"),
+  },
+  "app"
+).onChange((content) => {
+  document.querySelector("h1")!.textContent = String(content.title);
+});
+```
+
+> Le bundle de chaque langue n'est récupéré que lorsque cette langue devient active et le résultat est mis en cache — les basculements ultérieurs vers la même langue sont instantanés.
+
+### (Optionnel) Étape 13 : Extraire le contenu de vos composants
+
+Si vous avez une base de code existante, transformer des milliers de fichiers peut prendre du temps.
+
+Pour faciliter ce processus, Intlayer propose un [compilateur](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/compiler.md) / [extracteur](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/cli/extract.md) pour transformer vos composants et extraire le contenu.
+
+Pour le configurer, vous pouvez ajouter une section `compiler` dans votre fichier `intlayer.config.ts` :
+
+```typescript fileName="intlayer.config.ts" codeFormat="typescript"
+import { type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  // ... Reste de votre config
+  compiler: {
+    /**
+     * Indique si le compilateur doit être activé.
+     */
+    enabled: true,
+
+    /**
+     * Définit le chemin des fichiers de sortie
+     */
+    output: ({ fileName, extension }) => `./${fileName}${extension}`,
+
+    /**
+     * Indique si les composants doivent être sauvegardés après avoir été transformés.
+     * De cette façon, le compilateur peut être exécuté une seule fois pour transformer l'application, puis il peut être supprimé.
+     */
+    saveComponents: false,
+
+    /**
+     * Préfixe de clé de dictionnaire
+     */
+    dictionaryKeyPrefix: "",
+  },
+};
+
+export default config;
+```
+
+<Tabs>
+ <Tab value='Commande Extract'>
+
+Exécutez l'extracteur pour transformer vos composants et extraire le contenu
+
+```bash packageManager="npm"
+npx intlayer extract
+```
+
+```bash packageManager="pnpm"
+pnpm intlayer extract
+```
+
+```bash packageManager="yarn"
+yarn intlayer extract
+```
+
+```bash packageManager="bun"
+bunx intlayer extract
+```
+
+ </Tab>
+ <Tab value='Compilateur Babel'>
+
+Mettez à jour votre `vite.config.ts` pour inclure le plugin `intlayerCompiler` :
+
+```ts fileName="vite.config.ts"
+import { defineConfig } from "vite";
+import { intlayer, intlayerCompiler } from "vite-intlayer";
+
+export default defineConfig({
+  plugins: [
+    intlayer(),
+    intlayerCompiler(), // Ajoute le plugin compilateur
+  ],
+});
+```
+
+```bash packageManager="npm"
+npm run build # Ou npm run dev
+```
+
+```bash packageManager="pnpm"
+pnpm run build # Ou pnpm run dev
+```
+
+```bash packageManager="yarn"
+yarn build # Ou yarn dev
+```
+
+```bash packageManager="bun"
+bun run build # Ou bun run dev
+```
+
+ </Tab>
+</Tabs>
+
+### Configurer TypeScript
+
+Assurez-vous que votre configuration TypeScript inclut les types autogénérés.
+
+```json5 fileName="tsconfig.json"
+{
+  "compilerOptions": {
+    // ...
+  },
+  "include": ["src", ".intlayer/**/*.ts"],
+}
+```
+
+### 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` :
+
+```bash
+# Ignorez 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 VS Code**.
+
+[Installer depuis le VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
+
+Cette extension fournit :
+
+- **L'autocomplétion** pour les clés de traduction.
+- **La détection d'erreurs en temps réel** pour les traductions manquantes.
+- **Des aperçus en ligne** du contenu traduit.
+- **Des actions rapides** pour créer et mettre à jour facilement les traductions.
+
+Pour plus de détails sur l'utilisation de l'extension, reportez-vous à la [documentation de l'extension Intlayer VS Code](https://intlayer.org/doc/vs-code-extension).
+
+---
+
+### Aller plus loin
+
+Pour aller plus loin, vous pouvez implémenter l'[éditeur visuel](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_visual_editor.md) ou externaliser votre contenu en utilisant le [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_CMS.md).