8 Zmogljive razširitve kode Visual Studio za Front-End razvijalce

Čeprav je Microsoft izdal prvo stabilno različico kode Visual Studio, njegovega močnega urejevalnika kode pred nekaj meseci, do marca 2016, že ima na voljo veliko razširitev, ki lahko izkušnje kodiranja prenesejo na naslednjo raven. The uradne razširitve kode Visual Studio gostujejo v kodni tržnici Visual Studio, od katerih jih je veliko v pomoč spletnim razvijalcem.

Za to objavo sem preizkusil kup razširitev kode VS, povezanih z razvojem vmesnika, in sestavil seznam tistih, ki sem jih našel najbolj intuitiven, enostaven za uporabo in priročen. To ni končni seznam vseh. Vzemite si čas za brskanje po trgu in si oglejte, kaj vam lahko ponudi, še posebej, ker veliko velikih razširitev še ni prišlo.

Kako namestiti razširitve kode VS

Namestitev razširitve je v programu Visual Studio zelo preprosta, kot lahko to storite v urejevalniku kod. V trgovini s kodami VS ima vsaka razširitev svojo stran in na vrhu te strani lahko najdete ukaz, ki ga lahko namestite s podaljškom..

Ukaz se vedno začne z ext install obdobje. Če želite namestiti razširitev, samo pritisnite CTRL + P znotraj kode VS za zagon plošče Quick Open, copy-paste ta ukaz in končno znova zaženite urejevalnik kod novo delo za razširitev.

8 Zmogljive razširitve kode Visual Studio

Izrezki HTML

Če želite pogosto napisati HTML v kodeksu Visual Studio, lahko razširitev HTML odlomkov pride kot priročno orodje dodaja dodelano podporo za HTML. Čeprav ima VS koda osnovno podporo za HTML, kot je npr barvanje sintakse, razširitev HTML odlomkov ve veliko več.

Verjetno je najbolj uporabna značilnost te razširitve ko začnete vnašati ime oznake HTML (brez začetnega kotnega oklepaja), izrezki HTML hitro prikaže seznam razpoložljivih možnosti s kratkimi informacijami o vsaki.

Ko kliknete na element, ki ga potrebujete, odlomki HTML dodajo celotno oznako HTML5 s svojimi najpogostejšimi lastnostmi. Če želite na primer dodati dokument (sidrna oznaka), vtipkajte a v kodo VS, izberite ustrezno možnost v pojavnem oknu in izrezki HTML bodo vstavili potrebno odrezek v urejevalnik brez težav.

Tudi avtor te razširitve posveča pozornost odstranjevanju opuščenih elementov, zato, če želite uporabiti oznako HTML, ki je ne morete najti na pojavnem seznamu, je vredno preveriti, ali je še veljavna ali ne.
Dokončanje razreda CSS

Dokončanje CSS razreda HTML je lahko koristna razširitev, če morate uporabiti veliko Razredi CSS v vašem projektu. Pogosto se nam dogaja, da smo ni povsem prepričan v točno ime razreda, ampak samo sedi na zadnji strani našega uma kot pasivno znanje.

Ta pametna razširitev daje rešitev za ta problem, kot je pridobiva imena vseh razredov CSS v trenutnem delovnem prostoru in prikaže seznam o njih.

Recimo, da želite ustvariti spletno mesto z Zurb Foundation in želite uporabiti majhno mrežo. Ne spomnite se, kako so razredi natančno poimenovani, vendar veste, da imajo semantična imena.

Z HTML CSS Class Completion morate le začeti pisati besedo majhna, in razpoložljive možnosti se na zaslonu prikažejo hkrati, tako da lahko preprosto izberete tisto, ki jo potrebujete.
Prikaži v brskalniku

Pogled v brskalniku je preprosta, a zmogljiva razširitev za kodo Visual Studio. To lahko olajša razvoj front-end, saj vam omogoča hiter pregled rezultatov vašega dela v brskalniku med kodiranjem. Datoteko HTML lahko odprete v privzetem brskalniku neposredno iz kode VS s pritiskom na CTRL + F1 bližnjico na tipkovnici.

Upoštevajte ta pogled v brskalniku podpira samo HTML, Če želite videti svoje spletno mesto, morate imeti odprto datoteko HTML. Ti ne morejo neposredno dostopati do brskalnika iz datoteke CSS ali JavaScript.
Odpravljanje napak za Chrome

Razhroščevalnik za Chrome je zgradil Microsoft sam in trenutno je že četrta najbolj razširjena razširitev kode Visual Studio.

Razhroščevalnik za Chrome omogoča razhroščite JavaScript v brskalniku Google Chrome, ne da bi zapustili urejevalnik kode. To pomeni, da vam ni treba delati s pregledanim JavaScriptom, ki ga brskalnik vidi, vendar lahko izvedite debugging desno od izvirnih izvornih datotek. Oglejte si ta demo, da vidite, kako deluje.

Razširitev ima vsako funkcijo dostojne potrebe za odpravljanje napak, kot je npr nastavitev prelomne točke, opazovanje spremenljivk, koračanje, a priročna debug konzola, in mnogi drugi (oglejte si seznam funkcij prve izdaje).

Če želite uporabiti to razširitev, morate zagnati Chrome omogočeno je oddaljeno iskanje napak, in ustanovi pravo launch.json mapa. Slednje lahko traja nekaj časa, vendar lahko najdete podrobna navodila o tem, kako pravilno narediti GitHub.
JSHint

Razširitev JSHint Visual Studio Code integrira priljubljen JSHint JavaScript linter v urejevalnik kode, tako da lahko o svojih napakah obvestite takoj, ko jih objavite. Razširitev JSHint privzeto uporablja privzete možnosti linterja, ki jih lahko prilagodite s pomočjo konfiguracijske datoteke.

Uporaba te razširitve je precej enostavna, saj JSHint označuje napake z rdečo, obvestila pa z zeleno podčrtano. Če želite več informacij o težavah, le pokažite na podčrtane dele in JSHint bo naenkrat prikazal oznako z opisom težave..
jQuery Code Snippets

Odlomki kode jQuery lahko močno pospešijo razvoj front-end v kodi Visual Studio, saj vam omogoča hitro pisanje jQuery brez osnovnih sintaktičnih napak. jQuery Code Snippets trenutno ima okoli 130 razpoložljivih odrezkov pokličete lahko tako, da vnesete desni sprožilec.

Vsi odrezki jQuery se začnejo z jq predpona. Edina izjema je func sprožite to v urejevalnik vstavi anonimno funkcijo.

Ta priročna razširitev je priročna pomoč, če niste popolnoma prepričani o pravilni skladnji in želite prihraniti čas za preverjanje dokumentacije. Omogoča tudi hitro pomikanje po razpoložljivih možnostih.
Bower

Razširitev kode Bower VS lahko izboljša intuitivnost vašega spletnega razvojnega toka z integracijo upravitelja paketov Bower v kodo Visual Studio.

Če uporabite to razširitev ni treba preklapljati med terminalom in urejevalnikom, vendar lahko preprosto opravite svoje naloge upravljanja paketov prav v Visual Studio Code.

Razširitev Bower vas vodi skozi ustvarjanje vašega projekta bower.json datoteko, lahko pa tudi namestite, odstranite, poiščete, posodobite pakete, upravljate predpomnilnik in izvajate številne druge naloge (glejte celoten seznam funkcij)..

Ti lahko Dostopajte do ukazov, povezanih z Bowerjem, tako da zaženete ukazno paleto s pritiskom na F1, tipkanje “Bower” v vnosno vrstico, s klikom na “Bower” na spustnem seznamu, ki se prikaže, in izberete ustrezen ukaz Bower.
Zgodovina Git

Zgodovina Git omogoča sledite spremembam projekta Git v kodi Visual Studio. Ta razširitev je še posebej uporabna, če želite prispevati k večjemu projektu Github in potrebujete način za hitro preverjanje sprememb, ki so jih naredili drugi razvijalci.

Z namestitvijo razširitve zgodovine Git lahko ogled zgodovine celotne datoteke ali a posebno linijo znotraj njega. Lahko tudi primerjajte prejšnje različice iste datoteke.

Do ukazov, povezanih z zgodovino Git, lahko dostopate, če vnesete besedo “Git” v ukazno paleto (F1), izberite “Git” v spustnem seznamu in končno izberite ukaz, ki ga potrebujete. Upoštevajte, da datoteko morate odpreti pred katerim želite videti zgodovino, preden lahko izvedete kakšno dejanje na njem.