8 Výkonné rozšíření Visual Studio Code pro přední vývojáře

Přestože společnost Microsoft vydala první stabilní verzi kódu Visual Studio, jeho výkonného editoru kódu pouze před několika měsíci, do března 2016, má již k dispozici mnoho rozšíření, která mohou mít zkušenosti s kódováním na další úroveň. oficiální rozšíření Visual Studio Code jsou umístěny na Visual Studio Code Marketplace, z nichž mnohé mohou být velkou pomocí pro webové vývojáře.

Pro tento příspěvek jsem testoval spoustu rozšíření VS kódu souvisejících s vývojem front-endu a vytvořil seznam těch, které jsem našel nejvíc intuitivní, snadno ovladatelný a pohodlný. Není to konečný seznam všech. Udělejte si čas na procházení trhu pro sebe a zjistěte, co vám ještě může nabídnout, a to zejména proto, že ještě zbývá mnoho velkých rozšíření..

Jak nainstalovat rozšíření kódu VS

Instalace rozšíření je v programu Visual Studio přímočará to v editoru kódu. Na tržišti VS Code Marketplace má každá pobočka svou vlastní stránku a příkaz, který můžete nainstalovat, naleznete nahoře na této stránce.

Příkaz vždy začíná znakem ext instalace období. Chcete-li nainstalovat rozšíření, stačí lis CTRL + P uvnitř VS Code pro spuštění panelu Quick Open, copy-paste tento příkaz a nakonec restartujte editor kódů nové rozšíření.

8 Výkonné rozšíření Visual Studio Code

Úryvky HTML

Pokud chcete často psát HTML v kódu Visual Studio, může rozšíření HTML Snippets přijít jako užitečný nástroj, stejně jako to přidává propracovanou podporu pro HTML. Ačkoli VS kód má základní podporu pro HTML, takový jak syntaxe zbarvení, Rozšíření HTML Snippets zná mnohem více.

Pravděpodobně nejužitečnějším rysem tohoto rozšíření je to když začnete psát název značky HTML (bez počáteční úhlové závorky), HTML Snippets rychle zobrazí seznam dostupných možností s krátkými informacemi o každém z nich.

Když kliknete na prvek, který potřebujete, HTML úryvky přidá plnou HTML5 značku s nejběžnějšími vlastnostmi. Chcete-li například do dokumentu přidat odkaz (kotevní značku), stačí zadat znak A do VS kódu, vyberte správnou volbu ve vyskakovacím okně a HTML úryvky vloží potřebné Úryvek do editoru bez jakýchkoliv potíží.

Autor tohoto rozšíření také věnuje pozornost odstranění zastaralých prvků, takže pokud chcete použít značku HTML, kterou nelze najít v rozevíracím seznamu, je vhodné zjistit, zda je stále platná nebo ne..
Dokončení třídy HTML CSS

Dokončení HTML CSS třídy může být užitečným rozšířením, pokud potřebujete použít mnoho Třídy CSS ve vašem projektu. Často se to stává vývojářům, kterým jsme není zcela jistý přesný název třídy, ale to jen sedí v zadní části naší mysli jako pasivní znalosti.

Toto inteligentní rozšíření poskytuje řešení tohoto problému načítá názvy všech tříd CSS v aktuálním pracovním prostoru a zobrazí seznam o nich.

Řekněme, že chcete vytvořit stránku pomocí nadace Zurb Foundation a chcete použít malou mřížku. Nepamatujete si, jak jsou třídy přesně pojmenovány, ale víte, že mají sémantická jména.

S dokončením HTML CSS Class stačí začít psát slovo malý, a dostupné možnosti se objeví na obrazovce najednou, takže můžete snadno vybrat ten, který potřebujete.
Zobrazit v prohlížeči

Zobrazení v prohlížeči je jednoduché, ale výkonné rozšíření pro Visual Studio Code. To může usnadnit front-end vývoj tím, že vám umožní Při kódování se rychle podívejte na výsledek vaší práce v prohlížeči. Soubor HTML můžete otevřít ve výchozím prohlížeči přímo z kódu VS stisknutím klávesy CTRL + F1 klávesová zkratka.

Všimněte si, že zobrazení v prohlížeči podporuje pouze HTML, takže pokud chcete vidět vaše stránky, musíte mít otevřený soubor HTML. Vy nelze přímo přistupovat k prohlížeči z CSS nebo JavaScript souboru.
Debugger pro Chrome

Debugger pro Chrome byl postaven samotným Microsoftem a je to v současné době 4. nejčastěji stahované rozšíření Visual Studio Code.

Debugger pro Chrome umožňuje ladění JavaScriptu v prohlížeči Google Chrome bez opuštění editoru kódu. To znamená, že nemusíte pracovat s JavaScriptem, který prohlížeč vidí, ale můžete provést ladění přímo z původních zdrojových souborů. Podívejte se, jak to funguje.

Rozšíření má všechny funkce slušné potřeby ladění, jako například nastavení bodu zlomu, variabilní sledování, krokování, A praktická ladicí konzole, a mnoho dalších (viz seznam funkcí první verze).

Chcete-li použít toto rozšíření, je třeba spustit prohlížeč Chrome vzdálené ladění povoleno, a nastavit vlastní launch.json soubor. Tohle může chvíli trvat, ale podrobné pokyny o GitHubu najdete na tom, jak to správně udělat.
JSHint

Visual Studio Code JSHint rozšíření integruje populární JSHint JavaScript linter přímo do editoru kódu, takže můžete informujte se o svých chybách, jakmile je spácháte. Ve výchozím nastavení používá rozšíření JSHint výchozí možnosti linter, které můžete přizpůsobit pomocí konfiguračního souboru.

Použití tohoto rozšíření je poměrně jednoduché, protože JSHint označí chyby červeně a oznámení se zeleným podtržením. Chcete-li získat více informací o problémech, přejděte na podtržené části a JSHint najednou vydá popisek s popisem problému najednou.
jQuery Kód Snippets

jQuery Code Snippets mohou výrazně urychlit vývoj front-endu v Visual Studio Code, protože vám umožní rychle psát jQuery bez základních chyb syntaxe. jQuery Kód Snippets má v současnosti 130 dostupných úryvků můžete vyvolat zadáním pravého spouštěče.

Všechny jQuery úryvky, ale jeden začátek jq předpona. Jedinou výjimkou je func spusťte to vloží anonymní funkci do editoru.

Toto šikovné rozšíření je pohodlná pomoc, když si nejste zcela jisti správnou syntaxí a chcete ušetřit čas na kontrolu dokumentace. Umožňuje také rychlé procházení dostupných možností.
Altánek

Rozšíření Bower VS Code vám umožní intuitivnější vývoj pracovního postupu pro web díky integraci správce balíčků Bower do kódu Visual Studio.

Pokud toto rozšíření použijete nemusíte přepínat mezi terminálem a editorem, ale můžete snadno provádět úlohy správy balíčků přímo v kódu Visual Studio.

Prodloužení Bower vás provede vytvořením projektu bower.json můžete také nainstalovat, odinstalovat, vyhledávat, aktualizovat balíčky, spravovat mezipaměť a provádět s nimi mnoho dalších úkolů (viz úplný seznam funkcí).

Můžeš spusťte příkazy související s Bower spuštěním příkazové palety stisknutím F1, psaní na stroji “Altánek” do vstupního panelu, kliknutím na “Altánek” v rozevíracím seznamu, který se objeví, a vybrání příslušného příkazu Bower.
Historie Git

Git History umožňuje sledovat změny projektu Git uvnitř kódu Visual Studio. Toto rozšíření je zvláště užitečné, když chcete přispět k většímu projektu Github a potřebují způsob, jak rychle zkontrolovat změny provedené jinými vývojáři.

S rozšířením Git History můžete nainstalovat zobrazit historii celého souboru nebo a řádek uvnitř. Můžete také porovnat předchozí verze stejného souboru.

Pokud zadáte slovo, můžete přistupovat k příkazům souvisejícím s Git History “Gite” do Palety příkazů (F1), Vybrat “Gite” uvnitř rozevíracího seznamu a nakonec vyberte příkaz, který potřebujete. Všimněte si, že musíte soubor otevřít Chcete-li zobrazit historii, než budete moci provádět jakékoli akce.