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

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

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 (EN) في مشاريع أسترو.

بيئات تطوير JetBrains

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

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

بيئة Fleet IDE القادمة من JetBrains تأتي بدعم لملحقات اللغات التي نستخدمها (language server)، وستعمل مع ملحقات أسترو الرسمية.

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

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

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

• 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

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

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

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

• 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.

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

npm

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

pnpm

pnpm install -D prettier prettier-plugin-astro

Yarn

yarn add --dev prettier prettier-plugin-astro

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

prettier --write .

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

الاستخدام مع مدير الحزم pnpm

نظرًا لوجود إشكالية في Prettier ، فلن يتم اكتشاف ملحق أسترو تلقائيًا عند استخدام pnpm. من أجل العثور على الملحق، يجب إضافة الخيار التالي عند تشغيل Prettier:

prettier --write . --plugin=prettier-plugin-astro

استخدام Prettier في VS Code يحتاج بعض الإعداد الإضافي. راجع ملف README للملحق.