ملحق VS Code الرسمي

نظرة عامة

Intlayer هو الملحق الرسمي لـ Visual Studio Code الخاص بـ Intlayer، مصمم لتحسين تجربة المطور عند العمل مع المحتوى المحلي في مشاريعك.

رابط الملحق: https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension

الميزات

التنقل الفوري

دعم الانتقال إلى التعريف – استخدم ⌘ + Click (ماك) أو Ctrl + Click (ويندوز/لينكس) على مفتاح useIntlayer لفتح ملف المحتوى المقابل فورًا.
تكامل سلس – يعمل بسهولة مع مشاريع react-intlayer و next-intlayer.
دعم متعدد اللغات – يدعم المحتوى المحلي عبر لغات مختلفة.
تكامل مع VS Code – يندمج بسلاسة مع التنقل ولوحة الأوامر في VS Code.

أوامر إدارة القواميس

قم بإدارة قواميس المحتوى الخاصة بك مباشرة من VS Code:

• إنشاء القواميس – توليد ملفات المحتوى بناءً على هيكل مشروعك.
• دفع القواميس – رفع أحدث محتوى القاموس إلى مستودعك.
• سحب القواميس – مزامنة أحدث محتوى القاموس من مستودعك إلى بيئتك المحلية.
• ملء القواميس – تعبئة القواميس بالمحتوى من مشروعك.
• اختبار القواميس – تحديد الترجمات المفقودة أو غير المكتملة.

مولد إعلان المحتوى

قم بسهولة بتوليد ملفات قاموس منظمة بصيغ مختلفة:

إذا كنت تعمل حاليًا على مكون، فسيتم إنشاء ملف .content.{ts,tsx,js,jsx,mjs,cjs,json} لك.

مثال على مكون:

const MyComponent = () => {  const { myTranslatedContent } = useIntlayer("my-component");  return <span>{myTranslatedContent}</span>;};

الملف المُولد بصيغة TypeScript:

import { t, type Dictionary } from "intlayer";const componentContent = {  key: "my-component",  content: {    myTranslatedContent: t({      en: "Hello World",      es: "Hola Mundo",      fr: "Bonjour le monde",    }),  },};export default componentContent;

الصيغ المتاحة:

• TypeScript (.ts)
• وحدة ES (.esm)
• CommonJS (.cjs)
• JSON (.json)

تبويب Intlayer (شريط النشاط)

افتح تبويب Intlayer بالنقر على أيقونة Intlayer في شريط نشاط VS Code. يحتوي على عرضين:

• بحث: شريط بحث مباشر لتصفية القواميس ومحتواها بسرعة. الكتابة تحدث النتائج فورًا.
• القواميس: عرض شجري لبيئاتك/مشاريعك، مفاتيح القواميس، والملفات التي تساهم بالإدخالات. يمكنك:
  • النقر على ملف لفتحه في المحرر.
  • استخدام شريط الأدوات لتنفيذ الأوامر: بناء، سحب، دفع، تعبئة، تحديث، اختبار، وإنشاء ملف قاموس.
  • استخدام قائمة السياق لإجراءات محددة على العنصر:
    • على قاموس: سحب أو دفع
    • على ملف: تعبئة القاموس
  • عند تبديل المحررات، سيكشف العرض الشجري عن الملف المطابق إذا كان ينتمي إلى قاموس.

التثبيت

يمكنك تثبيت Intlayer مباشرة من سوق إضافات VS Code:

1. افتح VS Code.
2. اذهب إلى سوق الإضافات.
3. ابحث عن "Intlayer".
4. انقر على تثبيت.

الاستخدام

التنقل السريع

1. افتح مشروعًا يستخدم react-intlayer.

2. حدد مكالمة إلى useIntlayer()، مثل:

   tsx

   نسخ الكود

   نسخ الكود إلى الحافظة

   const content = useIntlayer("app");

3. انقر مع الضغط على الأمر (⌘+Click على macOS) أو Ctrl+Click (على Windows/Linux) على المفتاح (مثل "app").
4. سيفتح VS Code تلقائيًا ملف القاموس المقابل، مثل src/app.content.ts.

إدارة قواميس المحتوى

تبويب Intlayer (شريط النشاط)

استخدم التبويب الجانبي لتصفح وإدارة القواميس:

• افتح أيقونة Intlayer في شريط النشاط.
• في البحث، اكتب لتصفية القواميس والإدخالات في الوقت الحقيقي.
• في القواميس، تصفح البيئات والقواميس والملفات. استخدم شريط الأدوات للبناء، السحب، الدفع، الملء، التحديث، الاختبار، وإنشاء ملف القاموس. انقر بزر الماوس الأيمن للحصول على إجراءات السياق (السحب/الدفع على القواميس، الملء على الملفات). يتم الكشف تلقائيًا عن ملف المحرر الحالي في الشجرة عند الاقتضاء.

بناء القواميس

قم بإنشاء جميع ملفات محتوى القاموس باستخدام:

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

ابحث عن Build Dictionaries ونفذ الأمر.

دفع القواميس

قم بتحميل أحدث محتوى القاموس:

1. افتح لوحة الأوامر.
2. ابحث عن Push Dictionaries.
3. اختر القواميس التي تريد دفعها وقم بالتأكيد.

سحب القواميس

مزامنة أحدث محتوى القاموس:

1. افتح لوحة الأوامر.
2. ابحث عن Pull Dictionaries.
3. اختر القواميس التي تريد سحبها.

ملء القواميس

املأ القواميس بالمحتوى من مشروعك:

1. افتح لوحة الأوامر.
2. ابحث عن Fill Dictionaries.
3. نفذ الأمر لملء القواميس.

اختبار القواميس

تحقق من صحة القواميس واكتشف الترجمات المفقودة:

1. افتح لوحة الأوامر.
2. ابحث عن Test Dictionaries.
3. راجع المشكلات المبلغ عنها وقم بإصلاحها حسب الحاجة.

تاريخ الوثيقة