تخطَّ إلى المحتوى

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

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

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

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

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

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

📚 انظر كيفة إعداد TypeScript في مشاريع أسترو.

وفرنا الدعم لأسترو على بيئة WebStorm منذ الإصدار 2023.1. يمكنك تحميل الملحق الرسمي من متجر JetBrains أو بالبحث عن “Astro” في تبويب الملحقات. تتضمن هذه الإضافة مزايا مثل تلوين الجمل البرمجية، وإكمال السطور البرمجية وتنسيقها، ونخطط لإضافة المزيد من المزايا المتقدمة مستقبلًا. كما إنها متاحة لبيئات JetBrains التي تدعم جافاسكربت.

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

  • 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 أشهر أدوات اكتشاف الأخطاء في الشفرة البرمجية لـ JavaScript و JSX. يمكنك تثبيت ملحق يدعمه المجتمع لأسترو أيضًا.

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

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

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

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

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

للبدأ، ثبّت Prettier أولًا، ثم ملحق أسترو على Prettier:

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

Prettier سوف يتعرف تلقائيًا على ملحق أسترو عند تشغيله:

Terminal window
prettier --write .

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

ساهم

بماذا تفكّر؟

المجتمع