Kaip derinti Node.js programas „Visual Studio Code“.

„Node.js“ programos derinimas „Visual Studio Code“ yra įmanomas ir paprastas. VS kodo rengyklėje yra integruotas derinimo įrankis, galintis derinti bet kurią programą, kuri yra skirta Node.js vykdymo laikui. Tai reiškia, kad galite derinti „JavaScript“ ar bet kurią kitą kalbą, kuri ją kompiliuoja (pvz., „TypeScript“).

Šiame straipsnyje bus aprašyti „Node.js“ programos derinimo VS kode veiksmai. Sužinosite, kaip pradėti derinimo seansą, įterpti lūžio taškus, pridėti išorinį procesą ir derinti TypeScript kodą naudodami šaltinio žemėlapius.

Ko reikia norint pradėti

Prieš pradėdami, vietiniame kompiuteryje įdiekite ir Node.js, ir VS Code. Naujausia Node.js versija pasiekiama svetainėje Node.js Oficiali svetainė. Panašiai, norėdami naudoti „Visual Studio Code“, atsisiųskite naujausią versiją iš VS kodas Interneto svetainė. Norėdami gauti instrukcijas apie kaip nustatyti VS kodą sistemoje Windows, perskaitykite mūsų sąrankos vadovą.

Taip pat reikia Node.js projekto. Galite sukurti paprastą Node.js programą nuo nulio arba naudokite esamą programą.

Derinimo procesas VS kode

Pradėti derinimo sesiją VS kodo rengyklėje yra gana paprasta. Atidarykite failą naudodami VS kodą ir spustelėkite Vykdyti ir derinti piktogramą šoninėje juostoje (arba paspauskite Ctrl + Shift + D klaviatūroje). Tada spustelėkite Vykdyti ir derinti mygtuką, kad pradėtumėte procesą.

Pagal numatytuosius nustatymus Node.js bandys išsiaiškinti jūsų projekto derinimo aplinką. Bet jei automatinis aptikimas nepavyksta, jis paragins pasirinkti tinkamą aplinką. Šioje mokymo programoje ta aplinka yra Node.js.

Pasirinkus aplinką, VS Code suaktyvina derintuvą ir prideda jį prie proceso. Savo išvestį galite pamatyti DERINIMO KONSOLE. Naudodami viršuje esančią derinimo įrankių juostą galite kartoti kodą, pristabdyti vykdymą arba užbaigti seansą.

Taip pat galite sukurti konfigūracijos failą. The launch.json failas leidžia konfigūruoti ir nustatyti derinimo informaciją. Jei jūsų scenarijus reikalauja argumento, pateikite šiuos argumentus launch.json failą. Kiekvienoje konfigūracijoje galima nustatyti kelias parinktis:

{ 
"versija": "0.2.0", 
"konfigūracijos": [ 
 { "tipas": "mazgas", 
"prašymas": "paleisti", 
"vardas": "Paleisti programą", 
"praleisti failus": [ "/**" ], 
"programa": „${workspaceFolder}\\index.js“
 } 
 ]
}

Taip pat kairėje redaktoriaus pusėje pastebėsite penkias skydelius. Šios plokštės yra KINTAMAI, ŽIŪRĖTI, SKAMBINIMO STAKE, ĮKELTI SCEPTAI, ir LŪŽIO TAŠKAI:

Kai baigsite nustatyti konfigūraciją, pasirinkite ir paleiskite programą per konfigūracijos meniu.

Pridėkite išorinį procesą

Kitas Node.js derinimo seanso nustatymo būdas yra išorinio proceso prijungimas. Paleiskite programą naudodami šią komandą:

mazgas --inspect index.js

Įdėkite -brk vėliava po -- apžiūrėti jei norite jį pridėti prieš pradedant vykdyti programą.

Tada atidarykite proceso parinkiklį „VS Code“. Čia pateikiami visi Node.js aplinkoje galimi procesai. Norėdami atidaryti rinkiklį, paspauskite Ctrl + Shift + P ir rasti Derinimas: prijunkite prie komandos Node.js.

Spustelėkite komandą ir pasirinkite tinkamą parinktį, kad pradėtumėte derinimo procesą.

Lūžio taško kūrimas

Jei norite pristabdyti tam tikruose programos taškuose, kad patikrintumėte kodą, ten nustatykite pertraukos taškus. Pertraukos taškus galite nustatyti beveik bet kurioje kodo vietoje. Tai apima kintamųjų deklaracijas, išraiškas ir komentarus. Bet jūs negalite nustatyti lūžio taškų funkcijų deklaracijose.

Sukurti pertraukos tašką yra gana paprasta. Kai perkeliate pelę į kairę eilučių numerių pusę, kiekvienoje eilutėje pasirodo raudonas apskritimas. Kode nurodykite eilutės numerį, į kurį norite įterpti lūžio tašką. Tada spustelėkite tą eilutę, kad pridėtumėte lūžio tašką:

Viduje LŪŽIO TAŠKAI skiltyje rasite visus jūsų projekte įgalintus lūžio taškus. Čia galėsite tvarkyti, redaguoti ir išjungti lūžio taškus. Taip pat galite sustabdyti kodą, kai atsiranda išimtis arba nepagautų išimčių. Tai leidžia patikrinti problemą prieš baigiant procesą.

Pažiūrėkime, kaip veikia lūžio taškai. Spustelėkite Paleisti piktogramą, kad pradėtumėte derinimo sesiją. Programa pristabdys pirmąją pertraukos tašką ir pateiks tikrinimo vertę:

Galite spustelėti Tęsti piktogramą (arba paspauskite F5), kad perkeltumėte programą į kitą pertraukos tašką. Tai tęsis tol, kol pasieksite programos pabaigą.

„TypeScript“ derinimas naudojant šaltinio žemėlapius

Kadangi „Typescript“ ir toliau populiarėja, „Node.js“ projektų, parašytų „TypeScript“, skaičius neabejotinai didės. Laimei, taip pat galite derinti „TypeScript“ pagrįstus projektus naudodami VS kodą.

Pirmiausia sukurkite a tsconfig.json failą savo projekto šakniniame kataloge (jei jis dar nesukurtas) ir įgalinkite šaltinio žemėlapius:

{ "kompiliatoriaus parinktys": { "sourceMaps": tiesa }}

Tada pridėkite vykdomą procesą ir nustatykite pertraukos taškus savo „TypeScript“ faile. „Visual Studio Code“ suras šaltinio žemėlapius ir juos naudos.

Galite aiškiai nurodyti VS Code, kur rasti šaltinio žemėlapius. Norėdami tai padaryti, pridėkite an outFiles atributą paleidimo konfigūracijos faile ir nukreipkite jį į tikslią šaltinio žemėlapių vietą:

{ 
"versija": "0.2.0", 
"konfigūracijos": [ { 
"tipas": "mazgas", 
"prašymas": "paleisti", 
"vardas": "Paleisti programą", 
"praleisti failus": [ "/**" ], 
"programa": „${workspaceFolder}\\index.js“, 
"outFiles": „${workspaceFolder}\\index.js“, 
 } 
 ]
}

Jei naudojate ts-mazgas jei norite vykdyti projektą be kūrimo žingsnio, vietoj anksčiau pateiktos konfigūracijos naudokite šią:

{ 
"versija": "0.2.0", 
"konfigūracijos": [ { 
"tipas": "pwa-mazgas", 
"prašymas": "paleisti", 
"vardas": "Paleisti serverį", 
"praleisti failus": [ "/**" ], 
"runtimeArgs": [ "-r", "ts-mazgas / registras" ], 
"argai": [ „${workspaceFolder}/src/server.ts“ ] 
 }]
}

Kadangi nėra programos atributo, vykdymo laikas args registrai ts-mazgas kaip „TypeScript“ failų tvarkytojas. Pirmasis argumentas, kad args yra programos įvesties failas. Dabar galite pradėti derinimo sesiją. Jei kuriate naudodami „vanilla JavaScript“ arba „front-end“ sistemą, taip pat galite suderinkite JavaScript kodą naršyklėje.

Kitos „Visual Studio Code“ funkcijos

„Visual Studio Code“ yra galingas šaltinio kodo rengyklė su nuostabiomis funkcijomis. Apėmėme „VS Code“ integruotą derinimo įrankį. Taip pat parodėme, kaip galite jį naudoti norėdami derinti savo Node.js programą.

Tačiau „VS Code“ yra daug kitų patogių funkcijų. Nors kai kurie iš jų jums gali būti pažįstami, kai kurie jums gali būti visiškai nauji. Tokiu atveju jums gali būti įdomu sužinoti apie šias funkcijas ir kaip jomis naudotis.