8 Võimas Visual Studio koodi laiendused esiotsa arendajatele

Kuigi Microsoft avaldas Visual Studio Code'i esimese võimsa koodiredaktori esimese stabiilse versiooni alles paar kuud tagasi, on 2016. aasta märtsiks juba olemas palju laiendusi, mis võivad kodeerimiskogemuse järgmisele tasemele viia. The ametlikud Visual Studio koodilaiendid on majutatud Visual Studio Code Marketplace'is, millest paljud võivad olla veebiarendajatele suureks abiks.

Selle postituse jaoks testisin ma hulgaliselt VS-koodi laiendusi, mis olid seotud esiotsa arendamisega, ja koostasin nimekirja neist, keda kõige rohkem leidsin intuitiivne, lihtne kasutada ja mugav. See ei ole lõplik nimekiri kõigi poolt. Võtke aega, et sirvida end turul ja vaadata, mida veel teile pakkuda saab, eriti kuna paljud suured laiendused on veel tulemas.

Kuidas paigaldada VS-koodi laiendused

Laienduse installimine on Visual Studio koodis nii lihtne kui võimalik tehke seda koodiredaktoris. VS-koodi turuplatsil on igal laiendil oma leht ja selle lehekülje peal olevale käsule võite leida antud laienduse..

Käsk algab alati ext install tähtajaks. Laiendi installimiseks lihtsalt vajutage CTRL + P Kiire avamise paneeli käivitamiseks VS koodi sees, kopeerige see käsk ja lõpuks taaskäivitage koodiredaktor uue laiendustöö tegemiseks.

8 Võimas Visual Studio koodilaiendid

HTML-i väljavõtted

Kui soovite visuaalse stiili koodis sageli HTML-i kirjutada, võib HTML-i väljavõtte laiendus olla mugav vahend lisab HTML-i jaoks tugeva toetuse. Kuigi VS-koodil on HTML-i põhitoetus, näiteks süntaksi värvimine, HTML-i fragmentide laiend teab palju rohkem.

Tõenäoliselt on selle laienduse kõige kasulikum omadus see kui hakkate HTML-sildi nime kirjutama (ilma algusnurga klambrita), HTML-väljavõtted kiiresti kuvab loendi saadaolevate valikute kohta lühike teave iga kohta.

Kui klõpsate vajalikule elemendile, lisab HTML-i väljavõtted kogu HTML5-sildi kõige levinumate omadustega. Näiteks, kui soovite oma dokumendile linki (ankurkoodi) lisada, kirjuta lihtsalt a VS-koodis vali hüpikaknas õige valik ja HTML-i fragmendid sisestavad vajaliku koopia oma toimetajale ilma probleemideta.

Selle laienduse autor pöörab tähelepanu ka aegunud elementide eemaldamisele, nii et kui soovite kasutada hüpikaknas leidmatut HTML-märgist, tasub vaadata, kas see on endiselt kehtiv või mitte.
HTML CSS klassi lõpetamine

HTML CSS klassi lõpuleviimine võib olla kasulik pikendus, kui teil on vaja palju kasutada CSS klassid oma projektis. Sageli juhtub meie arendajatega, et me oleme ei ole klassi täpses nimes täiesti kindel, kuid see lihtsalt istub meelt taga, kui passiivne teadmine.

See nutikas laiendus annab sellele probleemile lahenduse tõmbab kõigi CSS klasside nimed kuvatakse praeguses tööruumis ja kuvatakse nende loend.

Oletame, et soovite luua saidi Zurb Foundationi abil ja soovite kasutada väikest võrku. Te ei mäleta, kuidas klassid on täpselt nimetatud, kuid te teate, et neil on semantilised nimed.

HTML CSS klassi lõpetamisega peate alustama ainult sõna kirjutamist väike, ja võimalikud valikud ilmuvad ekraanile korraga, nii et saate hõlpsasti valida soovitud.
Vaade brauseris

Vaade brauseris on lihtne, kuid võimas laiendus Visual Studio koodile. See võib hõlbustada front-end arengut, võimaldades teil vaadake kodeerimise ajal kiirelt oma töö tulemust brauseris. HTML-faili saate avada vaikebrauseris otse VS-koodist, vajutades nuppu CTRL + F1 kiirklahv.

Pange tähele, et vaade brauseris toetab ainult HTML-i, nii et kui soovite oma saiti näha, peate avama HTML-faili. Sina ei pääse otse brauserile CSS- või JavaScript-failist.
Chrome'i silumine

Chrome'i siluri ehitas ise Microsoft ja see on praegu neljas kõige sagedamini allalaaditav Visual Studio Code laiendus.

Chrome'i silumine võimaldab Google Chrome'is JavaScripti silumine koodi redaktorist lahkumata. See tähendab, et te ei pea töötama brauseri poolt nähtava transpripteeritud JavaScripti abil, kuid saate seda teha siluda otse algsest lähtefailist. Vaadake seda demot, et näha, kuidas see toimib.

Laiendusel on kõik funktsioonid, mis vajavad korralikku siluregulaatori vajadust murdepunkti seadistamine, muutuva vaatamise, astmestamise, a mugav debugikonsool, ja paljud teised (vt esimese väljaande funktsioonide loendit).

Selle laienduse kasutamiseks peate Chrome'i käivitama serveri silumine on lubatud, ja seadistage õige käivitada.json faili. Viimane võib mõneks ajaks aega võtta, kuid GitHubi kohta leiate üksikasjalikke juhiseid selle kohta, kuidas seda õigesti teha.
JSHint

Visual Studio Code'i JSHint laiendus ühendab populaarse JSHint JavaScript linteri otse koodiredaktorisse, nii et saate informeerige oma vigadest niipea, kui olete need toime pannud. Vaikimisi kasutab JSHint laiendaja linteri vaikesätteid, mida saab kohandada konfiguratsioonifaili abil.

Selle laienduse kasutamine on üsna lihtne, sest JSHint tähistab vead punaselt ja teated rohelise allakriipsutusega. Kui soovite küsimuste kohta rohkem teavet, siis vajuta allakriipsutatud osade kohal ja JSHint libistab märgise probleemi kirjeldusega korraga.
jQuery Koodilõigud

jQuery koodilõigud võivad oluliselt kiirendada Visual Studio koodi esiotsa arendamist, sest see võimaldab teil kiiresti kirjutada jQuery ilma põhiliste süntaksivigadega. jQuery Koodilõigud praegu on see ümber 130 saadaval olevat fragmenti võite pöörduda, kui sisestate õige päästiku.

Kõik jQuery väljavõtted, kuid üks algavad jq eesliide. Üks erand on funk seda käivitada lisab redaktorisse anonüümse funktsiooni.

See mugav laiendus on mugav abi, kui sa ei ole päris kindel õige süntaksiga ja tahad dokumentide kontrollimiseks aega säästa. Samuti võimaldab see hõlpsasti kiiresti sirvida olemasolevaid valikuid.
Bower

Bower VS koodilaiend võib muuta veebi arendamise töövoo intuitiivsemaks, integreerides Boweri pakettihalduri Visual Studio koodiga.

Kui te selle laienduse kasutate ei pea terminali ja toimetaja vahel edasi-tagasi liikuma, aga saate pakettide haldamise ülesandeid hõlpsasti teha Visual Studio koodis.

Boweri laiendus viib teid läbi oma projekti loomise bower.json saate installida, desinstallida, otsida, värskendada pakette, hallata vahemälu ja teha sellega palju muid ülesandeid (vt täielikku funktsioonide loendit).

Sa saad pääsete ligi Boweriga seotud käskudele, käivitades käsuriba vajutades F1, kirjutades “Bower” sisendribale, klõpsates nuppu “Bower” ilmuvast rippmenüüst ning valides vastava Boweri käsu.
Giti ajalugu

Git-ajalugu võimaldab jälgige Git projekti muutusi Visual Studio koodis. See laiendus on eriti kasulik, kui soovid osaleda suuremas Githubi projektis ja vajate viisi, kuidas kiiresti vaadata teisi arendajaid.

Paigaldatud Git History laiendiga saate vaadata ajalugu kogu failist või a konkreetne liin sees. Sa saad ka võrrelda eelmisi versioone sama faili.

Kui sisestate sõna, saate kasutada Git History'iga seotud käske “Git” käsupaletti (F1), valige “Git” rippmenüüst ja vali lõpuks vajalik käsk. Pange tähele, et peate faili avama millest sa tahad näha ajalugu enne, kui saate sellega mingeid toiminguid teha.