एडिटर सेटअप

Astro डेवलपर अनुभव को बेहतर बनाने एवं नई सुविधाओं को आज़माने के लिए अपने कोड एडिटर को अनुकूलित करें।

VS Code

VS Code वेब डेवलपर्स के लिए Microsoft द्वारा निर्मित एक लोकप्रिय कोड एडिटर है। VS Code इंजन GitHub Codespaces एवं Gitpod जैसे लोकप्रिय इन-ब्राउज़र कोड एडिटर को शक्ति प्रदान करता है।

Astro किसी भी कोड एडिटर के साथ काम करता है। हालाँकि, Astro परियोजनाओं के लिए VS Code हमारा अनुशंसित एडिटर है। हम एक आधिकारिक Astro VS Code एक्सटेंशन संभालके रखते हैं जो Astro परियोजनाओं के लिए कई प्रमुख विशेषताओं एवं डेवलपर अनुभव सुधारों को अनलॉक करता है।

• .astro फ़ाइलों के लिए सिंटैक्स हाइलाइटिंग।
• .astro फ़ाइलों के लिए Typescript प्रकार की जानकारी।
• कोड पूर्णता, संकेत एवं अधिक के लिए VS Code Intellisense।

आरंभ करने के लिए, आज ही Astro VS Code एक्सटेंशन इंस्टॉल करें।

📚 देखें कि अपने Astro परियोजना में Typescript कैसे सेट (EN) करें।

JetBrains IDEs

Astro के लिए प्रारंभिक समर्थन WebStorm 2023.1 में आया। आप JetBrains Marketplace के माध्यम से या IDE के प्लगइन्स टैब में “Astro” खोजकर आधिकारिक प्लगइन इंस्टॉल कर सकते हैं। इस प्लगइन में सिंटैक्स हाइलाइटिंग, कोड पूर्णता एवं फ़ॉर्मेटिंग जैसी सुविधाएं शामिल हैं, एवं भविष्य में और भी उन्नत सुविधाएं जोड़ने की योजना है। यह JavaScript समर्थन के साथ अन्य सभी JetBrains IDE के लिए भी उपलब्ध है।

JetBrains की आगामी Fleet IDE में भाषा सर्वर समर्थन शामिल है एवं यह आधिकारिक Astro टूलिंग का उपयोग करने में सक्षम होगा।

अन्य कोड एडिटर

हमारा अद्भुत समुदाय अन्य लोकप्रिय एडिटर के लिए कई एक्सटेंशन बनाए रखती है, जिनमें शामिल हैं:

• VS Code Extension on Open VSX अधिकारी - आधिकारिक Astro VS Code एक्सटेंशन, VSCodium जैसे ओपन प्लेटफार्मों के लिए ओपन VSX रजिस्ट्री पर उपलब्ध है।
• Nova Extension समुदाय - Nova के अंदर Astro के लिए सिंटैक्स हाइलाइटिंग एवं कोड पूर्णता प्रदान करता है
• Vim प्लगइन समुदाय - Vim या Neovim के अंदर Astro के लिए सिंटैक्स हाइलाइटिंग, इंडेंटेशन एवं कोड फोल्डिंग समर्थन प्रदान करता है
• Neovim LSP एवं TreeSitter प्लगइन समुदाय - Neovim के अंदर Astro के लिए सिंटैक्स हाइलाइटिंग, TreeSitter पार्सिंग एवं कोड पूर्णता प्रदान करता है
• Emacs समुदाय - Astro के साथ काम करने के लिए Emacs एवं Eglot को कॉन्फ़िगर करने के निर्देश देखें

इन-ब्राउज़र एडिटर

स्थानीय एडिटर के अलावा, Astro ब्राउज़र में होस्ट किए गए एडिटर पर भी अच्छा चलता है, जिनमें शामिल हैं:

• StackBlitz एवं CodeSandbox - ऑनलाइन एडिटर जो आपके ब्राउज़र में चल सकते हैं, .astro फ़ाइलों के लिए अंतर्निहित सिंटैक्स हाइलाइटिंग समर्थन के साथ। किसी इंस्टालेशन या कॉन्फ़िगरेशन की आवश्यकता नहीं!
• GitHub.dev - आपको Astro VS Code एक्सटेंशन को एक वेब एक्सटेंशन के रूप में इंस्टॉल करने की अनुमति देता है, जो आपको केवल कुछ पूर्ण एक्सटेंशन सुविधाओं तक पहुंच प्रदान करता है। वर्तमान में, केवल सिंटैक्स हाइलाइटिंग समर्थित है।
• Gitpod - क्लाउड में एक पूर्ण विकास वातावरण जो ओपन VSX से आधिकारिक Astro VS Code एक्सटेंशन इंस्टॉल कर सकता है।

अन्य उपकरण

ESLint

ESLint JavaScript एवं JSX के लिए एक लोकप्रिय लिंटर है। Astro समर्थन के लिए, एक समुदाय अनुरक्षित प्लगइन इंस्टॉल किया जा सकता है।

अपने परियोजना के लिए ESLint को कैसे इंस्टॉल एवं सेटअप करें, इसके बारे में अधिक जानकारी के लिए परियोजना की उपयोगकर्ता मार्गदर्शिका पढ़े।

Stylelint

Stylelint एक लोकप्रिय लिंटर है CSS के लिए। एक समुदाय द्वारा अनुरक्षित स्टाइललिंट कॉन्फ़िगरेशन Astro समर्थन प्रदान करता है।

इंस्टॉलेशन निर्देश, संपादक एकीकरण एवं अतिरिक्त जानकारी परियोजना के README में पाई जा सकती है।

Prettier

Prettier JavaScript, HTML, CSS और अन्य के लिए एक लोकप्रिय फ़ॉर्मेटर है। यदि आप Astro VS Code एक्सटेंशन या किसी अन्य एडिटर के भीतर Astro भाषा सर्वर का उपयोग कर रहे हैं, तो Prettier के साथ कोड फ़ॉर्मेटिंग शामिल है।

एडिटर के बाहर (उदाहरण के लिए CLI) या एडिटर के अंदर जो हमारे एडिटर टूलींग का समर्थन नहीं करते हैं, .astro फ़ाइलों को फ़ॉर्मेट करने के लिए समर्थन जोड़ने के लिए, आधिकारिक Astro Prettier प्लगइन इंस्टॉल करें।

आरंभ करने के लिए, पहले Prettier और उसका प्लगइन इंस्टॉल करें:

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

Prettier स्वचालित रूप से प्लगइन का पता लगाएगा और जब आप इसे चलाएंगे तो .astro फ़ाइलों को संसाधित करने के लिए इसका उपयोग करेंगे:

prettier --write .

इसके समर्थित विकल्पों, VS Code के अंदर Prettier कैसे सेट करें, आदि के बारे में अधिक जानकारी के लिए Prettier प्लगइन का README देखें।

pnpm का प्रयोग

Prettier के अंदर अपस्ट्रीम समस्याओं के कारण, pnpm का उपयोग करते समय प्लगइन का स्वचालित रूप से पता नहीं लगाया जाएगा। इसे प्लगइन खोजने में सक्षम बनाने के लिए, Prettier चलाते समय निम्नलिखित पैरामीटर को जोड़ने की आवश्यकता है:

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

VS Code के अंदर Prettier का उपयोग करते समय अतिरिक्त सेटिंग्स की भी आवश्यकता होती है। अधिक जानकारी के लिए प्लगइन का README पढ़े।