8 Kraftfulla Visual Studio Code Extensions för Front-End Developers

Även om Microsoft släppte den första stabila versionen av Visual Studio Code, har den kraftfulla kodredigeraren för några månader sedan, redan i mars 2016, det redan många tillägg som kan ta kodningserfarenhet till nästa nivå. De officiella Visual Studio-kodtillägg finns på Visual Studio Code Marketplace, varav många kan vara till stor hjälp för webbutvecklare.

För det här inlägget testade jag en massa VS-kodförlängningar relaterade till front-end-utveckling och gjorde en lista över dem som jag hittade mest intuitivt, lätt att använda och bekvämt. Det är inte en ultimat lista av alla. Ta dig tid att bläddra på marknaden själv och se vad det kan erbjuda dig, särskilt eftersom många stora tillägg ännu inte kommer.

Så här installerar du VS-kodförlängningar

Installera ett tillägg är ganska enkelt i Visual Studio Code, som du kan gör det inom kodredigeraren. På VS-kodmarknaden har varje tillägg en egen sida och du kan hitta kommandot du kan installera den angivna tillägget med ovanpå den här sidan.

Kommandot börjar alltid med ext installera termin. För att installera en förlängning, bara Tryck CTRL + P inuti VS-koden för att starta panelen Quick Open, kopiera-klistra in det här kommandot in i det och slutligen starta om kodredigeraren att göra det nya tillägget.

8 Kraftfulla Visual Studio Code Extensions

HTML Snippets

Om du ofta vill skriva HTML i Visual Studio Code kan HTML-utdragets tillägg komma som ett användbart verktyg, som det lägger till utarbetat stöd för HTML. Även om VS-koden har grundläggande stöd för HTML, t.ex. syntaxfärgning, HTML-utdragets förlängning vet mycket mer.

Förmodligen är den mest användbara funktionen i denna förlängning det när du börjar skriva namnet på en HTML-tagg (utan startvinkelbeslag), HTML-utdrag snabbt visar en lista av de tillgängliga alternativen med en kort information om var och en.

När du klickar på det element du behöver, lägger HTML Snippets hela HTML5-taggen med de vanligaste egenskaperna. Om du till exempel vill lägga till en länk (ankerkod) i ditt dokument, skriv bara ett en in i VS-kod, välj det rätta alternativet i popup-rutan och HTML-utdrag sätter in det nödvändiga snippet i din redaktör utan några krångel.

Författaren till den här utvidgningen uppmärksammar också att ta bort avlägsna element, så om du vill använda en HTML-tagg som du inte hittar i popuplistan är det värt att kolla om det fortfarande är giltigt eller inte.
HTML CSS-klassfärdigställande

HTML CSS Class Completion kan vara ett användbart tillägg om du behöver använda många CSS klasser i ditt projekt. Det händer ofta för oss utvecklare, att vi är inte helt säkert i det exakta namnet på en klass, men det sitter bara bakom oss som passiv kunskap.

Denna smarta förlängning ger en lösning på detta problem, som det hämtar namnen på alla CSS-klasser i den aktuella arbetsytan och visar en lista om dem.

Låt oss säga, du vill skapa en webbplats med hjälp av Zurb Foundation, och du vill använda det lilla nätet. Du kommer inte ihåg hur klasserna exakt heter, men du vet att de har semantiska namn.

Med HTML CSS Class Completion behöver du bara börja skriva in ordet små, och de tillgängliga alternativen visas på din skärm samtidigt, så du kan enkelt välja den du behöver.
Visa i webbläsare

Visa i webbläsare är en enkel men kraftfull förlängning för Visual Studio-kod. Det kan underlätta framsidans utveckling genom att tillåta dig att titta snabbt på resultatet av ditt arbete i webbläsaren medan du kodar. Du kan öppna din HTML-fil i din standardwebbläsare direkt från VS-koden genom att trycka på CTRL + F1 tangentbordsgenväg.

Observera att Visa i webbläsare stöder endast HTML, så om du vill se din webbplats måste du ha HTML-filen öppen. Du kan inte direkt komma åt webbläsaren från en CSS- eller JavaScript-fil.
Debugger för Chrome

Debugger för Chrome byggdes av Microsoft själv, och det är för närvarande den 4: e mest nedladdade Visual Studio-koden.

Debugger för Chrome gör det möjligt att felsöka JavaScript i Google Chrome utan att lämna kodredigeraren. Det betyder att du inte behöver arbeta med den transpirerade JavaScript som webbläsaren ser, men du kan Utför felsökningen direkt från de ursprungliga källfilerna. Se den här demoen för att se hur den fungerar.

Utvidgningen har varje funktion en anständig debugger-behov, till exempel brytpunktsinställning, variabel tittning, stegning, en praktisk debug-konsol, och många andra (se funktionslistan över den första utgåvan).

För att kunna använda den här utvidgningen måste du starta Chrome med fjärrfelsökning aktiverat, och ställa in ett ordentligt launch.json fil. Det senare kan ta en stund, men du kan hitta detaljerade instruktioner om GitHub om hur du gör det korrekt.
JSHint

Visual Studio-kodens JSHint-förlängning integrerar den populära JSHint JavaScript-linsen direkt i kodredigeraren, så du kan Var informerad om dina fel så snart du begår dem. Som standard använder JSHint-förlängningen standardalternativen för linteren som du kan anpassa med hjälp av en konfigurationsfil.

Användningen av denna förlängning är ganska enkel, eftersom JSHint markerar felet med rött och meddelandena med en grön undertryckning. Om du vill ha mer information om problemen, bara sväva över de understrukna delarna, och JSHint kommer att flyta en etikett med beskrivningen av problemet på en gång.
jQuery kodfragment

jQuery Code Snippets kan kraftigt påskynda utvecklingen i fronten i Visual Studio Code, eftersom det låter dig skriva jQuery snabbt utan grundläggande syntaxfel. jQuery kodfragment har för närvarande runt 130 tillgängliga snippets du kan åberopa genom att skriva rätt utlösare.

Alla jQuery snippets men en börjar med jQ prefix. Det enda undantaget är func utlösa det infogar en anonym funktion i redigeraren.

Denna praktiska tillägg är en praktisk hjälp när du inte är helt säker på rätt syntax och vill spara tid för att kontrollera dokumentationen. Det gör det också enkelt att snabbt bläddra igenom de tillgängliga alternativen.
Lövsal

Bower VS-kodförlängningen kan göra ditt webbutvecklings arbetsflöde mer intuitivt genom att integrera Bower-pakethanteraren i Visual Studio-kod.

Om du lägger till den här tillägget använder du dig behöver inte växla fram och tillbaka mellan terminalen och redigeraren, men du kan enkelt utföra dina pakethanteringsuppgifter direkt i Visual Studio Code.

Bower-förlängningen leder dig genom att skapa ditt projekt bower.json fil, och du kan också installera, avinstallera, söka, uppdatera paket, hantera cache och utföra många andra uppgifter med det (se fullständig funktionslista).

Du kan Hämta Bower-relaterade kommandon genom att starta kommandopalen genom att trycka F1, skriver “Lövsal” i inmatningsfältet, klicka på “Lövsal” alternativet i rullgardinsmenyn som visas och välja lämplig Bower-kommando.
Git History

Git History gör det möjligt att Följ ändringarna i ett Git-projekt i Visual Studio Code. Denna förlängning är särskilt användbar när du vill bidra till ett större Github-projekt, och behöver ett sätt att snabbt kolla på de ändringar som andra utvecklare gjort.

Med Git History-förlängningen installerad kan du visa historiken av en hel fil, eller a särskild linje inuti den. Du kan också jämför tidigare versioner av samma fil.

Du kan komma åt kommandon relaterade till Git History om du skriver ordet “Git” in i kommandopalen (F1), välj “Git” inuti listrutan, och slutligen välja det kommando du behöver. Anteckna det du måste öppna filen av vilka du vill se historiken innan du kan utföra några åtgärder på den.