إعداد البيئة البرمجية

خصص محرر الكود الخاص بك لتحسين تجربة التطوير مع أسترو وفتح ميزات جديدة.

VS Code

قسم بعنوان VS Code

VS Code هو محرر شائع لمطوري الويب، من تطوير مايكروسوفت. المحرك الذي بُني عليه يُستخدم لتشغيل بعض محررات المتصفح الشائعة مثل GitHub Codespaces و Gitpod.

يعمل أسترو على أي محرر ولكنّا نوصي باستخدام VS Code لمشاريع أسترو. حيث لدينا إضافة رسمية Astro VS Code تفعل العديد من المزايا المهمة، وتحسن تجربة التطوير على مشاريع أسترو.

• تلوين الجمل البرمجية (syntax highlighting) لملفات .astro
• دعم أنواع بيانات لغة TypeScript في ملفات .astro
• اقتراحات VS Code لإكمال السطر، والتلميحات وغيرها.

للبدأ، ثبّت إضافة Astro VS Code الآن.

اطلع على كيفة إعداد TypeScript في مشاريع أسترو.

Zed

قسم بعنوان Zed

Zed هو محرر أكواد مفتوح المصدر أضاف دعم Astro في إصدار 0.123.2. يمكنك تثبيت إضافة Astro في نافذة الإضافات. تحتوي الإضافة علؤ ميزات مثل التلوين, التنسيق, والإكمال التلقائي للجمل البرمجية.

بيئات تطوير JetBrains

قسم بعنوان بيئات تطوير JetBrains

Webstorm هو بيئة تطوير متكاملة (IDE) للغة JavaScript و TypeScript قام بإضافة الدعم لخادم لغة Astro في الإصدار 2024.2. هذا التحديث يحضر معه ميزات مثل التلوين, التنسيق, والإكمال التلقائي للجمل البرمجية.

ثبت الإضافة الرسمية من JetBrains Marketplace أو بالبحث عن “Astro” في نافذة الإضافات. يمكنك تغيير خادم اللغة من Settings | Languages & Frameworks | TypeScript | Astro.

للمزيد من المعلومات عن دعم Astro في Webstorm, اطلع على المرجع الرسمي ل Webstorm Astro.

محررات برمجية أخرى

قسم بعنوان محررات برمجية أخرى

يقدم مجتمعنا المذهل عدة إضافات للمحررات الشهيرة الأخرى، بما في ذلك:

• VS Code Extension on Open VSX دعم رسمي - إضافة VS Code الرسمية التي تحدثنا عنها أعلاه، متوفرة أيضا على مستودع Open VSX للمحررات المبنية عليه مثل VSCodium
• Nova Extension دعم مجتمعي - يوفر تلوين الجمل البرمجية، وإكمال الجمل على محرر Nova
• Vim Plugin دعم مجتمعي - يوفر تلوين الجمل البرمجية، وطي الكود، ويدعم الـ indentation على محررات Vim و Neovim
• Neovim LSP و TreeSitter لـ Neovim دعم مجتمعي - يوفّر تلوين الجمل البرمجية، (treesitter parsing)، وتوفير دعم الإكمال التلقائي في محرر Neovim
• emacs - راجع تعليمات ل تكوين Emacs و Eglot دعم مجتمعي للعمل مع أسترو
• أسترو syntax highlighting ل Sublime Text دعم مجتمعي - حزمة أسترو Sublime Text, متاح على مستودع Sublime Text.

المحررات في المتصفح

قسم بعنوان المحررات في المتصفح

بالإضافة للمحررات المثبة على جهازك، أسترو يعمل بشكل جيد على المحررات السحابية (المحررات في المتصفح عمومًا)، ويشمل الدعم:

• StackBlitz و CodeSandbox - محررات سحابية تعمل من المتصفح، تدعم تلوين الجمل البرمجية لملفات .astro بدون إعداد ولا تحميل!
• GitHub.dev - يسمح بتثبيت إضافة Astro VS Code كملحق web، ليوفر بعض مزايا الإضافة، حاليًا يوفر تلوين الجمل البرمجية فقط.
• Gitpod - بيئة تطوير سحابية كاملة يمكنها تثبيت إضافة Astro VS Code الرسمية من OpenVSX.

أدوات أخرى

قسم بعنوان أدوات أخرى

ESLint

قسم بعنوان ESLint

ESLint أشهر أدوات اكتشاف الأخطاء في الشفرة البرمجية لـ JavaScript و JSX. يمكنك تثبيت ملحق يدعمه المجتمع لأسترو أيضًا.

راجع دليل المستخدم الخاص بهم لمعرفة المزيد حول تثبيت وإعداد ESLint لمشروعك.

Stylelint

قسم بعنوان Stylelint

Stylelint أداة اكتشاف اخطاء شهيرة لـ CSS. إعدادات خاصة بأسترو مدعومة من المجتمع.

يمكن العثور على تعليمات التثبيت والتكامل مع المحررات ومعلومات إضافية في ملف README الخاص بالمشروع.

Prettier

قسم بعنوان Prettier

Prettier هو منسق شائع لأكواد JavaScript ،HTML ،CSS وغيرها. إذا كنت تستخدم إضافة أسترو لـ VS Code أو إضافة أسترو للمحررات الأخرى، فستجدها تتضمن تنسيق الكود بـ Prettier.

لدعم تنسيق أكواد أسترو خارج المحرر (في CLI على سبيل المثال) أو على محررات لا ندعمها، فاستخدم ملحق أسترو الرسمي لـ Prettier.

1. ثبت prettier و prettier-plugin-astro.

   npm

   npm install --save-dev prettier prettier-plugin-astro

   pnpm

   pnpm add -D prettier prettier-plugin-astro

   Yarn

   yarn add --dev prettier prettier-plugin-astro

2. أنشئ ملف الإعدادات .prettierrc.mjs في المجلد الأساسي للمشروع وأضف له prettier-plugin-astro.

   في هذا الملف, يوجد أيضا إعداد يدوي لمحلل ملفات Astro.

   .prettierrc.mjs

   /** @type {import("prettier").Config} */
   export default {
     plugins: ['prettier-plugin-astro'],
     overrides: [
       {
         files: '*.astro',
         options: {
           parser: 'astro',
         },
       },
     ],
   };

3. قم بتشغيل الأمر prettier . --write في الجهاز الطرفي (terminal) لتنسيق ملفاتك.

   npm

   npx prettier . --write

   pnpm

   pnpm exec prettier . --write

   Yarn

   yarn prettier . --write

راجع ملف README لإضافة أسترو على Prettier لمزيد من المعلومات حول الخيارات المدعومة وكيفية إعداد Prettier داخل VS Code والمزيد.