إضافة لـ VS Code تحوّل واجهته إلى وضع من اليمين إلى اليسار (RTL)، مبنيّة على نظام استراتيجيات قابل للتوسّع يسهّل إضافة طرق جديدة لتطبيق RTL مستقبلًا.
| الاستراتيجية | آمنة؟ | الوصف |
|---|---|---|
webview (الافتراضيّة) |
✅ | تفتح سطح RTL أصليًّا داخل لوحة webview مدعومة رسميًّا، دون تعديل ملفّات تثبيت VS Code، وتصمد عبر التحديثات. اختياريًّا تُخفي الهيكل الأصليّ لتجربة أقرب إلى «واجهة بديلة». |
cssInjection |
تحقن CSS في ملفّ واجهة VS Code — تطبّق RTL على كامل واجهة العمل لكنّها تعدّل ملفّات التثبيت (تتطلّب صلاحيّة كتابة وإعادة تحميل، وقد يُلغيها التحديث). |
- تبديل وضع RTL بأمر واحد، أو بنقرة من مؤشّر شريط الحالة.
- استراتيجية افتراضيّة آمنة لا تمسّ ملفّات التثبيت.
- إخفاء الهيكل الأصليّ اختياريًّا (
hideNativeChrome) عبر إعدادات رسميّة قابلة للعكس. - إبقاء منطقة تحرير الشيفرة باتجاه LTR (اختياريّ) لتفادي قلب اتجاه الكود.
- نطاق قابل للضبط: واجهة العمل فقط أو كامل الواجهة.
- كشف الانحراف عند الإقلاع: إعادة فتح سطح webview تلقائيًّا، أو اقتراح إعادة تطبيق حقن CSS إن محاه تحديثُ VS Code.
- نسخة احتياطية للحالة الأصليّة قبل أوّل تعديل (في حقن CSS).
- بنية قابلة للتوسّع: أضف استراتيجيّتك دون لمس بقيّة الإضافة.
تُتاح من لوحة الأوامر (Ctrl+Shift+P):
| الأمر | الوصف |
|---|---|
RTL: تفعيل وضع اليمين-لليسار |
تطبيق RTL. |
RTL: تعطيل وضع اليمين-لليسار |
إزالة RTL. |
RTL: تبديل وضع اليمين-لليسار |
عكس الحالة الحالية. |
RTL: إعادة التطبيق |
يُستخدم بعد تحديث VS Code إن أُلغي الحقن. |
بعد التفعيل/التعطيل ستُطلب إعادة تحميل النافذة لتطبيق التغييرات.
| الإعداد | الافتراضيّ | الوصف |
|---|---|---|
vsCodeRtl.strategy |
webview |
استراتيجية التطبيق: webview (آمنة) أو cssInjection (متقدّمة). |
vsCodeRtl.hideNativeChrome |
false |
(webview) إخفاء شريط الأنشطة وشريط الحالة الأصليّين. |
vsCodeRtl.scope |
workbench |
نطاق RTL: workbench أو all. |
vsCodeRtl.keepEditorLtr |
true |
إبقاء المحرّر باتجاه LTR. |
webview (الافتراضيّة، آمنة): تفتح لوحة webview مدعومة رسميًّا يكون مستندها
<html dir="rtl">، وتندمج بصريًّا مع سمة المحرّر عبر متغيّرات VS Code. لا تعدّل أيّ
ملفّ تثبيت، فلا تحتاج صلاحيّات ولا تتأثّر بالتحديثات. أثرها لا يبقى بعد إعادة
التحميل، لذا تُعاد فتحها تلقائيًّا عند الإقلاع إن كانت النيّة مفعّلة.
cssInjection (متقدّمة): تحقن كتلة CSS مُعلَّمة في ملفّ واجهة العمل داخل تثبيت
VS Code. لذلك:
- تتطلّب صلاحيّة الكتابة على مجلّد التثبيت (قد تحتاج تشغيل VS Code كمسؤول).
- قد يُلغي تحديثُ VS Code الحقنَ، فيُعاد عبر أمر إعادة التطبيق.
src/
├── extension.ts # المدخل + تسجيل الاستراتيجيات + التوصيل
├── core/
│ ├── RtlStrategy.ts # واجهة التوسّع (Strategy)
│ ├── StrategyRegistry.ts # سجلّ الاستراتيجيات
│ ├── RtlState.ts # تجريد الحالة + أنواع الانحراف
│ └── RtlController.ts # المنسّق (تطبيق + حالة + كشف انحراف)
├── config/
│ └── Settings.ts # قراءة الإعدادات
├── state/
│ └── MementoState.ts # حفظ الحالة في globalState
├── ui/
│ ├── statusBarText.ts # محتوى المؤشّر (دالة نقيّة)
│ ├── StatusBar.ts # عنصر شريط الحالة
│ ├── webviewHtml.ts # توليد HTML سطح RTL (دالة نقيّة)
│ └── LayoutManager.ts # إخفاء/استعادة الهيكل الأصليّ
├── strategies/
│ ├── rtlCss.ts # توليد/إزالة CSS (دوال نقيّة)
│ ├── workbenchPaths.ts # تحديد ملفّ واجهة VS Code
│ ├── WebviewRtlStrategy.ts # سطح RTL داخل webview (آمنة، افتراضيّة)
│ └── CssInjectionStrategy.ts
└── test/
├── unit/ # اختبارات وحدة سريعة (32)
└── suite/ # اختبارات تكامل داخل VS Code
- أنشئ صنفًا يحقّق
RtlStrategyفيsrc/strategies/. - سجّله في
buildRegistry()ضمنsrc/extension.ts. - أضف معرّفه إلى قائمة
vsCodeRtl.strategyفيpackage.json.
npm install
npm run compile # ترجمة TypeScript
npm run lint # فحص اللينتر
npm run test:unit # اختبارات الوحدة (سريعة)
npm test # اختبارات التكامل داخل VS Code