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

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 कैसे सेट करें।

Zed

Zed एक ओपन-स्त्रोत कोड एडिटर है जिसने संस्करण 0.123.2 में Astro के लिए समर्थन जोड़ा गया है। आप Astro एक्सटेंशन को Zed के IDE एक्सटेंशन टैब में से इंस्टॉल कर सकते हैं। इस एक्सटेंशन में सिंटैक्स हाइलाइटिंग, कोड पूर्णता और फ़ॉर्मेटिंग जैसी सुविधाएं शामिल हैं।

JetBrains IDEs

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

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

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

  • 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 को कॉन्फ़िगर करने के निर्देश देखें
  • Sublime Text के लिए Astro सिंटैक्स हाइलाइटिंग - Sublime Text के लिए Astro पैकेज, Sublime Text पैकेज मैनेजर पर उपलब्ध है

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

स्थानीय एडिटर के अलावा, 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 प्लगइन इंस्टॉल करें।

<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 कमांड चलाएँ।

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

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

लेआउट
शुरुआत करना