Tocmai am făcut prima mea extensie VS Code. Și s-a simțit bine! Acest articol va acoperi pașii de bază pentru a vă ajuta să creați propria extensie de cod VS. Pe parcurs voi împărtăși ceea ce am învățat de la realizarea unuia pentru prima dată.

Încă nu sunt expert în acest sens, dar pot spune cu adevărat asta nimic nu este atât de greu pe cât pare. ?

Să vorbim despre codul VS și piața sa de extensii

Dacă ați deschis acest articol, probabil că ați auzit cel puțin despre VS Code (sau Visual Studio Code). Dacă nu, este practic un editor de cod ușor dezvoltat de Microsoft.

Deoarece VS Code este un editor de cod, acesta poate funcționa mult mai rapid și mai ușor decât un IDE tipic, cum ar fi Eclipse. Dar cu această performanță apare un dezavantaj: IDE-urile oferă adesea instrumente mai bune, cum ar fi lintere încorporate, șabloane de cod mai bune, instrumente de versiune a codurilor și unele caracteristici, cum ar fi completarea automată.

Dar unde codul VS strălucește de fapt este puterea comunității. Vă permite să instalați extensii care vin direct de pe piața VS Code. Aceste extensii vă permit să o personalizați după cum doriți. Puteți, de exemplu, să adăugați un linter sau orice alte caracteristici, cum ar fi paranteze colorate. Puteți chiar să introduceți o pisică nyan în codul dvs. VS!

Cum sa creati propria dvs extensie de cod VS
Cui nu-i place o pisică nyan?

De ce ar trebui să creați o extensie VS Code?

Cum sa creati propria dvs extensie de cod VS

Da, „de ce” este cuvântul cheie aici. Este primul și cel mai important lucru despre care să vorbești atunci când vrei să începi să faci ceva.

Întreabă-te de ce vrei să reușești? Majoritatea oamenilor răspund de obicei pentru că vor a învăța ceva sau câștiga faimă, sau poate chiar ambele. Dar cu cât există mai multe motive, cu atât vei avea mai multă motivație.

Un lucru pe care îl pot spune este că încă nu trebuie să gândești la mare. Creați doar un instrument foarte specific, pe care poate îl veți folosi doar dvs. Primul pas este întotdeauna cel mai greu. Și la sfârșitul zilei, cel puțin te-ai ajutat cu extensia ta.

În ceea ce mă privește, am construit o extensie dintr-un motiv anume: am vrut să fac un instrument pe care să-l folosesc pentru a-mi crește productivitatea. Și asta ar putea chiar ajuta o mică parte a comunității din apropierea mea. (Spoiler: este un generator de testare golang)

De aceea, extensiile pe care le-am făcut sunt foarte precise și au un caz de utilizare foarte specific. Nu vreau să am o marcă mare, îmi propun să mă sporesc productivitatea și să învăț ceva nou. Cred că acesta este un motiv suficient pentru mine.

Și, desigur, totul părea imposibil la început. Efectuarea extensiilor de cod VS pare a fi o lucrare de geniu la nivel de geniu (dar, desigur, nu). Din moment ce am mult timp liber pe mâini în acest moment, m-am gândit că aș putea să încerc și eu.

Primul pas al construirii unei extensii de cod VS

Pentru a începe, trebuie să aveți instalat codul VS. În cazul în care nu îl aveți încă, voi pune doar linkul de descărcare aici.

Extensiile de cod VS acceptă două limbaje principale: JavaScript și TypeScript. Așadar, este destul de obligatoriu să cunoașteți oricare dintre acestea.

De asemenea, asigurați-vă că aveți instalat Node.js, deoarece vom folosi o mulțime de pachete npm aici.

Cum se generează un șablon de extensie de cod VS

Ah, șabloane. Cât de convenabil. Codul VS are deja propriul său generator de șabloane, așa că hai să intrăm direct în el.

Mai întâi, instalați generatorul de șabloane cu npm install -g yo generator-code

După aceea, să-l rulăm cu yo code. Și va determina acest lucru ciudat (?) Și selectarea limbii. Alegeți limba preferată și continuați. (Am ales JavaScript aici).

1611444307 858 Cum sa creati propria dvs extensie de cod VS
codul tau

Ulterior, va trebui să vă editați numele și descrierea extensiei. Puteți continua cu orice preferați.

1611444307 211 Cum sa creati propria dvs extensie de cod VS
sau poate pur și simplu intrați până la capăt

Acum, un director numit hellovscode va fi creat în directorul dvs. de acasă. Deschideți-l cu codul VS tastând pur și simplu code hellovscode în directorul folderelor.

Folosește F5 pentru a rula extensia dvs. și va apărea o altă fereastră. Acum apăsați ctrl+shift+p și găsiți Hello World comanda, rulați-l și un pop-up ar trebui să iasă în colțul din dreapta jos. Asa:

Cum sa creati propria dvs extensie de cod VS
Magie? Nu. Doar colecție de cod.

Voilà! Tocmai ați rulat prima extensie. Dar ce se întâmplă de fapt cu toate acestea? Nu vă faceți griji, voi explica câteva biți mai jos, în principal cu privire la două fișiere: extension.js și package.json.

Ce este fișierul Extension.js în codul VS?

Aici vă veți petrece cea mai mare parte a timpului codând. Acest fișier va conține toate blocurile de cod și fluxul logic.

Nu există prea multe diferențe între acest cod normal și nod. Dar una dintre diferențele principale este înregistrarea comenzilor. Vei veni peste acest bloc vscode.commands.registerCommand('hellovscode.helloWorld'.

Pe scurt, va înregistra apelul de funcție pentru a fi utilizat.

O altă diferență este utilizarea frecventă a API-ului VS Code – dar vom reveni la asta mai târziu.

Dacă ați analizat codul, veți vedea și acest lucru: vscode.window.showInformationMessage('Hello World from hellovscode!');

Ca experiment, încercați să modificați valoarea mesajului și încercați să îl rulați din nou.

Pachet.json

Acest fișier este cel care va lega practic comenzile pe care le-ați creat extension.js cu comenzile definite de dvs.

Veți vedea comanda pe care ați înregistrat-o mai sus hellovscode.helloWorld fiind pus ca parte a comenzii intitulate Hello World. Și așa se leagă de fapt comanda de codul tău.

În afară de aceasta, acest fișier va permite, de asemenea, ca comanda să fie plasată pe bara de clic dreapta. De asemenea, va filtra unde ar trebui să apară comanda (tip de fișier).

Cum să vă publicați pluginul de cod VS

În cazul în care ați putea dori să vă publicați extensia, vă voi arăta cum să faceți acest lucru aici:

Pasul 1: În primul rând, instalați vsce cu npm install -g vsce. Vom folosi acest lucru de cele mai multe ori pentru a publica.

Pasul 2: Dacă nu aveți încă un cont Microsoft, ar trebui să faceți acest lucru inscrie-te aici deoarece vom avea nevoie de jetonul de acces pe care îl veți obține.

Pasul 3: Odată ce aveți contul conectați-vă la piata de desfacere. Creați-vă organizare și faceți clic pe el (ar trebui să vedeți ceva de genul de mai jos).

1611444307 176 Cum sa creati propria dvs extensie de cod VS

Pasul 4: Acum faceți clic pe colțul din dreapta sus unde se află cercul roșu și selectați Jeton de acces personal. Creați jetonul de acces personal și alegeți toate organizațiile accesibile cu acces complet.

1611444307 303 Cum sa creati propria dvs extensie de cod VS

Pasul 5: Amintiți-vă jetonul, deoarece îl veți utiliza atunci când încărcați extensia.

Pasul 6: va trebui să vă creați identitatea de editor acum. Deci, accesați promptul de comandă și tastați run vsce create-publisher YOUR_PUBLISHER_NAME .
Introduceți propriul nume, e-mail și jeton de acces personal când vi se solicită. Contul dvs. de editor ar trebui creat cu succes.

Pasul 7: Este timpul de publicare! Pregătiți-vă mediul de extensie în linia de comandă și tastați vsce package. Aceasta va împacheta extensia dvs. în formatul pieței. Apoi tastați vsce publish.

Și atât, extensia dvs. va fi publicată.

Pe o notă laterală, atunci când publicați, ar trebui să vă modificați readme (cel puțin prima parte în care scrie This is Readme for.. ) deoarece vsce îl va detecta și vă va cere să îl modificați.

Câteva sfaturi suplimentare pentru crearea de extensii de cod VS

Acum ar trebui să aveți o înțelegere de bază despre modul în care funcționează extensiile de cod VS. Aici, voi împărtăși câteva lucruri pe care le-am învățat.

Utilizarea API-ului VS Code

Codul VS însuși a oferit o mulțime de API-uri pe care le puteți utiliza pentru a vă face extensia. S-ar putea să întâlniți mai multe obstacole comune atunci când vă construiți extensia, cum ar fi poziționarea cursorului, obținerea poziției liniei sau poate obținerea cuvântului evidențiat. Toate acestea pot fi abordate folosind VS Code API.

Ar trebui să le citiți documentație și experimentați cu API-ul lor. Puteți încerca chiar să citiți codul lor API! Având în vedere cantitatea de documentație din interiorul codului, ar trebui să puteți afla oarecum ce API va fi cel mai util.

Googling lucruri (citiți documente sau cod)

cautare Google

De cele mai multe ori în viața noastră de programare, când suntem blocați, există întotdeauna Google sau Stive Overflow care poate oferi ajutor rapid.

Dar de data aceasta nu te va salva întotdeauna.

În primul rând, căutarea de ajutor în acest caz este destul de dificilă. De exemplu, spuneți că doriți să evidențiați un cuvânt pe cursor – s-ar putea să căutați vs code extension how to get total line... sau ceva similar.

Dar permiteți-mi să vă spun, de cele mai multe ori vă va direcționa către extensia reală în sine sau vă va oferi manual despre cum să utilizați codul VS.

O modalitate prin care vă puteți face mai ușor este adăugarea cuvântului cheie „API” în căutare, cum ar fi vs code extension api how to ....

De asemenea, este destul de greu să găsești răspunsurile relevante în Google, deoarece comunitatea de dezvoltatori nu este atât de mare, iar extensiile Cod VS pot părea intimidante pentru mulți nou-veniți. Dar sincer, nu este chiar atât de greu.

De aceea, uneori, cel mai bun mod de a învăța cum să dezvoltați o extensie de cod VS este citind documentația sau codul.

Un exemplu de depozit GitHub cu extensie de cod VS

Am oferit un exemplu de manipulare a textului în Depozitul GitHub ceea ce ar putea ajuta la referințele codului (ferește-te totuși de codul dezordonat!). Codul va genera câteva teste unitare șablon în limba Go.

Înfășurându-se

Ceea ce am acoperit aici sunt doar elementele de bază pentru crearea unei extensii VS Code. Un mesaj pe care vreau să-l iei la inimă este acela nu este la fel de greu pe cât pare. Uneori trebuie doar să te împingi puțin și să încerci.

S-ar putea să întâlniți unele provocări pe parcurs, dar dacă nici măcar nu începeți, pierdeți complet.

În cele din urmă, vă mulțumesc că v-ați făcut timp să citiți acest lucru. Sper că ți-a plăcut și ai început să înțelegi toate lucrurile pe care tocmai le-am explicat.

Și sperăm că vei începe și tu să faci o extensie!

Fericire de codificare pentru voi toți în acest timp de distanțare socială.