import PackageManagerTabs from '/components/tabs/PackageManagerTabs.astro' import { Steps } from '@astrojs/starlight/components'; import Badge from "/components/Badge.astro"

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

VS Code

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

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

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

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

import ReadMore from '~/components/ReadMore.astro';

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

Zed

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

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

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

Stylelint

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

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

Prettier

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

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

<PackageManagerTabs> <Fragment slot="npm"> ```shell npm install --save-dev prettier prettier-plugin-astro ``` </Fragment> <Fragment slot="pnpm"> ```shell pnpm add -D prettier prettier-plugin-astro ``` </Fragment> <Fragment slot="yarn"> ```shell yarn add --dev prettier prettier-plugin-astro ``` </Fragment> </PackageManagerTabs>

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

في هذا الملف, يوجد أيضا إعداد يدوي لمحلل ملفات Astro. ```js title=".prettierrc.mjs" /** @type {import("prettier").Config} */ export default { plugins: ['prettier-plugin-astro'], overrides: [ { files: '*.astro', options: { parser: 'astro', }, }, ], }; ```

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

<PackageManagerTabs> <Fragment slot="npm"> ```shell npx prettier . --write ``` </Fragment> <Fragment slot="pnpm"> ```shell pnpm exec prettier . --write ``` </Fragment> <Fragment slot="yarn"> ```shell yarn prettier . --write ``` </Fragment> </PackageManagerTabs>

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