VS Code इंटीग्रेशन
📚 सीरीज़ नेविगेशन: पिछला लेख 07 पहला इस्तेमाल आपको टर्मिनल में पहला उदाहरण चलाने के बारे में बताता है। यह लेख Claude Code को VS Code में लाता है - वही क्षमताएं, बस एक ग्राफिकल इंटरफेस (GUI) के साथ।
जब मैं पहली बार VS Code एक्सटेंशन का इस्तेमाल करने गया, तो एक बहुत बेवकूफी भरी गलती करना काफी आसान था।
Claude Code टर्मिनल में अच्छे से चल रहा था, और एक्सटेंशन इंस्टॉल करने के बाद मैं ग्राफिकल इंटरफेस आज़माना चाहता था। मैंने एक खाली फोल्डर खोला और हर जगह आधिकारिक तौर पर बताए गए "Spark आइकन" (टूलबार में स्पार्क के आकार का आइकन, जो IDE में Claude Code का प्रवेश बिंदु है) को ढूंढने लगा, लेकिन वो कहीं नहीं मिला। उस समय यह सोचना आसान है कि इंस्टॉलेशन में कुछ गड़बड़ हो गई है। मैंने अनइंस्टॉल करके फिर से इंस्टॉल किया, रीस्टार्ट किया, कैश क्लियर किया और करीब बीस मिनट तक परेशान रहा। अंत में डॉक्यूमेंटेशन देखने पर पता चला — वह आइकन तभी दिखाई देता है जब आपने कोई विशिष्ट फाइल खोली हो, केवल एक फोल्डर खोलना काफी नहीं है। एक खाली वर्कस्पेस में आइकन ढूंढते रह जाएंगे, पर वह कभी नहीं मिलेगा।
साफ शब्दों में कहें तो, VS Code इंटीग्रेशन मुश्किल नहीं है, लेकिन यह टर्मिनल से अलग एक इंटरैक्शन लॉजिक है, और कुछ "पूर्वानुमान" आपको शुरुआत में ही अटका सकते हैं। यह लेख इन समस्याओं को पहले ही आपके लिए चिह्नित करेगा।
इस लेख को पढ़ने के बाद, आपको मिलेगा:
- VS Code (जिसमें Cursor जैसे फोर्क भी शामिल हैं) में Claude Code एक्सटेंशन इंस्टॉल करने के पूरे स्टेप्स, साथ ही "आइकन नहीं मिल रहा" की समस्या सुलझाने की चेकलिस्ट।
- साइड-बाय-साइड diff (बदलावों का लाइन-बाय-लाइन रिव्यू),
@मेंशन, और प्लान रिव्यू—इन तीन बेहतरीन GUI फीचर्स का उपयोग कैसे करें। - "एक्सटेंशन बनाम CLI कौन सा इस्तेमाल करें" की एक तुलना तालिका, साथ ही सामान्य शॉर्टकट कुंजियों का एक सेट।
01 सबसे पहले समझें: एक्सटेंशन और CLI का क्या संबंध है
"मुझे पहले से ही टर्मिनल में claude का उपयोग करना आता है, तो क्या मुझे अभी भी एक्सटेंशन इंस्टॉल करना चाहिए?" पहले निष्कर्ष बताते हैं: एक्सटेंशन CLI का विकल्प नहीं है, बल्कि यह उसके ऊपर ग्राफिकल इंटरफेस की एक परत है। जब आप एक्सटेंशन इंस्टॉल करते हैं, तो यह CLI को भी अपने साथ लाता है, और दोनों एक ही ~/.claude/settings.json कॉन्फ़िगरेशन साझा करते हैं; बातचीत का इतिहास (history) बहाल किया जा सकता है, लेकिन यह रीयल-टाइम में सिंक नहीं होता—यदि आप एक्सटेंशन में बीच में ही बात छोड़ देते हैं, तो आप टर्मिनल में claude --resume चलाकर उस बातचीत को फिर से शुरू कर सकते हैं।
सादृश्य (Analogy): एक ही रसोई, दो ऑर्डरिंग विंडो। CLI रसोई की खिड़की पर जाकर चिल्लाने जैसा है—तेज़, पूरा, आप कुछ भी ऑर्डर कर सकते हैं; एक्सटेंशन लॉबी के वेटर की तरह है, जो मेनू को चित्रों और टेक्स्ट के साथ आकर्षक बनाता है और ऑर्डर की स्थिति को अधिक स्पष्ट रूप से दिखाता है, लेकिन कुछ "छिपे हुए मेनू" हैं जिन्हें केवल खिड़की पर जाकर ही ऑर्डर किया जा सकता है। रसोई एक ही है, और खाना बिल्कुल वैसा ही है।
आपको कब किसका उपयोग करना चाहिए? आधिकारिक तौर पर क्षमताओं की एक तुलना दी गई है, जिसे नीचे संक्षेप में दिया गया है:
| फीचर | CLI (टर्मिनल) | VS Code एक्सटेंशन |
|---|---|---|
| कमांड्स और skills | सभी | सबसेट (/ टाइप करके उपलब्ध विकल्प देखें) |
| MCP server कॉन्फ़िगरेशन | पूरा | आंशिक (CLI का उपयोग करके जोड़ें, पैनल में /mcp का उपयोग करके प्रबंधित करें) |
| Checkpoints (चेकप्वाइंट) | समर्थित | समर्थित |
! bash शॉर्टकट | समर्थित | समर्थित नहीं |
| Tab कम्प्लीशन | समर्थित | समर्थित नहीं |
| साइड-बाय-साइड diff, सेलेक्टेड कोड ही कॉन्टेक्स्ट है | IDE से कनेक्शन की आवश्यकता | नेटिव, इस्तेमाल के लिए तैयार |
एक वाक्य में: कोड लिखने और बदलावों को रिव्यू करने जैसे "फाइलों से निपटने वाले" कामों के लिए एक्सटेंशन स्पष्ट रूप से बेहतर है; !ls जैसे bash शॉर्टकट और Tab कम्प्लीशन केवल CLI में उपलब्ध हैं। सामान्य तरीका यह है कि मुख्य रूप से एक्सटेंशन का उपयोग करें, और जब आपको बैच में कमांड चलानी हो या एक्सटेंशन में उपलब्ध न होने वाले कमांड का उपयोग करना हो, तो बस इंटीग्रेटेड टर्मिनल में claude टाइप करें—इतिहास साझा होता है और आप बिना किसी परेशानी के स्विच कर सकते हैं।
💡 एक वाक्य में सारांश: एक्सटेंशन और CLI एक ही इंजन के दो चेहरे हैं, वे इतिहास और कॉन्फ़िगरेशन साझा करते हैं, आप हाथ में मौजूद काम के अनुसार किसी भी समय स्विच कर सकते हैं, दोनों में से एक को चुनने की आवश्यकता नहीं है।
02 इंस्टॉलेशन: तीन तरीके, और आइकन न मिलने पर समस्या निवारण
इंस्टॉल करने से पहले वर्जन जांचें
आधिकारिक आवश्यकता: VS Code 1.98.0 या उच्चतर संस्करण, यदि संस्करण इससे कम है तो यह इंस्टॉल या काम नहीं करेगा (संस्करण नंबर देखने के लिए "Help → About" पर क्लिक करें)। जब आप पहली बार एक्सटेंशन खोलेंगे तो यह आपको Anthropic खाते में लॉग इन करने के लिए कहेगा; Bedrock, Vertex AI जैसे तृतीय-पक्ष प्रदाताओं (third-party providers) का उपयोग करने वाली कंपनियों के लिए कॉन्फ़िगरेशन का तरीका अलग है, जिसका उल्लेख अंत में अलग से किया गया है।
इंस्टॉलेशन के तीन तरीके
तरीका 1: मार्केटप्लेस में सर्च करें (सबसे स्थिर, शुरुआती लोगों के लिए अनुशंसित)
VS Code में, एक्सटेंशन व्यू खोलने के लिए Cmd+Shift+X (Mac) या Ctrl+Shift+X (Windows/Linux) दबाएं, Claude Code खोजें, और Install पर क्लिक करें।
ऊपर दी गई छवि दिखाती है कि एक्सटेंशन व्यू में Claude Code खोजने पर कैसा दिखता है: लाल बॉक्स में "Claude Code for VS Code" और नीले टिक के साथ प्रकाशक Anthropic ही आधिकारिक है, इसे पहचानें और इंस्टॉल करने के लिए क्लिक करें।
यहां एक सबसे आम गलती है जो शुरुआती लोग करते हैं: Claude Code खोजने पर समान नाम वाले कई एक्सटेंशन दिखाई देंगे, सुनिश्चित करें कि आप Anthropic द्वारा प्रकाशित एक्सटेंशन ही इंस्टॉल कर रहे हैं, किसी भी थर्ड-पार्टी नकली को नहीं।
तरीका 2: सीधे इंस्टॉल करने के लिए लिंक पर क्लिक करें
जब VS Code खुला हो, तो लिंक vscode:extension/anthropic.claude-code पर क्लिक करने से आप सीधे एक्सटेंशन इंस्टॉलेशन पेज पर पहुंच जाएंगे (Cursor vscode: को cursor: से बदल देता है)।
तरीका 3: नॉन-मेनस्ट्रीम एडिटर / जब इंस्टॉल न हो रहा हो
एक्सटेंशन को VS Code के अन्य फोर्क्स (Cursor, Devin Desktop, Kiro आदि) में भी इंस्टॉल किया जा सकता है—उनके एक्सटेंशन व्यू में Claude Code खोजें, या इसे Open VSX रजिस्ट्री से इंस्टॉल करें। यदि यह बिल्कुल भी इंस्टॉल नहीं हो रहा है, तो परेशान न हों, आधिकारिक बैकअप समाधान इंटीग्रेटेड टर्मिनल में सीधे claude चलाना है।
चीनी उपयोगकर्ताओं के लिए संकेत: इंस्टॉलेशन, लॉगिन ऑथराइजेशन और बाद में Claude को काम करने देने के लिए Anthropic सेवाओं से जुड़ना आवश्यक है, पूरी प्रक्रिया के दौरान टर्मिनल संस्करण की तरह ही वीपीएन (मैजिक नेटवर्क) की आवश्यकता होती है।
इंस्टॉल करने के बाद आइकन नहीं मिल रहा? इस चेकलिस्ट का उपयोग करें
यही वह समस्या जिसका जिक्र शुरुआत में किया गया था। इंस्टॉलेशन के बाद, एक्सटेंशन डिफ़ॉल्ट रूप से पॉप अप नहीं होता है, आपको पैनल को खुद ही सामने लाना होगा। सबसे तेज़ तरीका: पहले कोई विशिष्ट फाइल खोलें, फिर एडिटर के ऊपरी दाएं कोने में टूलबार में Spark आइकन पर क्लिक करें (एक छोटा आइकन जो स्पार्क जैसा दिखता है)।
ऊपर दी गई छवि तीनों प्रवेश स्थानों को दिखाती है: एडिटर के ऊपरी दाएं कोने में Spark आइकन (②, सबसे तेज़ लेकिन केवल तभी दिखाई देता है जब कोई फाइल खुली हो), एक्टिविटी बार में Spark (①, हमेशा मौजूद), और स्टेटस बार में ✱ Claude Code (③, बिना फाइल खोले भी क्लिक किया जा सकता है)।
मुख्य बात यह है: Spark आइकन केवल तभी दिखाई देता है जब आपने कोई फाइल खोली हो, केवल फोल्डर खोलना काफी नहीं है। यदि आपको अभी भी यह नहीं दिखाई देता है, तो इस आधिकारिक क्रम में जांच करें:
| लक्षण | समस्या निवारण क्रिया |
|---|---|
| एडिटर के ऊपरी दाएं कोने में कोई आइकन नहीं है | पहले एक फाइल खोलें (केवल फोल्डर नहीं) |
| फाइल खोलने के बाद भी नहीं है | सुनिश्चित करें कि VS Code ≥ 1.98.0 है (Help → About) |
| संस्करण भी सही है | विंडो को रीलोड करने के लिए कमांड पैलेट में Developer: Reload Window चलाएं |
| रीलोड करने से भी काम नहीं बना | अन्य AI एक्सटेंशन (Cline, Continue आदि) को अस्थायी रूप से डिसेबल करें, कॉन्फ्लिक्ट हो सकता है |
| वर्कस्पेस "Restricted Mode" में है | एक्सटेंशन प्रतिबंधित मोड में काम नहीं करता है, वर्कस्पेस पर भरोसा करने (trust) की आवश्यकता है |
यदि आप वास्तव में Spark आइकन नहीं ढूंढ पा रहे हैं, तो दो वैकल्पिक प्रवेश बिंदु (entry points) हैं:
- एक्टिविटी बार (बाईं ओर वर्टिकल आइकन) में Spark आइकन—यह हमेशा मौजूद रहता है, इस पर क्लिक करने से कन्वर्सेशन लिस्ट खुल जाती है।
- स्टेटस बार (विंडो के निचले दाएं कोने में) में ✱ Claude Code—बिना फाइल खोले भी इस पर क्लिक किया जा सकता है, यह आमतौर पर उपयोग करने में अधिक सुविधाजनक है, इसलिए आपको यह चिंता करने की आवश्यकता नहीं है कि कोई फाइल खुली है या नहीं। आप कमांड पैलेट (
Cmd+Shift+P/Ctrl+Shift+P) के माध्यम से भी जा सकते हैं औरClaude Codeटाइप कर सकते हैं।
जब आप पहली बार पैनल खोलते हैं, तो एक लॉगिन स्क्रीन दिखाई देगी। लॉगिन पर क्लिक करें और ब्राउज़र में ऑथराइजेशन पूरा करें। (यदि आपने ANTHROPIC_API_KEY सेट किया है लेकिन फिर भी आपको लॉग इन करने के लिए कहा जाता है, तो इसकी सबसे अधिक संभावना है कि VS Code को टर्मिनल के पर्यावरण चर (environment variables) विरासत में नहीं मिले हैं, आधिकारिक उपाय यह है कि चर को लाने के लिए टर्मिनल से code . का उपयोग करके VS Code शुरू करें।)
💡 एक वाक्य में सारांश: सुनिश्चित करें कि आप Anthropic प्रकाशक द्वारा एक्सटेंशन इंस्टॉल कर रहे हैं, Spark आइकन तभी दिखाई देता है जब कोई फाइल खुली हो—यदि आप इसे नहीं ढूंढ पा रहे हैं, तो पहले एक फाइल खोलें, या निचले दाएं कोने में स्टेटस बार में प्रवेश बिंदु का उपयोग करें।
03 diff व्यू: बदलावों का आमने-सामने मिलान, देखकर ही सहमति दें
यही वह फीचर है जिसने शुरुआत में कई लोगों को एक्सटेंशन का दीवाना बना दिया। टर्मिनल संस्करण में फाइलों को बदलते समय, diff को टेक्स्ट सिंबल के साथ दिखाया जाता है, और जब फाइल बड़ी होती है और कई बदलाव होते हैं तो इसे पढ़ना मुश्किल हो जाता है। एक्सटेंशन इस काम को VS Code के नेटिव diff व्यू में लाता है—लाल और हरे रंग में बदलावों (जोड़े और हटाए गए) को हाइलाइट करता है, ठीक वैसे ही जैसे आप आमतौर पर Git diff देखते हैं।
सादृश्य (Analogy): कॉन्ट्रैक्ट पर हस्ताक्षर करने से पहले "रिविजन मोड" तुलना। दूसरी पार्टी संशोधित कॉन्ट्रैक्ट वापस भेजती है, बाईं ओर मूल ड्राफ्ट और दाईं ओर संशोधित संस्करण, प्रत्येक जोड़ और हटाव स्पष्ट रूप से चिह्नित होता है—आप आंख बंद करके हस्ताक्षर नहीं करते हैं, आप हस्ताक्षर करने से पहले हर लाइन की जांच करते हैं। Claude के कोड बदलने पर भी ऐसा ही होता है, यह आपके सामने बदलाव रखता है और अनुमति मांगता है, और आपके पास तीन विकल्प होते हैं: स्वीकार करें, अस्वीकार करें, या सीधे इसे बताएं कि इसे कैसा दिखना चाहिए।
एक और विवरण है जिसे अनदेखा करना आसान है और जिसका उपयोग कुछ समय तक करने के बाद ही पता चलता है: स्वीकार करने से पहले, आप diff व्यू में Claude के सुझावों को सीधे मैन्युअल रूप से बदल सकते हैं। जब आप इसे बदलते हैं, तो उसे पता चल जाएगा कि "आपने इसे बदला है" और वह पुराने संस्करण के साथ आगे नहीं बढ़ेगा। उदाहरण के लिए, मान लें कि आप इसे 200 से अधिक लाइनों के फ़ंक्शन को रीफ़ैक्टर करने के लिए कहते हैं, और यह एक बार में सात या आठ बदलाव करता है। यदि आप diff में देखते हैं कि एक जगह बाउंड्री कंडीशन उल्टी लिखी गई है, तो आप इसे दाईं ओर तुरंत सही करके फिर स्वीकार कर सकते हैं, इससे एक राउंड ट्रिप बच जाती है।
💡 एक वाक्य में सारांश: diff व्यू हर बदलाव को आपके सामने रखता है, आप इसे स्पष्ट रूप से देख सकते हैं, इसे मौके पर ही बदल सकते हैं, और फिर तय कर सकते हैं कि इसे स्वीकार करना है या नहीं, यह टर्मिनल के टेक्स्ट diff की तुलना में बहुत अधिक सुरक्षित है।
04 @ मेंशन और सेलेक्टेड कोड: कॉन्टेक्स्ट को सटीक रूप से फीड करना
Claude से काम करवाते समय सबसे बड़ी बर्बादी तब होती है जब वह "यह नहीं जानता कि आप किस कोड के बारे में बात कर रहे हैं" और अनुमान लगाने में गोल-गोल घूमता है। एक्सटेंशन में कॉन्टेक्स्ट को जल्दी और सटीक रूप से फीड करने की दो तरकीबें हैं।
पहली तरकीब: @ फ़ाइल / फ़ोल्डर को मेंशन करना
प्रॉम्प्ट बॉक्स में @ टाइप करें, उसके बाद फ़ाइल का नाम या फ़ोल्डर का नाम लिखें, और Claude उस सामग्री को पढ़ेगा। यह फ़ज़ी मैचिंग (fuzzy matching) का समर्थन करता है, इसलिए आपको पूरा नाम टाइप करने की आवश्यकता नहीं है:
> कृपया @auth के लॉजिक को समझाएं (यह स्वचालित रूप से auth.js, AuthService.ts आदि से मेल खाएगा)
> @src/components/ में क्या है? (फ़ोल्डर के अंत में स्लैश / जोड़ना याद रखें)सादृश्य (Analogy): मीटिंग से पहले ग्रुप में सामग्री डालना। "वह लॉगिन से संबंधित फ़ाइल" का मौखिक रूप से वर्णन करने के बजाय, सीधे @ का उपयोग करके फ़ाइल को उसे सौंपना बेहतर है, ताकि उसे पूरे प्रोजेक्ट में खोजना न पड़े और गलती न हो। बहुत बड़े PDF के लिए, आप इसे केवल निर्दिष्ट पृष्ठों (जैसे पृष्ठ 1-10) को पढ़ने के लिए कह सकते हैं, पूरी किताब पढ़ने की आवश्यकता नहीं है।
दूसरी तरकीब: कोड सेलेक्ट करें, यह अपने आप देख लेगा
यह तरकीब @ से भी आसान है: एडिटर में बस कोड के एक हिस्से को सेलेक्ट करें, और Claude इसे अपने आप देख लेगा। प्रॉम्प्ट बॉक्स के नीचे "XX लाइन्स सेलेक्टेड" दिखाई देगा। आप सीधे पूछ सकते हैं "इस हिस्से में एरर क्यों आ रही है", और इसे पता चल जाएगा कि आप किस हिस्से की बात कर रहे हैं।
कुछ सामान्य सहायक तकनीकें:
- लाइन नंबर के साथ रेफरेंस इन्सर्ट करें:
@app.ts#5-10की तरह पथ (path) और लाइन नंबर के साथ मेंशन को स्वचालित रूप से सम्मिलित करने के लिएOption+K/Alt+Kदबाएं (एडिटर का फोकस होना चाहिए)। - अस्थायी रूप से इसे सेलेक्शन देखने से रोकें: टॉगल करने के लिए प्रॉम्प्ट बॉक्स के नीचे "सेलेक्शन इंडिकेटर" पर क्लिक करें, यदि आपको "स्लैश वाली आंख" वाला आइकन दिखाई देता है, तो इसका मतलब है कि यह हिस्सा Claude से छिपा हुआ है—सेलेक्शन केवल तभी उपयोगी होता है जब आप कॉपी करना चाहते हैं।
- फ़ाइलों को अटैचमेंट के रूप में ड्रैग करें: फ़ाइल को प्रॉम्प्ट बॉक्स में खींचते समय
Shiftदबाकर रखें; इसे हटाने के लिए अटैचमेंट पर×पर क्लिक करें।
उदाहरण के लिए, स्टाइलिंग बग का निवारण करते समय, CSS को पाँच या छह परतों में नेस्ट किया गया है। सीधे उस संदिग्ध नियम को चुनें और पूछें "यह यहाँ काम क्यों नहीं काम कर रहा है", यह दो राउंड में पता लगा लेगा कि मूल (parent) तत्व के overflow: hidden ने चाइल्ड तत्व को काट दिया है—अगर आप शब्दों में नेस्टिंग का वर्णन करते हैं, तो इसमें काफी समय लगेगा।
⚠️ चयनित टेक्स्ट और वर्तमान में खुली फ़ाइल डिफ़ॉल्ट रूप से आपके प्रॉम्प्ट के साथ Claude को भेजी जाएगी।
.envजैसी संवेदनशील फ़ाइलों के लिए, आधिकारिक तौर पर पथ में एकReadअस्वीकार नियम जोड़ने की सिफारिश की जाती है, ताकि मैच होने पर यह Claude तक न पहुंचे (आधिकारिक डॉक्यूमेंटेशन देखें)।
💡 एक वाक्य में सारांश:
@मेंशन फ़ाइलों को फीड करता है, सेलेक्टेड कोड स्वचालित रूप से कॉन्टेक्स्ट फीड करता है—"आप किस हिस्से की बात कर रहे हैं" के अनुमान लगाने की सबसे बड़ी लागत को सीधे समाप्त कर देता है।
05 प्लान रिव्यू: इसे पहले प्लान देने दें, आपके अप्रूवल के बाद यह काम करेगा
यह खंड शायद वह जगह है जहाँ टर्मिनल की तुलना में एक्सटेंशन का अनुभव सबसे अधिक बेहतर होता है। आइए सबसे पहले अनुमति मोड (permission modes) के बारे में बात करते हैं: प्रॉम्प्ट बॉक्स के नीचे मोड इंडिकेटर पर क्लिक करके आप स्विच कर सकते हैं, Claude Code में ये मोड होते हैं:
| मोड | Claude का व्यवहार | कब उपयोग करें |
|---|---|---|
| Normal Mode (सामान्य मोड) (डिफ़ॉल्ट) | हर ऑपरेशन से पहले यह आपसे पूछेगा कि क्या आप सहमत हैं | अपरिचित कार्य, जब आप पूरी प्रक्रिया को नियंत्रित करना चाहते हैं |
| Plan Mode (योजना मोड) | यह पहले वर्णन करेगा कि यह क्या करने की योजना बना रहा है, और आपके अप्रूवल का इंतजार करेगा | बड़े बदलाव, कई फ़ाइलें, जब आप पहले प्लान देखना चाहते हैं |
| Auto-Accept Mode (स्वत: स्वीकार मोड) | सीधे बदलाव करेगा, अब एक-एक करके नहीं पूछेगा | छोटे बैच के दोहराए जाने वाले बदलाव जिन पर आप भरोसा करते हैं |
एक चौथा मोड
bypassPermissions(सभी अनुमति जांचों को बायपास करें) भी है, जिसे सेटिंग्स मेंallowDangerouslySkipPermissionsचालू करने की आवश्यकता होती है। यह केवल पूरी तरह से पृथक सैंडबॉक्स वातावरण के लिए लागू है और रोजमर्रा के उपयोग के लिए अनुशंसित नहीं है।
सादृश्य (Analogy): क्या इंटर्न काम करने से पहले आपसे पूछता है। सामान्य मोड "हर कदम से पहले हाथ उठाना और पूछना" है, स्वत: स्वीकार मोड "उसे काम करने देना" है—लेकिन योजना मोड सबसे खास है, यह ऐसा है जैसे इंटर्न पहले आपको "मैं ऐसा करने की योजना बना रहा हूं" की एक कॉपी देता है, और आप तभी हां कहते हैं जब आप सहमत हों।
योजना मोड में VS Code में एक ऐसा ट्रीटमेंट है जो टर्मिनल नहीं दे सकता: Claude स्वचालित रूप से योजना को एक संपूर्ण Markdown दस्तावेज़ के रूप में खोलेगा, जिस पर आप इनलाइन एनोटेशन (टिप्पणियां) जोड़ सकते हैं। आपको बस यह कहने की ज़रूरत नहीं है कि "दूसरा चरण गलत है", बल्कि आप सीधे "चरण 2" लाइन के बगल में लिख सकते हैं "यहाँ डेटाबेस को मत छुओ, पहले कैश जोड़ो", और काम शुरू करने से पहले वह आपकी राय को शामिल कर लेगा—जो मौखिक रूप से दोबारा काम करवाने की तुलना में बहुत अधिक सटीक है।
ऊपर दी गई छवि योजना मोड में खोले गए Markdown योजना दस्तावेज़ को दिखाती है: Claude हर चरण को सूचीबद्ध करता है, और आप "चरण 2" लाइन के बगल में इनलाइन एनोटेशन ("डेटाबेस को मत छुओ, पहले मेमोरी कैश जोड़ो") लिखते हैं, और वह काम शुरू करने को मंजूरी देने से पहले इस राय को शामिल कर लेगा।
क्या आप इसे डिफ़ॉल्ट बनाना चाहते हैं? सेटिंग्स में claudeCode.initialPermissionMode को plan में बदलें। एक सुरक्षित आदत यह है कि किसी भी "मल्टी-फ़ाइल, 50 लाइन से अधिक" के बदलाव के लिए, पहले योजना मोड पर स्विच करें। यहाँ एक सामान्य सबक है: यदि आप आलसी हैं और पूरी प्रक्रिया के दौरान स्वत: स्वीकार (auto-accept) को चालू रखते हैं, और इसे मॉड्यूल में लॉग जोड़ने के लिए कहते हैं, तो यह कई फ़ाइलों के आयात क्रम (import order) को "अनुकूलित" (optimize) कर सकता है, और बाद में आपको यह पता लगाने में दस मिनट लगेंगे कि इसने किन हिस्सों को बदला है। बड़े बदलावों के लिए हमेशा पहले योजना देखें, योजना चरण में ही इसे सीमित करें, यह बाद में सफाई करने से कहीं अधिक साफ-सुथरा है।
💡 एक वाक्य में सारांश: योजना मोड = कार्य करने से पहले योजना देखें, और Markdown योजना में एक-एक करके टिप्पणियां भी जोड़ें—मल्टी-फ़ाइल वाले बड़े बदलावों से पहले इसे चालू करें, यह दोबारा काम करने की परेशानी को बहुत कम कर देगा।
06 व्यावहारिक सत्र: 10 मिनट में GUI की पूरी प्रक्रिया को समझना
नीचे हम शून्य से शुरू करके पूरी प्रक्रिया से गुजरेंगे, प्रत्येक चरण बताता है कि "आपको क्या देखना चाहिए", इसका पालन करके आप स्वयं जांच सकते हैं कि क्या आपने इसे सही तरीके से इंस्टॉल किया है और क्या आप इसका उपयोग करना जानते हैं।
चरण 0: अभ्यास के लिए एक न्यूनतम प्रोजेक्ट बनाएं
आपको किसी वास्तविक प्रोजेक्ट की आवश्यकता नहीं है, बस एक खाली फ़ोल्डर बनाएं और उसमें एक फ़ाइल डालें। टर्मिनल में चलाएं:
mkdir vscode-claude-demo && cd vscode-claude-demo
printf 'def greet(name):\n return "Hello " + name\n\nprint(greet("world"))\n' > demo.py
code .अपेक्षित परिणाम: VS Code इस फ़ोल्डर को खोलता है, और आप बाईं ओर फ़ाइल एक्सप्लोरर में demo.py देख सकते हैं। (यदि आपने code कमांड-लाइन टूल इंस्टॉल नहीं किया है, तो इस फ़ोल्डर को मैन्युअल रूप से खोलें।)
चरण 1: Claude पैनल खोलें और लॉग इन करें
demo.py पर क्लिक करें (याद रखें, आपको फ़ाइल खोलनी ही होगी), ऊपरी दाएं कोने में Spark आइकन पर क्लिक करें, और जब पहली बार लॉगिन स्क्रीन दिखाई दे, तो लॉगिन पर क्लिक करें और ब्राउज़र में ऑथराइजेशन पूरा करें।
अपेक्षित परिणाम: दाईं ओर Claude Code कन्वर्सेशन पैनल दिखाई देता है, और शीर्ष पर अब "Not logged in" प्रदर्शित नहीं होता है।
चरण 2: कोड सेलेक्ट करें + इसे बदलने के लिए कहें, इनलाइन diff देखें
demo.py में greet फ़ंक्शन वाली दो लाइनों को चुनें, प्रॉम्प्ट बॉक्स के नीचे "2 लाइन्स सेलेक्टेड" दिखाई देना चाहिए। अब टाइप करें:
कृपया इसे f-string का उपयोग करने के लिए बदलें, और टाइप एनोटेशन जोड़ेंअपेक्षित परिणाम: Claude आपसे "कौन सा फ़ंक्शन" नहीं पूछता है (जिसका अर्थ है कि सेलेक्टेड कॉन्टेक्स्ट फीड किया गया था), और सीधे साइड-बाय-साइड diff पॉप अप करता है—दाईं ओर, यह return "Hello " + name को return f"Hello {name}" में बदल देता है, सिग्नेचर में टाइप एनोटेशन जोड़ता है, और नीचे एक Accept / Reject प्रॉम्प्ट दिखाई देता है। ध्यान से देखें और फिर Accept पर क्लिक करें।
चरण 3: एक बार योजना मोड (Plan Mode) आज़माएं
प्रॉम्प्ट बॉक्स के नीचे मोड इंडिकेटर पर क्लिक करें और Plan Mode पर स्विच करें, और थोड़ी बड़ी आवश्यकता टाइप करें:
इस फ़ाइल में कमांड-लाइन पैरामीटर समर्थन जोड़ें, ताकि उपयोगकर्ता टर्मिनल से नाम पास कर सकेंअपेक्षित परिणाम: Claude सीधे फ़ाइल को नहीं बदलता है, वह पहले एक Markdown योजना दस्तावेज़ खोलकर यह सूचीबद्ध करता है कि वह क्या करने की योजना बना रहा है (जैसे argparse का उपयोग करना)। आप पुष्टि कर सकते हैं या किसी चरण के बगल में टिप्पणी लिख सकते हैं, और फिर यह कार्य करेगा। इस चरण तक पहुंचने पर, आपने तीनों मुख्य विशेषताओं: इनलाइन diff, मेंशन सेलेक्ट करना, और प्लान रिव्यू का उपयोग कर लिया है।
07 बुकमार्क कर लें: सामान्य शॉर्टकट कुंजियां और "CLI पर स्विच करना"
सामान्य शॉर्टकट कुंजियों का एक सेट (आधिकारिक से, प्लेटफ़ॉर्म अंतर चिह्नित किए गए हैं):
| क्रिया | शॉर्टकट कुंजी | विवरण |
|---|---|---|
| फोकस स्विच करें (एडिटर ↔ Claude) | Cmd+Esc / Ctrl+Esc | कर्सर जिस पैनल में होगा, शॉर्टकट कुंजी वहीं काम करेगी |
| नए टैब में कन्वर्सेशन खोलें | Cmd+Shift+Esc / Ctrl+Shift+Esc | एक साथ काम करने के लिए कई कन्वर्सेशन खोलें |
@ मेंशन रेफरेंस इन्सर्ट करें | Option+K / Alt+K | एडिटर का फोकस होना चाहिए |
| हाल ही में बंद किए गए कन्वर्सेशन को फिर से खोलें | Cmd+Shift+T / Ctrl+Shift+T | डिफ़ॉल्ट रूप से चालू रहता है |
| नया कन्वर्सेशन शुरू करें | Cmd+N / Ctrl+N | डिफ़ॉल्ट रूप से बंद रहता है, इसे सेटिंग्स में enableNewConversationShortcut के माध्यम से चालू करना होगा |
macOS Tahoe+ में एक समस्या है: सिस्टम का "Game Overlay" डिफ़ॉल्ट रूप से
Cmd+Escका उपयोग करता है और इसे रोक लेगा। उस टिक को हटाने के लिए "System Settings → Keyboard → Keyboard Shortcuts → Game Controller" पर जाएं, याClaude Code: Focus inputको किसी अन्य कुंजी पर रीबाइंड करें।
क्या आप CLI-शैली के इंटरफ़ेस पर वापस जाना चाहते हैं? बस इंटीग्रेटेड टर्मिनल (Cmd+` / Ctrl+`) खोलें और claude चलाएं—CLI अपने आप VS Code से जुड़ जाएगा, और आप अभी भी नेटिव diff का उपयोग कर सकते हैं (बाहरी टर्मिनलों के लिए मैन्युअल रूप से कनेक्ट करने के लिए /ide चलाएं); या सेटिंग्स में Use Terminal (useTerminal) को चेक करें ताकि एक्सटेंशन सीधे टर्मिनल मोड में शुरू हो सके।
थर्ड-पार्टी प्रदाता (Bedrock / Vertex AI / Foundry): पहले Disable Login Prompt (
disableLoginPrompt) को चेक करें, और फिर प्रदाता की मार्गदर्शिका के अनुसार~/.claude/settings.jsonको कॉन्फ़िगर करें (आधिकारिक डॉक्यूमेंटेशन देखें)।
💡 एक वाक्य में सारांश:
Cmd+Escफोकस स्विच करने के लिए सबसे अधिक उपयोग किया जाता है,Option+Kरेफरेंस इन्सर्ट करने के लिए, यदि आप टर्मिनल का अनुभव वापस चाहते हैं, तोclaudeचलाएं याuseTerminalको चेक करें—आप ग्राफिकल और कमांड-लाइन इंटरफेस के बीच आसानी से स्विच कर सकते हैं।
08 सारांश
इस लेख में Claude Code को टर्मिनल से VS Code में लाया गया है, मुख्य बातें ये हैं:
- एक्सटेंशन CLI का विकल्प नहीं है: वे एक ही इंजन हैं, इतिहास और कॉन्फ़िगरेशन साझा करते हैं। कोड लिखने के लिए एक्सटेंशन का उपयोग करें, और जब आपको CLI-विशिष्ट सुविधाओं की आवश्यकता हो तो टर्मिनल पर स्विच करें।
- इंस्टॉल करने के बाद पहली चुनौती आइकन ढूंढना है: Anthropic प्रकाशक की पहचान करें, Spark आइकन केवल तभी दिखाई देता है जब कोई फ़ाइल खुली हो, यदि आपको यह नहीं मिल रहा है, तो निचले दाएं कोने में स्टेटस बार प्रवेश बिंदु का उपयोग करें।
- तीन शानदार GUI विशेषताएं: साइड-बाय-साइड diff (सहमति देने से पहले स्पष्ट रूप से देखें, मौके पर ही बदल सकते हैं),
@मेंशन / सेलेक्टेड कोड (सटीक कॉन्टेक्स्ट फीड करें), योजना रिव्यू (पहले योजना देखें, एक-एक करके टिप्पणी कर सकते हैं)।
अब आपको स्वतंत्र रूप से एक्सटेंशन इंस्टॉल करने, बदलावों की समीक्षा करने के लिए साइड-बाय-साइड diff का उपयोग करने, कॉन्टेक्स्ट को सटीक रूप से फीड करने के लिए @ और सेलेक्टेड कोड का उपयोग करने, और बड़े बदलावों से पहले योजना मोड (Plan Mode) पर स्विच करने में सक्षम होना चाहिए। एक बार जब आप इस वर्कफ़्लो के अभ्यस्त हो जाते हैं, तो आप कोड लिखते समय इस पर भरोसा कर सकते हैं।
अगला लेख 09 JetBrains इंटीग्रेशन—यदि आपका मुख्य टूल IntelliJ IDEA, PyCharm जैसी JetBrains सीरीज़ है, तो Claude Code में एक नेटिव प्लगइन भी है। हम देखेंगे कि यह VS Code एक्सटेंशन के समान क्या है और क्या अलग है, साथ ही JetBrains उपयोगकर्ताओं के लिए विशिष्ट कुछ कॉन्फ़िगरेशन बिंदु।