Posuňte svoju produktivitu kódovania na ďalšiu úroveň integráciou ChatGPT s VS Code.

Môžete byť šéfom svojich úloh a zvýšiť svoju produktivitu, keď sa naučíte využívať nástroje AI, ktoré denne prichádzajú z výskumných laboratórií. VS Code obsahuje rozšírenie ChatGPT, ktoré vám prináša kódovacie prostredie s podporou OpenAI.

Môžete využiť rozsiahly model kódovania ChatGPT na efektívnejšie a rýchlejšie dokončenie svojich projektov – priamo v IDE. Tu sú praktické spôsoby, ako môžete používať ChatGPT s kódom VS.

Ako nainštalovať a používať rozšírenie ChatGPT v kóde VS

Keď hľadáte „ChatGPT“ alebo „Code GPT“ na trhu s rozšíreniami VS Code, objaví sa veľa súvisiacich rozšírení. Na rozdiel od GitHub Copilot nie sú oficiálne priamo od OpenAI.

Väčšina vzorkovaných rozšírení VS Code ChatGPT však funguje rovnakým spôsobom. Ale budeme sa držať Rozšírenie ChatGPT EasyCode pre tento článok, pretože je to celkom slušné na demonštráciu prípadov použitia ChatGPT v kóde VS. Podporuje GPT-4 a GPT-3.5, má bezplatnú úroveň a nevyžaduje kľúč API.

instagram viewer

Ak chcete nainštalovať rozšírenie ChatGPT v kóde VS:

  1. Otvorte kód VS a kliknite na ikonu nastavení v ľavej dolnej časti ľavého bočného panela.
  2. Ísť do Rozšírenia.
  3. Prípadne stlačte Ctrl + Shift + X (Command + Shift + X pre Mac), aby ste priamo otvorili trh s rozšíreniami.
  4. Do vyhľadávacieho panela vľavo hore napíšte „ChatGPT – EasyCode“.
  5. Po zobrazení kliknite na rozšírenie.
  6. Nakoniec kliknite Inštalácia.
  7. Po nainštalovaní uvidíte ikonu rozšírenia na ľavom bočnom paneli.
  8. Kliknite na ikonu rozšírenia. Kliknite Skúste bez účtu. Ale kľudne Prihlásiť sa ak máte účet resp Prihlásiť Se pre nový účet u poskytovateľa rozšírenia.

Ako používať rozšírenie ChatGPT

  1. Ak chcete použiť vstavanú výzvu, zvýraznite cieľový kód a kliknite naň pravým tlačidlom myši. Vyberte ktorúkoľvek z dostupných výziev.
  2. Ak chcete napísať vlastnú výzvu, kliknite pravým tlačidlom myši na zvýraznený kód a vyberte možnosť Spýtať sa GPT. Napíšte výzvu do poľa rozhovoru v hornej časti a stlačte Zadajte.

Ako používať rozšírenie ChatGPT s vašou kódovou základňou

Ak ste otvorili VS Code do svojho základného adresára kódu a chcete, aby ChatGPT pristupoval k základným modulom:

  1. Kliknite na ikonu rozšírenia na ľavom bočnom paneli. Potom skontrolujte Opýtajte sa Codebase box.
  2. Skopírujte cieľový kód a vložte ho do chatovacieho poľa.
  3. Napíšte výzvu pod kód (stlačte Shift + Enter) v poli rozhovoru.
  4. Stlačte tlačidlo Zadajte alebo kliknite na ikonu odoslania.

Teraz sa pozrime na rôzne spôsoby použitia ChatGPT v kóde VS.

1. Refaktorujte a upravujte kód

ChatGPT sa ukázal ako užitočný pri úprave procedurálneho, funkčného a objektovo orientovaného kódu.

Pomocou tohto rozšírenia sme napríklad požiadali ChatGPT, aby zrefaktoroval chybný kód uvedený nižšie, funkciu Pythonu na vytvorenie ľubovoľného slovníka a pridanie „Kúpiť“ ku každej hodnote.

defmakeDict(n: str, **kwargs)->diktovať:
niektoré: diktát
pre kľúč, hodnota v kwargs.items():
niektoré = n+" "+hodnota
vrátiť niektoré

newDict = makeDict("kúpiť", položka1="Kniha GPT", položka2="Java tutorial", položka 3="turistický sprievodca")

Podarilo sa celkom dobre vytvoriť správny kód, ktorý poskytuje očakávaný výstup, s podrobnými dôvodmi úpravy:

Ďalej môžete použiť Spýtajte sa na sledovanie box, aby ste ChtGPT povedali, aby konvertoval kód na triedu a ukázal, ako ho vytvoriť:

Vygenerovaný kód vyššie je modulárnejší a opakovane použiteľný.

2. Odlaďte svoj kód

Ak váš kód vyvolá chybu alebo nefunguje tak, ako by mal, požiadajte ChatGPT, aby ho odladil priamo v kóde VS, šetrí čas.

Hoci neexistuje žiadna vstavaná výzva na ladenie, môžete použiť Opýtajte sa GPT možnosť vytvoriť vlastnú výzvu na ladenie kódu.

Požiadali sme rozšírenie ChatGPT, aby odladilo kód, ktorý sme predtým používali. Nielenže to ladilo. Vysvetlil ho a vygeneroval správny, vrátane jeho očakávaného výstupu.

3. Napíšte svoj kód v inom jazyku

Možno budete chcieť napísať program v konkrétnom jazyku okrem vášho jadra. Svoj kód môžete napísať vo svojom základnom jazyku a požiadať ChatGPT, aby ho prepísal do zvoleného programovacieho jazyka.

Vygenerovaný kód však môže vyžadovať malý ľudský vstup, pretože ChatGPT nemusí v niektorých prípadoch poskytnúť plne funkčný konvertovaný kód.

Napríklad sme pomocou rozšírenia VS Code ChatGPT previedli nasledujúci kód Pythonu na jeho ekvivalent v jazyku C:

Môžete to dosiahnuť kliknutím pravým tlačidlom myši na zvýraznený kód a výberom položky Opýtajte sa GPT možnosť.

Tu je naša výzva v kóde VS:

Hoci ekvivalent C vygeneroval dvakrát predtým, ako sa to podarilo, konečný kód funguje.

4. Vytvorte frontendový komponent pre vaše API

Ak ste napísali API s rôznymi koncovými bodmi, môžete požiadať rozšírenie ChatGPT, aby poskytlo komponent frontendu na jeho používanie pomocou konkrétneho rámca. Môže to byť React, Vue alebo Angular.

Napríklad sme použili rozšírenie na vygenerovanie komponentu React na vytvorenie plánu stretnutí na základe koncového bodu API vytvoreného pomocou FastAPI Pythonu:

Ako je uvedené vyššie, možno budete chcieť skontrolovať Opýtajte sa Codebase box, ak máte čo do činenia s veľkou kódovou základňou.

Po odkaze na našu kódovú základňu rozšírenie VS Code ChatGPT poskytlo praktický komponent React na použitie poskytnutého koncového bodu:

5. Vysvetlite bloky kódu

Predpokladajme, že ste získali kúsok kódu z úložiska Stack Overflow alebo GitHub. Môžete požiadať rozšírenie ChatGPT v kóde VS, aby vysvetlilo, ako to funguje, aby ste lepšie porozumeli. To vám pomôže ľahko odladiť takýto kód, ak sa vyskytnú chyby v dôsledku budúcich zmien kódu.

V tomto príklade použitia sme požiadali rozšírenie ChatGPT, aby vysvetlilo nasledujúci kód; trieda Python na overovanie e-mailových adries používateľov.

Vyvolalo to nasledujúcu odpoveď:

6. Vytvorte HTML šablóny pre vašu aplikáciu

Pomocou rozšírenia ChatGPT v kóde VS môžete vytvoriť šablónu HTML (napríklad vstupné polia) úplne od začiatku – priamo pomocou chatovacieho poľa rozšírenia. Môžete mu napríklad povedať, aby vytvoril šablónu HTML na registráciu používateľa.

Ale čo ak píšete aplikáciu, ktorá vykresľuje údaje priamo do HTML (nie SPA) a chcete šablónu špecifickú pre projekt? Rozšírenie ChatGPT v kóde VS môžete použiť na vytváranie šablón HTML, ktoré používateľom zobrazujú koncové údaje.

Napríklad, ak používate Rámec založený na architektúre MVT, ako je Django, rozšírenie môžete použiť na vytvorenie šablón HTML pre vaše zobrazenia Django.

Opäť platí, že pre tento typ prípadu použitia možno budete chcieť kliknúť na Opýtajte sa Codebase začiarkavacie políčko pre ChatGPT pre prístup k vašej kódovej základni.

7. Jednotka – otestujte svoj kód

Akokoľvek je testovanie jednotiek nevyhnutné, môže byť spotrebiteľom času. Rozšírenie VS Code ChatGPT môžete využiť na generovanie jednotkových testov pre váš kód a ušetriť tak cenný čas na vývoj.

Hoci rozšírenie ChatGPT má vstavanú výzvu na generovanie testov jednotiek, možno budete chcieť napísať vlastnú výzvu pomocou Opýtajte sa Codebase možnosť pre konkrétnosť a lepší výsledok.

Požiadali sme ChatGPT, aby napísal test jednotky pre koncový bod registrácie vytvorený pomocou FastAPI Pythonu:

Efektívne vzorkoval základňu kódu, aby vygeneroval požadovaný test jednotky:

8. Nájdite potenciálne bezpečnostné chyby

Aj keď nemusí poskytnúť podrobnú analýzu zabezpečenia, rozšírenie VS Code ChatGPT môže byť užitočným nástrojom na rýchle skontrolujte bezpečnostné chyby vo vašej aplikácii kódovú základňu a ušetrí vám čas manuálneho skenovania.

Ak chcete povoliť ChatGPT skenovať vašu kódovú základňu, použite Opýtajte sa Codebase možnosť (kliknite na ikonu rozšírenia a skontrolujte Opýtajte sa Codebase krabica).

Ak sa bežne hazardujete okolo nejakého starého resp nové funkcie VS kódu, neváhajte a opýtajte sa na cestu okolo IDE z rozšírenia ChatGPT.

Môžete napríklad požiadať rozšírenie, aby odporučilo najlepšie rozšírenia na ladenie konkrétneho programovacieho jazyka.

Alebo mu môžete položiť technickú otázku, napríklad ako otvoriť kód VS z príkazového riadku.

10. Napíšte dokumentáciu priamo z kódu VS

Pomocou rozšírenia ChatGPT môžete jednoducho napísať podrobnú dokumentáciu pre časť kódu priamo z kódu VS.

Tu je napríklad podrobná dokumentácia funkcie vytvárania odkazu Zoom (vo formáte HTML), ktorú sme vygenerovali pomocou rozšírenia VS Code ChatGPT:

Kódujte efektívne pomocou ChatGPT v kóde VS

Ako programátor v rýchlo sa rozvíjajúcom internete chcete dosiahnuť minimálny životaschopný produkt v čo najkratšom čase. Hoci ChatGPT nie je úplne spoľahlivý, môže vám pomôcť pri rozvoji, ak sa použije kreatívne. A existuje oveľa viac prípadov použitia ChatGPT v programovaní. Avšak so všetkým, čo bolo povedané, uistite sa, že overíte výsledky ChatGPT, pretože môžu byť niekedy zavádzajúce.