8 Výkonné rozšírenia kódov Visual Studio pre vývojárov Front-end

Hoci spoločnosť Microsoft vydala prvú stabilnú verziu Visual Studio Code, jej výkonného editora kódu iba pred niekoľkými mesiacmi, do marca 2016 už má k dispozícii množstvo rozšírení, ktoré môžu mať skúsenosti s kódovaním na ďalšej úrovni. oficiálne rozšírenia kódov Visual Studio sa nachádzajú v Visual Studio Code Marketplace, z ktorých mnohé môžu byť skvelou pomôckou pre webových vývojárov.

Pre tento príspevok som testoval veľa rozšírení kódu VS súvisiacich s vývojom front-endu a vytvoril zoznam tých, ktoré som našiel najviac intuitívne, ľahko použiteľné a pohodlné. Nie je to konečný zoznam všetkých. Urobte si čas na to, aby ste si prehliadli trh a uvidíte, čo vám môže ponúknuť, a to najmä preto, že ešte príde veľa veľkých rozšírení.

Ako nainštalovať rozšírenie kódu VS

Inštalácia rozšírenia je veľmi jednoduchá v programe Visual Studio Code, ako môžete robte to v rámci editora kódu. Vo VS Code Marketplace má každé rozšírenie svoju vlastnú stránku a v hornej časti tejto stránky nájdete príkaz, ktorý môžete nainštalovať dané rozšírenie.

Príkaz vždy začína reťazcom ext install Termín. Ak chcete nainštalovať rozšírenie, stačí lis CTRL + P vnútri kódu VS spustite panel Quick Open, kopírovať-prilepiť tento príkaz do nej a nakoniec reštartujte editor kódu aby nové rozšírenie fungovalo.

8 Výkonné rozšírenia kódov Visual Studio

HTML úryvky

Ak chcete často písať HTML v kóde Visual Studio, rozšírenie úryvkov HTML môže prísť ako užitočný nástroj, ako to pridáva prepracovanú podporu pre HTML. Hoci kód VS má základnú podporu pre HTML, ako napr syntax sfarbenie, rozšírenie Odchýlky HTML vie oveľa viac.

Pravdepodobne najužitočnejšou vlastnosťou tohto rozšírenia je to keď začnete písať názov značky HTML (bez štartovacieho uhla), úryvky HTML rýchlo zobrazí zoznam dostupných možností s krátkymi informáciami o každom z nich.

Keď kliknete na prvok, ktorý potrebujete, útržky kódu HTML pridávajú úplnú značku HTML5 s najbežnejšími vlastnosťami. Ak napríklad chcete do dokumentu pridať odkaz (anchor tag), stačí zadať do kódu VS, v rozbaľovacej ponuke vyberte správnu možnosť a úryvky HTML vložia potrebné úryvok do editora bez problémov.

Autor tohto rozšírenia tiež venuje pozornosť odstráneniu zastaraných prvkov, takže ak chcete použiť značku HTML, ktorú nemožno nájsť v popupnom zozname, stojí za to zistiť, či je stále platná alebo nie.
Dokončenie triedy HTML v CSS

Dokončenie triedy HTML CSS môže byť užitočnou príponou, ak potrebujete použiť mnoho Triedy CSS vo vašom projekte. Často sa stáva, že sme vývojári, že sme nie je úplne istý presným názvom triedy, ale len sedí v zadnej časti našej mysle ako pasívne vedomosti.

Toto inteligentné rozšírenie poskytuje riešenie tohto problému, pretože načíta názvy všetkých tried CSS v aktuálnom pracovnom priestore a zobrazí zoznam o nich.

Povedzme, že chcete vytvoriť web pomocou nadácie Zurb a chcete použiť malú mriežku. Nepamätáte si, ako sú presne pomenované triedy, ale viete, že majú sémantické názvy.

Vďaka dokončeniu triedy HTML CSS musíte začať iba písať slovo malý, a dostupné možnosti sa zobrazia na obrazovke naraz, takže môžete ľahko vybrať ten, ktorý potrebujete.
Zobrazenie v prehliadači

Zobrazenie v prehliadači je jednoduché, ale výkonné rozšírenie pre kód Visual Studio. Môže to uľahčiť rozvoj front-end tým, že vám to umožní rýchlo sa pozrite na výsledok vašej práce v prehliadači počas kódovania. Súbor HTML môžete otvoriť vo svojom predvolenom prehliadači priamo z kódu VS stlačením tlačidla CTRL + F1 klávesová skratka.

Všimnite si možnosť Zobraziť v prehliadači Podporuje iba HTML, takže ak chcete zobraziť svoje stránky, musíte otvoriť súbor HTML. vy nemôže priamo pristupovať k prehliadaču zo súboru CSS alebo JavaScript.
Debugger pre prehliadač Chrome

Debugger pre prehliadač Chrome bol postavený samotnou spoločnosťou Microsoft a v súčasnosti je to štvrté najčastejšie stiahnuté rozšírenie kódu jazyka Visual Studio.

Debugger pre Chrome umožňuje ladenie JavaScript v prehliadači Google Chrome bez opustenia editora kódu. To znamená, že nemusíte pracovať s prepisovaným jazykom JavaScript, ktorý prehliadač vidí, ale môžete vykonajte právo ladenia z pôvodných zdrojových súborov. Pozrite si túto demo, aby ste zistili, ako to funguje.

Rozšírenie má všetky funkcie slušné ladiace potreby, ako je nastavenie prerušenia, premenlivé sledovanie, krokovanie, praktická ladiaca konzola, a mnoho ďalších (pozri zoznam funkcií prvého vydania).

Ak chcete používať toto rozšírenie, musíte spustiť prehliadač Chrome povolené vzdialené ladenie, a nastaviť správne launch.json súboru. Toto môže chvíľu trvať, ale podrobné pokyny o tom, ako správne urobiť, nájdete na GitHub.
JSHint

Rozšírenie JSHint Visual Studio Code integruje populárnu linku JavaScript JSHint priamo do editora kódu, takže môžete byť o svojich chybách informovaní hneď, ako ich zaviažete. Predvolene rozšírenie JSHint používa predvolené možnosti linter, ktoré môžete prispôsobiť pomocou konfiguračného súboru.

Použitie tohto rozšírenia je pomerne jednoduché, pretože JSHint označuje chyby červenou farbou a oznámenia so zelenou podčiarknutou značkou. Ak chcete získať viac informácií o problémoch, stačí umiestniť kurzor myši nad podčiarknuté časti a JSHint bude plaviť popisom s popisom problému naraz.
úryvky kódu jQuery

Útržky kódy jQuery môžu výrazne zrýchliť vývoj rozhrania Visual Studio Code, pretože vám umožňuje rýchlo zapisovať jQuery bez základných syntaktických chýb. úryvky kódu jQuery v súčasnosti má okolo 130 dostupných úryvkov môžete spustiť zadaním pravého spúšťača.

Všetky jQuery úryvky, ale jeden začína s JQ prefix. Jedinou výnimkou je func spustiť to vloží do editora anonymnú funkciu.

Toto praktické rozšírenie je vhodnou pomôckou, keď si nie ste úplne istí, že máte správnu syntax a chcete ušetriť čas na kontrolu dokumentácie. Umožňuje tiež rýchle posúvanie dostupných možností.
altánok

Rozšírenie kódu Bower VS Code vám umožní intuitívnejšie pracovať s vývojom webu integrovaním správcu balíkov Bower do kódu Visual Studio.

Ak toto rozšírenie používate nemusíte prepínať medzi terminálom a editorom, ale môžete ľahko vykonávať úlohy riadenia balíčkov priamo v kóde Visual Studio.

Rozšírenie Bower vás prevedie vytváraním projektov bower.json a môžete tiež inštalovať, odinštalovať, vyhľadávať, aktualizovať balíky, spravovať vyrovnávaciu pamäť a vykonávať s ňou mnoho ďalších úloh (pozrite si celý zoznam funkcií).

Môžeš prístup k príkazom Bower spustením príkazovej palety stlačením tlačidla F1, písanie na stroji “altánok” do vstupného panela, kliknutím na “altánok” v rozbaľovacom zozname, ktorý sa zobrazí, a vybrať príslušný príkaz Bower.
História Git

História Git umožňuje postupujte podľa zmien v projekte Git v rámci kódu Visual Studio. Toto rozšírenie je obzvlášť užitočné, ak chcete prispieť k väčšiemu projektu Github a potrebujú spôsob, ako rýchlo zistiť zmeny ostatných vývojárov.

S rozšírením História git môžete nainštalovať zobraziť históriu celého súboru alebo a konkrétnej línii vo vnútri. Môžete tiež porovnať predchádzajúce verzie toho istého súboru.

Ak zadáte slovo, môžete pristupovať k príkazom súvisiacim s históriou Git “Git” do príkazovej palety (F1), vyberte “Git” v rozbaľovacom zozname a nakoniec vyberte príkaz, ktorý potrebujete. Poznač si to musíte otvoriť súbor z ktorých chcete zobraziť históriu, aby ste mohli vykonať akékoľvek kroky.