आधुनिक विकास अक्सर अच्छे इरादों के साथ शुरू होता है: एक त्वरित स्क्रिप्ट, एक प्रोटोटाइप, शायद एक छोटी सी चीज़ को स्वचालित करने के लिए एक कार्रवाई। लेकिन जैसे -जैसे परियोजनाएं विकसित होती हैं, वे शुरुआती प्रयास भंगुर हो सकते हैं। क्या होगा यदि आप अपनी गति को धीमा किए बिना उन परियोजनाओं में स्पष्टता और संरचना ला सकते हैं?
यह ट्यूटोरियल दिखाता है कि हमने कैसे उपयोग किया Github Copilot कोडिंग एजेंट एक व्यक्तिगत github कार्रवाई परियोजना को रिफैक्टर और बढ़ाने के लिए कहा जाता है validate-file-exists। पैचवर्क उपयोगिता के रूप में जो शुरू हुआ वह अच्छी तरह से संरचित, परीक्षण-कवर, प्रलेखित और कोपिलॉट एजेंट मोड और कोडिंग एजेंट के साथ सफलता के लिए सेट किया गया।
हम अपने उदाहरण के माध्यम से चलेंगे:
- अद्यतन करने कोपिलॉट कस्टम निर्देश बेहतर कार्य संरेखण के लिए।
- बनावट
copilot-setup-steps.yamlकोडिंग एजेंट को उसके वातावरण में आवश्यक उपकरण देने के लिए फ़ाइल। - तकनीकी ऋण की पहचान करने के लिए कोपिलॉट के साथ काम करना।
- पुल अनुरोधों में कोपिलॉट के साथ सहयोग करना।
- एक अलग परियोजना पर यूआई को पुनरावृत्त करने के लिए कोपिलॉट के साथ साझेदारी करना।
Github कार्रवाई जिसने यह सब शुरू किया
नवंबर 2024 में वापस, मैंने एक छोटी सी गिटब एक्शन बनाया validate-file-exists। मैं कुछ फाइलें सुनिश्चित करना चाहता था (जैसे एक) dependabot.yml फ़ाइल, या .github/copilot-instructions.md) एक रिपॉजिटरी में मौजूद थे। यदि नहीं, तो GitHub कार्रवाई वर्कफ़्लो विफल हो जाएगा। इसने COM-seperated इनपुट्स का समर्थन किया और इसका मतलब था कि मैं प्रोजेक्ट्स में उपयोग किए जाने वाले गुणवत्ता वाले गेट्स के “बेसलाइन” का हिस्सा था।
यह कार्यात्मक था, लेकिन मैं इसे और बेहतर कर सकता था। यह डॉक्स को याद कर रहा था, असंगत मेटाडेटा था, इनपुट सत्यापन में कुछ अंतराल, और सफलता के लिए कोपिलॉट को सेट करने में मदद करने के लिए कोपिलॉट कस्टम निर्देश या कोपिलॉट सेटअप चरण नहीं थे। इसे ठीक करने का समय – बनाम कोड में कोपिलॉट एजेंट मोड से मदद से।
चरण एक: कस्टम निर्देशों में सुधार करें
एजेंट में लाने से पहले, मैंने मौजूदा की समीक्षा की copilot-instructions.md। यह विरल था, रिपॉजिटरी के उद्देश्य, उपयोग या संरचना के किसी भी विवरण के बिना, और न ही कोपिलॉट के लिए कोई स्पष्ट मार्गदर्शन।
कार्रवाई:
मैंने निर्देशों पर आधारित किया कार्यों पर काम करने के लिए कोपिलॉट का उपयोग करने के लिए सर्वोत्तम अभ्यासमेरे प्रॉम्प्ट में नमूना कस्टम निर्देश फ़ाइल प्रदान करके, और Copilot को कोडबेस के आधार पर अपडेट करने के लिए कहें। दूसरे शब्दों में, मैं इसे प्रदान करना चाहता था:
- रिपॉजिटरी/कोडबेस का एक स्पष्ट सारांश और कार्रवाई क्या करती है।
- योगदान दिशानिर्देश (कैसे निर्माण करें, प्रारूपित करें, लिंट, और कोडबेस का परीक्षण करें, जिसमें कमिट होने से पहले अपेक्षाएं शामिल हैं)।
- परियोजना संरचना अवलोकन।
- प्रमुख तकनीकी सिद्धांत (सख्त टाइपस्क्रिप्ट, टीएसडीओसी को शामिल करना, और केंद्रित और प्रबंधनीय कार्यों को शामिल करना)।
परिणाम:
कोपिलॉट का सार्थक योगदान की ओर मार्गदर्शन करने के लिए मेरी अपेक्षाओं पर सही संदर्भ था। आप पा सकते हैं यहाँ नवीनतम संस्करणलेकिन यहाँ नीचे एक स्नैपशॉट है:
# Validate File Exists Action
This is a TypeScript-based GitHub Action that validates whether specified files
exist in a repository. It takes a comma-separated list of files and validates
their existence, failing the workflow if any files are missing. Please follow
these guidelines when contributing:
## Code Standards
### Required Before Each Commit
- Run `npm run format:write` to ensure consistent code formatting with Prettier
- Run `npm run lint` to check for ESLint violations
- Run `npm run test` to ensure all tests pass
- Run `npm run local-action` to test the action locally with a `.env` file
### Development Flow
- Build: `npm run package` (compiles TypeScript and bundles with ncc)
- Test: `npm run test` or `npm run ci-test`
- Coverage: `npm run coverage` (generates coverage badge)
- Full check: `npm run all` (format, lint, test, coverage, package)
- Local testing: `npm run local-action` (test action locally with .env file)
## Repository Structure
- `src/`: Core TypeScript source code
- `main.ts`: Main entry point and action orchestration
- `fileValidator.ts`: Core file validation logic
- `index.ts`: Action entrypoint that calls run()
- `types.ts`: TypeScript type definitions
- `__tests__/`: Jest unit tests for all source files
- `dist/`: Compiled and bundled JavaScript output (generated)
- `action.yml`: GitHub Action metadata and interface definition
- `script/`: Release automation scripts
- `badges/`: Generated coverage and status badges
## Key Guidelines
1. Follow TypeScript strict mode and best practices
1. Use clear, descriptive variable and function names
1. Add TSDoc comments for all public methods and classes
1. Write comprehensive unit tests using Jest for all new functionality
1. Keep functions focused and manageable (generally under 50 lines)
1. Use consistent error handling with @actions/core.setFailed()
1. Validate inputs and provide meaningful error messages
1. Use @actions/core for all GitHub Actions integrations (inputs, outputs,
logging)
1. Maintain backwards compatibility for action inputs/outputsचरण दो: Copilot-setup-steps.yaml जोड़ें
हम में से किसी भी डेवलपर्स की तरह, कोपिलॉट कोडिंग एजेंट को काम करने के लिए एक उचित वातावरण की आवश्यकता होती है। इसका मतलब है कि किसी भी आवश्यक फ्रेमवर्क को स्थापित करना, निर्भरता स्थापित करना, और यह सुनिश्चित करना कि कोपिलॉट के पास काम करने के लिए सही उपकरणों तक पहुंच है।
कार्रवाई:
मैंने बनाया .github/copilot-setup-steps.yaml Github डॉक्स का उपयोग करना कोपिलॉट कोडिंग एजेंट के लिए विकास वातावरण को अनुकूलित करना। उदाहरण कोड की जाँच करता है, Node.js सेट करता है, और आवश्यक निर्भरता को स्थापित करता है। यह देखते हुए कि यह एक टाइपस्क्रिप्ट एक्शन है, यह बहुत ज्यादा मुझे चाहिए!
मैंने वर्कफ़्लो में एक मामूली बदलाव किया: नोड-सेवा को बदलना .node-version फ़ाइल, सुसंगत होना मेरे सीआई वर्कफ़्लो के साथ:
- name: Setup Node.js
id: setup-node
uses: actions/setup-node@v4
with:
node-version-file: .node-version
cache: npmपरिणाम:
कोपिलॉट कोडिंग एजेंट के पास कोडबेस के निर्माण, लिंट और परीक्षण करने के लिए आवश्यक निर्भरता और उपकरण हैं। जैसा कि यह कोडबेस में परिवर्तन करता है, यह उन उपकरणों का उपयोग करके गुणवत्ता (हमारे कस्टम निर्देशों में अनुरोध किया गया) की जांच करने में सक्षम होगा। copilot-setup-steps.yml।
चरण तीन: कोपिलॉट को तकनीकी ऋण खोजने दें
सेटअप चरणों और कस्टम निर्देशों के साथ, यह एक कार्य खोजने का समय था। तो बेशक, मैं कोपिलॉट की ओर रुख किया। वीएस कोड में कोपिलॉट चैट का उपयोग करते हुए, हमने कोपिलॉट से पूछा:
“इस परियोजना में क्या तकनीकी ऋण मौजूद है? कृपया मुझे उन क्षेत्रों की एक प्राथमिकता वाली सूची दें, जिन पर हमें ध्यान केंद्रित करने की आवश्यकता है। मैं शीर्ष 2 या 3 आइटम के साथ एक GitHub समस्या बनाना चाहूंगा। कृपया एक संक्षिप्त समस्या विवरण, स्वीकृति मानदंडों का एक सेट, और किस फ़ाइलों को जोड़ने/अद्यतन करने की आवश्यकता है, इस पर पॉइंटर्स शामिल करें।”
कुछ ही मिनटों के भीतर, इसने कोडबेस का पता लगाया और सुझावों की एक सूची के साथ वापस आ गया:
- असंगत पैकेज मेटाडेटा।
- Readme बेमेल (गलत इनपुट नाम)।
- खाली या विकृत इनपुट के लिए कोई सत्यापन नहीं।
ध्यान दें कि हमने एक समस्या विवरण, स्वीकृति मानदंड और फ़ाइलों पर मार्गदर्शन के लिए कैसे कहा/अद्यतन करने के लिए कहा? ये से आते हैं कार्यों पर काम करने के लिए कोपिलॉट का उपयोग करने के लिए सर्वोत्तम अभ्यास। दूसरे शब्दों में, सुनिश्चित करें कि आपके मुद्दे अच्छी तरह से स्कोप किए गए हैं!
कार्रवाई:
मैंने कोपिलॉट को एक समस्या लिखने के लिए कहा जो उन तीन वस्तुओं को संबोधित करता है। एक बार जब मैंने समस्या बनाई, तो मैंने इसे कोपिलॉट को सौंपा।
चरण चार: एक्शन में कोपिलॉट कोडिंग एजेंट
एक बार सौंपा जाने के बाद, एजेंट ने एक नया पुल अनुरोध बंद कर दिया। यहाँ यह क्या किया, अतुल्यकालिक रूप से:
- समस्या की अपनी समझ का निर्माण करने के लिए रिपॉजिटरी की सामग्री का पता लगाया।
- इसकी खोज के आधार पर एक योजना बनाई।
- तय किया
package.jsonनाम, विवरण, URL और लेखक क्षेत्र। - कोड से मिलान करने के लिए ReadMe उपयोग उदाहरणों को अपडेट किया।
- जोड़ा इनपुट सत्यापन तर्क:
- खाली या व्हाट्सएप-ओनली स्ट्रिंग्स को अस्वीकार करें।
- इनपुट को अस्वीकार करें जो सिर्फ अल्पविराम हैं।
- इन एज मामलों के लिए चार नए परीक्षण लिखे।
- पुष्टि की गई लिंटिंग, स्वरूपण और कवरेज बरकरार थे।
- कार्य की एक चेकलिस्ट के साथ पुल अनुरोध निकाय को अपडेट किया गया।
जैसा कि मैंने कोपिलॉट को कार्य को सौंप दिया, इसने मुझे दर्शकों को समझाने के लिए मुक्त कर दिया कि वह क्या कर रहा था, और कोपिलॉट सेटअप कदम और निर्देश एजेंट के सत्र के संदर्भ में कैसे काम करते हैं।
परिणाम:
कोपिलॉट ने केवल 11 मिनट में सभी कार्यों को पूरा किया। एजेंट के दृष्टिकोण की समीक्षा के बाद, मैंने CI वर्कफ़्लो को मंजूरी दे दी ताकि यह कोडबेस पर मानक गुणवत्ता चेक चला सके। वर्कफ़्लो विफल रहा, लेकिन कोपिलॉट की कोई गलती नहीं थी। मेरे पास सीआई में कुछ अतिरिक्त मार्कडाउन लाइनिंग चेक थे जो निर्देशों में नहीं थे।
रियल-टाइम डिबगिंग और लिंटिंग फिक्स
जबकि मैं इसे मैन्युअल रूप से तय कर सकता था, यह दिखाने का एक अच्छा अवसर था कि हम कोपिलॉट के साथ परिवर्तनों पर कैसे पुनरावृत्ति कर सकते हैं। मैंने पुल अनुरोध में एक नई टिप्पणी जोड़ी, और कोपिलॉट से पूछा:
“हमारे GitHub कार्रवाई में मार्कडाउन के लिए एक लिनिंग त्रुटि थी, क्या आप इसे ठीक कर सकते हैं?” (GitHub कार्रवाई वर्कफ़्लो से त्रुटि को भी चिपकाकर।)
कुछ मिनट बाद, इसने कोड को अपडेट किया, एक नई कमिट को धक्का दिया, और पुल अनुरोध पारित किया। और जब कोपिलॉट पृष्ठभूमि में मेरे काम पर काम कर रहा था, तो मैं धारा को लपेटने में सक्षम था।
बोनस: कोपिलॉट कोडिंग एजेंट और नाटककार MCP सर्वर के साथ UI परिवर्तन करना
जबकि कोपिलॉट ने GitHub एक्शन के लिए प्रारंभिक कोड परिवर्तनों पर काम किया, मैंने एक दूसरी परियोजना दिखाई: ए प्रवृत्ति रडार विज़ुअलाइज़ेशन ऐप (यहाँ रिपॉजिटरी है) कि मैंने Next.js और टेलविंड CSS का उपयोग करके बनाया है।
संकट:
उपयोगकर्ताओं को मैन्युअल रूप से इनपुट पॉइंट डेटा को फॉर्म में करना था। मैं चाहता था:
- एक बिंदु रखने के लिए उपयोगकर्ताओं को रडार पर क्लिक करें।
- किसी बिंदु की श्रेणी या संभावना को बदलने के लिए ड्रैग-एंड-ड्रॉप रिपोजिशनिंग सक्षम करें।
समाधान:
मैंने UX, स्वीकृति मानदंड और संदर्भों का वर्णन करते हुए एक GitHub मुद्दा दायर किया।
पुल अनुरोध के माध्यम से काम करके टिप्पणियों के कुछ पुनरावृत्तियों के बाद, कोपिलॉट कोडिंग एजेंट:
- क्लिक-टू-प्लेस लॉजिक लागू किया गया।
- ड्रैग-एंड-ड्रॉप सपोर्ट जोड़ा गया।
- यूनिट टेस्ट लिखे।
- स्क्रीनशॉट लिया और उन्हें पुल अनुरोध के लिए संलग्न किया।
- पुल अनुरोध को अपडेट किया (और टिप्पणियों के साथ जवाब दिया) काम के सारांश के साथ जो पूरा हो गया था
नाटककार अब डिफ़ॉल्ट रूप से स्थापित है कोपिलॉट कोडिंग एजेंट के साथ, जो कोपिलॉट दृश्य व्यवहार को भी मान्य करने देता है।
अंतिम विचार
यह सिर्फ एक सफाई सत्र नहीं था। यह आधुनिक सॉफ्टवेयर सहयोग में एक सबक था। कोपिलॉट कोडिंग एजेंट हमारा नया टीममेट है।
संदर्भ और इरादे के साथ हमारे रिपॉजिटरी को संरचित करके, हम कोपिलॉट को सार्थक रूप से योगदान करने के लिए आमंत्रित करते हैं।
यदि आपने अभी तक कोपिलॉट कोडिंग एजेंट की कोशिश नहीं की है, तो अपनी मौजूदा परियोजनाओं के माध्यम से सोचें:
- एक पुरानी GitHub कार्रवाई को साफ करें।
- रिफैक्टर एक उपेक्षित रिपॉजिटरी।
- सत्यापन और परीक्षण जोड़ें।
आपको आश्चर्य हो सकता है कि आप एक दोपहर में कितनी प्रगति कर सकते हैं।
अधिक तलाशने के लिए तैयार हैं? देखना कैसे GitHub बिलिंग टीम तकनीकी ऋण को लगातार जलाने के लिए कोडिंग एजेंट का उपयोग करती है>
द्वारा लिखित
