Intlayer ve Vite ve Vue ile Uluslararasılaştırma Başlangıç Kılavuzu (i18n)

GitHub'da Uygulama Şablonu'na bakın.

Intlayer Nedir?

Intlayer, modern web uygulamalarında çok dilli desteği basitleştirmek için tasarlanmış yenilikçi, açık kaynaklı bir uluslararasılaştırma (i18n) kütüphanesidir.

Intlayer ile şunları yapabilirsiniz:

• Bileşen düzeyinde açıklayıcı sözlükler kullanarak çevirileri kolayca yönetin.
• Meta verileri, rotaları ve içeriği dinamik olarak yerelleştirin.
• Otomatik oluşturulan türlerle TypeScript desteği sağlayın, böylece otomatik tamamlama ve hata algılama iyileşir.
• Dinamik yerel ayar algılama ve anahtarlama gibi gelişmiş özelliklerden yararlanın.

Vite ve Vue Uygulamasında Intlayer Kurulumu İçin Adım Adım Kılavuz

Adım 1: Bağımlılıkları Kurma

Gerekli paketleri npm kullanarak kurun:

npm install intlayer vue-intlayernpm install vite-intlayer --save-dev

• intlayer

  Yapılandırma yönetimi, çeviri, içerik bildirimi, dönüştürme ve CLI komutları için uluslararasılaştırma araçları sağlayan çekirdek paket.

• vue-intlayer Vue uygulamasıyla Intlayer'ı entegre eden paket. Vue uluslararasılaştırması için bağlam sağlayıcıları ve composables sağlar.

• vite-intlayer Vite bundler ile Intlayer'ı entegre etmek için Vite eklentisini ve kullanıcının tercih ettiği yerel ayarı algılamak, çerezleri yönetmek ve URL yönlendirmesi yapmak için middleware'i içerir.

Adım 2: Projenizi Yapılandırma

Uygulamanızın dillerini yapılandırmak için bir yapılandırma dosyası oluşturun:

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [      Locales.ENGLISH,      Locales.FRENCH,      Locales.SPANISH,      // Diğer yerel ayarlarınız    ],    defaultLocale: Locales.ENGLISH,  },};export default config;

Bu yapılandırma dosyası aracılığıyla, yerelleştirilmiş URL'leri, middleware yönlendirmesini, çerez adlarını, içerik bildiriminizin konumunu ve uzantısını, Intlayer günlüklerini konsolda devre dışı bırakmayı ve daha fazlasını ayarlayabilirsiniz. Kullanılabilir parametrelerin tam listesi için yapılandırma dokümantasyonuna bakın.

Adım 3: Intlayer'ı Vite Yapılandırmanıza Entegre Etme

Yapılandırmanıza intlayer eklentisini ekleyin.

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

intlayerPlugin() Vite eklentisi, Vite ile Intlayer'ı entegre etmek için kullanılır. İçerik bildirimi dosyalarının oluşturulmasını sağlar ve bunları geliştirme modunda izler. Ayrıca Intlayer ortam değişkenlerini Vite uygulaması içinde tanımlar. Ek olarak, performansı optimize etmek için takma adlar sağlar.

Adım 4: İçeriğinizi Bildirin

Çevirileri depolamak için içerik bildiriminizi oluşturun ve yönetin:

import { t, type Dictionary } from "intlayer";const helloWorldContent = {  key: "helloworld",  content: {    count: t({ en: "count is ", fr: "le compte est ", es: "el recuento es " }),    edit: t({      en: "Edit <code>components/HelloWorld.vue</code> and save to test HMR",      fr: "Éditez <code>components/HelloWorld.vue</code> et enregistrez pour tester HMR",      es: "Edita <code>components/HelloWorld.vue</code> y guarda para probar HMR",    }),    checkOut: t({ en: "Check out ", fr: "Vérifiez ", es: "Compruebe " }),    officialStarter: t({      en: "the official Vue + Vite starter",      fr: "le starter officiel Vue + Vite",      es: "el starter oficial Vue + Vite",    }),    learnMore: t({      en: "Learn more about IDE Support for Vue in the ",      fr: "En savoir plus sur le support IDE pour Vue dans le ",      es: "Aprenda más sobre el soporte IDE para Vue en el ",    }),    vueDocs: t({      en: "Vue Docs Scaling up Guide",      fr: "Vue Docs Scaling up Guide",      es: "Vue Docs Scaling up Guide",    }),    readTheDocs: t({      en: "Click on the Vite and Vue logos to learn more",      fr: "Cliquez sur les logos Vite et Vue pour en savoir plus",      es: "Haga clic en los logotipos de Vite y Vue para obtener más información",    }),  },} satisfies Dictionary;export default helloWorldContent;

İçerik bildiriminiz uygulamanızın herhangi bir yerine yerleştirilebilir, yeter ki contentDir dizinine dahil edilsin (varsayılan olarak ./src). Ve içerik bildirimi dosya uzantısı ile eşleşsin (varsayılan olarak .content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}).

Daha fazla ayrıntı için içerik bildirimi dokümantasyonuna bakın.

Adım 5: Kodunuzda Intlayer'ı Kullanın

Vue uygulamanız boyunca Intlayer'ın uluslararasılaştırma özelliklerine erişmek için, ana dosyanızda Intlayer singleton örneğini kaydetmeniz gerekir. Bu adım, çevirilerin bileşen ağacınızın herhangi bir yerinde erişilebilir olmasını sağlamak için çok önemlidir.

import { createApp } from "vue";import { installIntlayer } from "vue-intlayer";import App from "./App.vue";import "./style.css";const app = createApp(App);// Üst düzeyde sağlayıcıyı enjekte edininstallIntlayer(app);// Uygulamayı bağlayınapp.mount("#app");

İçerik sözlüklerinize uygulamanız boyunca erişin ve useIntlayer composables kullanarak bir ana Vue bileşeni oluşturun:

<script setup lang="ts">import { ref } from "vue";import { useIntlayer } from "vue-intlayer";defineProps({  msg: String,});const {  count,  edit,  checkOut,  officialStarter,  learnMore,  vueDocs,  readTheDocs,} = useIntlayer("helloworld");const countRef = ref(0);</script><template>  <h1>{{ msg }}</h1>  <div class="card">    <button type="button" @click="countRef++">      <count />      {{ countRef }}    </button>    <p v-html="edit"></p>  </div>  <p>    <checkOut />    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"      >create-vue</a    >, <officialStarter />  </p>  <p>    <learnMore />    <a      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"      target="_blank"      ><vueDocs /></a    >.  </p>  <p class="read-the-docs"><readTheDocs /></p>  <p class="read-the-docs">{{ readTheDocs }}</p></template>

Intlayer'da İçeriğe Erişim

Intlayer, içeriğinize erişmek için farklı API'ler sunar:

• Bileşen tabanlı sözdizimi (önerilen): İçeriği Intlayer Düğümü olarak işlemek için <myContent /> veya <Component :is="myContent" /> sözdizimini kullanın. Bu, Görsel Düzenleyici ve CMS ile sorunsuz bir şekilde entegre olur.

• Dize tabanlı sözdizimi: İçeriği düz metin olarak işlemek için {{ myContent }} kullanın, Görsel Düzenleyici desteği olmadan.

• Ham HTML sözdizimi: İçeriği ham HTML olarak işlemek için <div v-html="myContent" /> kullanın, Görsel Düzenleyici desteği olmadan.

• Yıkım sözdizimi: useIntlayer composable, içeriği erişirken reaktifliği koruyan bir Proxy döndürür.

  • const content = useIntlayer("myContent"); Ve {{ content.myContent }} / <content.myContent /> kullanın.
  • Veya const { myContent } = useIntlayer("myContent"); Ve {{ myContent}} / <myContent/> kullanarak içeriği yıkın.

(İsteğe Bağlı) Adım 6: İçeriğinizin Dilini Değiştirin

İçeriğinizin dilini değiştirmek için useLocale composable tarafından sağlanan setLocale işlevini kullanabilirsiniz. Bu işlev, uygulamanın yerel ayarını ayarlamanıza ve içeriği buna göre güncellemenize olanak tanır.

Dilleri değiştirmek için bir bileşen oluşturun:

<template>  <div class="locale-switcher">    <select v-model="selectedLocale" @change="changeLocale">      <option v-for="loc in availableLocales" :key="loc" :value="loc">        {{ getLocaleName(loc) }}      </option>    </select>  </div></template><script setup lang="ts">import { ref, watch } from "vue";import { getLocaleName } from "intlayer";import { useLocale } from "vue-intlayer";// Yerel ayar bilgilerini ve setLocale işlevini alınconst { locale, availableLocales, setLocale } = useLocale();// Seçilen yerel ayarı bir ref ile takip edinconst selectedLocale = ref(locale.value);// Seçim değiştiğinde yerel ayarı güncelleyinconst changeLocale = () => setLocale(selectedLocale.value);// Seçilen yerel ayarı genel yerel ayar ile senkronize tutunwatch(  () => locale.value,  (newLocale) => {    selectedLocale.value = newLocale;  });</script>

Ardından, bu bileşeni App.vue'nuzda kullanın:

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";import HelloWorld from "@components/HelloWorld.vue";import LocaleSwitcher from "@components/LocaleSwitcher.vue";import { ref, watch } from "vue";const content = useIntlayer("app"); // İlgili intlayer bildirim dosyası oluşturun</script><template>  <div>    <LocaleSwitcher />    <a href="https://vite.dev" target="_blank">      <img src="/vite.svg" class="logo" :alt="content.viteLogo" />    </a>    <a href="https://vuejs.org/" target="_blank">      <img src="./assets/vue.svg" class="logo vue" :alt="content.vueLogo" />    </a>  </div>  <HelloWorld :msg="content.title" /></template>

(İsteğe Bağlı) Adım 7: Uygulamanıza Yerelleştirilmiş Yönlendirme Ekleyin

Vue uygulamasında yerelleştirilmiş yönlendirme eklemek genellikle yerel ayar önekleriyle Vue Router kullanmayı içerir. Bu, her dil için benzersiz rotalar oluşturur, SEO ve SEO dostu URL'ler için kullanışlıdır. Örnek:

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

Öncelikle Vue Router'ı kurun:

npm install intlayer vue-router

Ardından, yerel ayar tabanlı yönlendirmeyi yöneten bir yönlendirici yapılandırması oluşturun:

import {  configuration,  getPathWithoutLocale,  localeFlatMap,  type Locales,} from 'intlayer';import { createIntlayerClient } from 'vue-intlayer';import { createRouter, createWebHistory } from 'vue-router';import HomeView from './views/home/HomeView.vue';import RootView from './views/root/Root.vue';// Uluslararasılaştırma yapılandırmasını çıkarconst { internationalization, middleware } = configuration;const { defaultLocale } = internationalization;/** * Yerel ayar özel yollarla ve meta verilerle rotaları bildirin. */const routes = localeFlatMap((localizedData) => [  {    path: `${localizedData.urlPrefix}/`,    name: `Root-${localizedData.locale}`,    component: RootView,    meta: {      locale: localizedData.locale,    },  },  {    path: `${localizedData.urlPrefix}/home`,    name: `Home-${localizedData.locale}`,    component: HomeView,    meta: {      locale: localizedData.locale,    },  },]);// Yönlendirici örneğini oluşturexport const router = createRouter({  history: createWebHistory(),  routes,});// Yerel ayar yönetimi için navigasyon koruması ekleyinrouter.beforeEach((to, _from, next) => {  const client = createIntlayerClient();  const metaLocale = to.meta.locale as Locales | undefined;  if (metaLocale) {    // Rota meta'sında tanımlanan yerel ayarı yeniden kullan    client.setLocale(metaLocale);    next();  } else {    // Geri dönüş: meta'da yerel ayar yok, muhtemelen eşleşmeyen rota    // İsteğe bağlı: 404'ü yönetin veya varsayılan yerel ayara yönlendirin    client.setLocale(defaultLocale);    if (middleware.prefixDefault) {      next(`/${defaultLocale}${getPathWithoutLocale(to.path)}`);    } else {      next(getPathWithoutLocale(to.path));    }  }});

Ad, tüm rotalar arasında benzersiz olmalı ve çakışmaları önlemek için yönlendirme ve bağlantıyı sağlamak için kullanılır.

Ardından, yönlendiriciyi main.js dosyanızda kaydedin:

import { createApp } from "vue";import App from "./App.vue";import { router } from "./router";import "./style.css";const app = createApp(App);// Uygulamaya yönlendiriciyi ekleyinapp.use(router);// Uygulamayı bağlayınapp.mount("#app");

Ardından, RouterView bileşenini işlemek için App.vue dosyanızı güncelleyin. Bu bileşen, geçerli rota için eşleşen bileşeni görüntüler.

<script setup lang="ts">import LocaleSwitcher from "@components/LocaleSwitcher.vue";</script><template>  <nav>    <LocaleSwitcher />  </nav>  <RouterView /></template>

Paralel olarak, uygulamanıza sunucu tarafı yönlendirme eklemek için intlayerMiddlewarePlugin'i de kullanabilirsiniz. Bu eklenti, URL'ye göre geçerli yerel ayarı otomatik olarak algılar ve uygun yerel ayar çerezini ayarlar. Hiç yerel ayar belirtilmezse, eklenti kullanıcının tarayıcı dil tercihlerine göre en uygun yerel ayarı belirler. Hiç yerel ayar algılanmazsa, varsayılan yerel ayara yönlendirir.

Not: Üretimde intlayerMiddlewarePlugin'i kullanmak için vite-intlayer paketini devDependencies'den dependencies'e taşımalısınız.

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

(İsteğe Bağlı) Adım 8: Yerel ayar değiştiğinde URL'yi değiştirin

Kullanıcı dili değiştirdiğinde URL'yi otomatik olarak güncellemek için LocaleSwitcher bileşenini Vue Router kullanacak şekilde değiştirebilirsiniz:

<template>  <div class="locale-switcher">    <select v-model="selectedLocale" @change="changeLocale">      <option v-for="loc in availableLocales" :key="loc" :value="loc">        {{ getLocaleName(loc) }}      </option>    </select>  </div></template><script setup lang="ts">import { ref, watch } from "vue";import { useRouter } from "vue-router";import { Locales, getLocaleName, getLocalizedUrl } from "intlayer";import { useLocale } from "vue-intlayer";// Vue Router'ı alınconst router = useRouter();// Yerel ayar bilgilerini ve setLocale işlevini alınconst { locale, availableLocales, setLocale } = useLocale({  onLocaleChange: (newLocale) => {    // Geçerli rotayı alın ve yerelleştirilmiş bir URL oluşturun    const currentPath = router.currentRoute.value.fullPath;    const localizedPath = getLocalizedUrl(currentPath, newLocale);    // Sayfayı yeniden yüklemeden yerelleştirilmiş rotaya gidin    router.push(localizedPath);  },});// Seçilen yerel ayarı bir ref ile takip edinconst selectedLocale = ref(locale.value);// Seçim değiştiğinde yerel ayarı güncelleyinconst changeLocale = () => {  setLocale(selectedLocale.value);};// Seçilen yerel ayarı genel yerel ayar ile senkronize tutunwatch(  () => locale.value,  (newLocale) => {    selectedLocale.value = newLocale;  });</script>

İpucu: Daha iyi SEO ve erişilebilirlik için, dil özel sayfalarına bağlanmak üzere <a href="/fr/home" hreflang="fr"> gibi etiketleri kullanın. Bu, arama motorlarının dil özel URL'lerini keşfetmesine ve uygun şekilde indekslemesine olanak tanır. SPA davranışını korumak için varsayılan navigasyonu @click.prevent ile önleyin, useLocale ile yerel ayarı değiştirin ve Vue Router kullanarak programatik olarak gidin.

<ol class="divide-text/20 divide-y divide-dashed overflow-y-auto p-1">  <li>    <a      hreflang="x-default"      aria-label="Switch to English"      target="_self"      aria-current="page"      href="/doc/get-started"    >      <div>        <span dir="ltr" lang="en">English</span>        <span>English</span>        <span>EN</span>      </div>    </a>  </li>  <li>    <a      hreflang="es"      aria-label="Switch to Spanish"      target="_self"      href="/es/doc/get-started"    >      <div>        <span dir="ltr" lang="es">Español</span>        <span>Spanish</span>        <span>ES</span>      </div>    </a>  </li></ol>

(İsteğe Bağlı) Adım 9: HTML Dil ve Yön Niteliklerini Değiştirin

Uygulamanız birden fazla dili desteklediğinde, <html> etiketinin lang ve dir niteliklerini geçerli yerel ayar ile eşleşecek şekilde güncellemek önemlidir. Bunu yapmak şunları sağlar:

• Erişilebilirlik: Ekran okuyucular ve yardımcı teknolojiler, içeriği doğru şekilde telaffuz etmek ve yorumlamak için doğru lang niteliğine güvenir.
• Metin İşleme: dir (yön) niteliği, metnin doğru sırada işlenmesini sağlar (örneğin, İngilizce için soldan sağa, Arapça veya İbranice için sağdan sola), okunabilirlik için gereklidir.
• SEO: Arama motorları, sayfanızın dilini belirlemek için lang niteliğini kullanır, arama sonuçlarında doğru yerelleştirilmiş içeriği sunmaya yardımcı olur.

Yerel ayar değiştiğinde bu nitelikleri dinamik olarak güncellemek, tüm desteklenen diller için tutarlı ve erişilebilir bir deneyim sağlar.

import { watch } from "vue";import { useLocale } from "vue-intlayer";import { getHTMLTextDir } from "intlayer";/** * Geçerli yerel ayara göre HTML <html> etiketinin `lang` ve `dir` niteliklerini günceller. * * @example * // App.vue'nuzda veya genel bir bileşende * import { useI18nHTMLAttributes } from './composables/useI18nHTMLAttributes' * * useI18nHTMLAttributes() */export const useI18nHTMLAttributes = () => {  const { locale } = useLocale();  // Yerel ayar değiştiğinde HTML niteliklerini güncelleyin  watch(    () => locale.value,    (newLocale) => {      if (!newLocale) return;      // Dil niteliğini güncelleyin      document.documentElement.lang = newLocale;      // Metin yönünü ayarlayın (çoğu dil için ltr, Arapça, İbranice vb. için rtl)      document.documentElement.dir = getHTMLTextDir(newLocale);    },    { immediate: true }  );};

Bu composable'ı App.vue'nuzda veya genel bir bileşende kullanın:

<script setup lang="ts">import { useI18nHTMLAttributes } from "@composables/useI18nHTMLAttributes";// Geçerli yerel ayara göre HTML niteliklerini uygulayınuseI18nHTMLAttributes();</script><template>  <!-- Uygulama şablonunuz --></template>

(İsteğe Bağlı) Adım 10: Yerelleştirilmiş Bağlantı Bileşeni Oluşturun

Uygulamanızın navigasyonunun geçerli yerel ayarı saygı gösterdiğinden emin olmak için özel bir Link bileşeni oluşturabilirsiniz. Bu bileşen, dahili URL'leri otomatik olarak geçerli dille önekler, böylece. Örneğin, bir Fransızca konuşan kullanıcı "Hakkında" sayfasına giden bir bağlantıya tıkladığında, /about yerine /fr/about'a yönlendirilir.

Bu davranış çeşitli nedenlerle kullanışlıdır:

• SEO ve Kullanıcı Deneyimi: Yerelleştirilmiş URL'ler, arama motorlarının dil özel sayfalarını doğru şekilde indekslemesine yardımcı olur ve kullanıcılara tercih ettikleri dilde içerik sunar.
• Tutarlılık: Uygulamanız boyunca yerelleştirilmiş bir bağlantı kullanarak, navigasyonun aynı yerel ayar bağlamında kalmasını garanti edersiniz, beklenmedik dil anahtarlarını önlersiniz.
• Bakım Kolaylığı: URL mantığını tek bir bileşende merkezileştirmek, yönetimini basitleştirir, uygulamanız büyüdükçe kod tabanınızı daha kolay yönetilebilir hale getirir.

<template>  <a :href="localizedHref" v-bind="$attrs">    <slot />  </a></template><script setup lang="ts">import { computed } from "vue";import { getLocalizedUrl } from "intlayer";import { useLocale } from "vue-intlayer";const props = defineProps({  href: {    type: String,    required: true,  },});const { locale } = useLocale();// Bağlantının harici olup olmadığını kontrol edinconst isExternalLink = computed(() => /^https?:\/\//.test(props.href || ""));// Dahili bağlantılar için yerelleştirilmiş bir href oluşturunconst localizedHref = computed(() =>  isExternalLink.value ? props.href : getLocalizedUrl(props.href, locale.value));</script>

Vue Router ile kullanmak için yönlendiriciye özel bir sürüm oluşturun:

<template>  <router-link :to="localizedTo" v-bind="$attrs">    <slot />  </router-link></template><script setup lang="ts">import { computed } from "vue";import { getLocalizedUrl } from "intlayer";import { useLocale } from "vue-intlayer";const props = defineProps({  to: {    type: [String, Object],    required: true,  },});const { locale } = useLocale();// Router-link için yerelleştirilmiş to-prop oluşturunconst localizedTo = computed(() => {  if (typeof props.to === "string") {    return getLocalizedUrl(props.to, locale.value);  } else {    // 'to' bir nesne ise, yol özelliğini yerelleştirin    return {      ...props.to,      path: getLocalizedUrl(props.to.path ?? "/", locale.value),    };  }});</script>

Uygulamanızda bu bileşenleri kullanın:

<template>  <div>    <!-- Vue router  -->    <RouterLink to="/">Kök</RouterLink>    <RouterLink to="/home">Ana Sayfa</RouterLink>    <!-- Diğer -->    <Link href="/">Kök</Link>    <Link href="/home">Ana Sayfa</Link>  </div></template><script setup lang="ts">import Link from "@components/Link.vue";import RouterLink from "@components/RouterLink.vue";</script>

(İsteğe Bağlı) Adım 11: Markdown İşleyin

Intlayer, Vue uygulamanızda Markdown içeriğini doğrudan işleme desteği sağlar. Varsayılan olarak, Markdown düz metin olarak kabul edilir. Markdown'ı zengin HTML'ye dönüştürmek için markdown-it, bir Markdown ayrıştırıcısı entegre edebilirsiniz.

Bu, çevirileriniz listeler, bağlantılar veya vurgu gibi biçimlendirilmiş içerik içerdiğinde özellikle kullanışlıdır.

Varsayılan olarak Intlayer markdown'ı dize olarak işler. Ancak Intlayer, markdown'ı HTML'ye dönüştürmek için installIntlayerMarkdown işlevini kullanarak markdown'ı işleme konusunda bir yol sağlar.

Markdown içeriğini intlayer paketi kullanarak nasıl bildireceğinizi görmek için markdown dokümantasyonuna bakın.

import MarkdownIt from "markdown-it";import { createApp, h } from "vue";import { installIntlayer, installIntlayerMarkdown } from "vue-intlayer";const app = createApp(App);installIntlayer(app);const md = new MarkdownIt({  html: true, // HTML etiketlerine izin ver  linkify: true, // URL'leri otomatik olarak bağla  typographer: true, // Akıllı tırnaklar, tireler vb. etkinleştir});// Intlayer'a markdown'ı HTML'ye dönüştürmesi gerektiğinde md.render() kullanmasını söyleinstallIntlayerMarkdown(app, (markdown) => {  const html = md.render(markdown);  return h("div", { innerHTML: html });});

Kaydedildikten sonra, bileşen tabanlı sözdizimini kullanarak Markdown içeriğini doğrudan görüntüleyebilirsiniz:

<template>  <div>    <myMarkdownContent />  </div></template><script setup lang="ts">import { useIntlayer } from "vue-intlayer";const { myMarkdownContent } = useIntlayer("my-component");</script>

TypeScript Yapılandırın

Intlayer, modül genişletmesi kullanarak TypeScript avantajlarından yararlanır.

Otomatik oluşturulan türleri TypeScript yapılandırmanıza dahil edin.

{  // ... Mevcut TypeScript yapılandırmalarınız  "include": [    // ... Mevcut TypeScript yapılandırmalarınız    ".intlayer/**/*.ts", // Otomatik oluşturulan türleri dahil et  ],}

Git Yapılandırması

Intlayer tarafından oluşturulan dosyaları Git deponuza kaydetmekten kaçınmak için bunları yok saymanız önerilir. Bu, bunları Git deponuza kaydetmekten kaçınmanıza olanak tanır.

Bunu yapmak için .gitignore dosyanıza aşağıdaki talimatları ekleyin:

# Intlayer tarafından oluşturulan dosyaları yok say.intlayer

VS Code Uzantısı

Intlayer ile geliştirme deneyiminizi iyileştirmek için resmi Intlayer VS Code Uzantısı'nı kurun.

VS Code Marketplace'ten yükleyin

Bu uzantı şunları sağlar:

• Çeviri anahtarları için otomatik tamamlama.
• Eksik çeviriler için gerçek zamanlı hata algılama.
• Çevrilmiş içeriğin satır içi önizlemeleri.
• Çevirileri kolayca oluşturmak ve güncellemek için hızlı eylemler.

Uzantıyı kullanma hakkında daha fazla ayrıntı için Intlayer VS Code Uzantısı dokümantasyonuna bakın.

Daha Fazla İlerle

Daha fazla ilerlemek için görsel düzenleyici veya içeriğinizi CMS kullanarak dışa aktarmayı uygulayabilirsiniz.

Dokümantasyon Geçmişi