8 Kraftige Visual Studio-kodeutvidelser for frontend-utviklere

Selv om Microsoft utgav den første stabile versjonen av Visual Studio Code, har den kraftige kodeditoren bare noen måneder siden, allerede i mars 2016, det allerede mange utvidelser tilgjengelig som kan ta kodingserfaring til neste nivå. De Offisielle Visual Studio-kodeutvidelser er vert på Visual Studio Code Marketplace, hvorav mange kan være en god hjelp for webutviklere.

For dette innlegget testet jeg en haug med VS-kodeutvidelser knyttet til frontend-utvikling, og laget en liste over de jeg fant mest intuitiv, enkel å bruke og praktisk. Det er ikke en ultimate liste av alle. Ta deg tid til å bla gjennom markedsplassen for deg selv, og se hva mer det kan tilby deg, spesielt siden mange flotte utvidelser er ennå ikke kommet.

Slik installerer du VS-kodeutvidelser

Det er ganske enkelt å installere en utvidelse i Visual Studio Code, som du kan gjør det i kodeditoren. I VS Code Marketplace har hver utvidelse sin egen side, og du kan finne kommandoen du kan installere den oppgitte utvidelsen med på toppen av denne siden.

Kommandoen begynner alltid med ekstern installasjon begrep. For å installere en utvidelse, bare trykk CTRL + P inne i VS-koden for å starte Quick Open-panelet, Kopier-lim inn denne kommandoen inn i det, og til slutt start kodeditoren på nytt for å få den nye utvidelsen til å fungere.

8 Kraftige Visual Studio Code Extensions

HTML-utklipp

Hvis du ofte vil skrive HTML i Visual Studio Code, kan HTML-utdragets utvidelse komme som et praktisk verktøy, som det legger til omfattende støtte for HTML. Selv om VS-koden har grunnleggende støtte for HTML, for eksempel syntaksfarging, HTML-utdragets utvidelse kjenner mye mer.

Sannsynligvis er den mest nyttige funksjonen til denne utvidelsen det når du begynner å skrive inn navnet på en HTML-kode (uten startvinkelbeslag), HTML-utklipp raskt viser en liste av de tilgjengelige alternativene med en kort informasjon om hver.

Når du klikker på elementet du trenger, legger HTML Snippets den fulle HTML5-taggen med de vanligste egenskapene. Hvis du for eksempel vil legge til en lenke (ankermerke) i dokumentet, skriver du bare en en inn i VS-koden, velg det riktige alternativet i popup-boksen, og HTML-utklipp vil sette inn det nødvendige kutt ut i redaktøren din uten å måtte ha problemer.

Forfatteren av denne utvidelsen legger også merke til å fjerne utdaterte elementer, så hvis du vil bruke en HTML-kode som du ikke finner i popuplisten, er det verdt å sjekke om det fortsatt er gyldig eller ikke.
HTML CSS-klasse-fullføring

HTML CSS Class Completion kan være en nyttig utvidelse hvis du trenger å bruke mange CSS klasser i prosjektet ditt. Det skjer ofte med utviklere, at vi er ikke helt sikker i det eksakte navnet på en klasse, men det sitter bare på baksiden av vårt sinn som passiv kunnskap.

Denne smarte utvidelsen gir en løsning på dette problemet, som det henter navnene på alle CSS-klassene i det nåværende arbeidsområdet, og viser en liste om dem.

La oss si, du vil opprette et nettsted ved hjelp av Zurb Foundation, og du vil bruke det lille nettet. Du husker ikke hvordan klassene er nøyaktig navngitt, men du vet at de har semantiske navn.

Med HTML CSS-klasse-fullføring trenger du bare å begynne å skrive ordet liten, og de tilgjengelige alternativene vises på skjermen samtidig, slik at du enkelt kan velge den du trenger.
Vis i nettleser

Vis i Nettleser er en enkel, men kraftig forlengelse for Visual Studio-koden. Det kan forenkle utviklingen av utviklingen ved å tillate deg å Ta en rask titt på resultatet av arbeidet ditt i nettleseren mens du kodes. Du kan åpne HTML-filen i standard nettleseren din direkte fra VS-koden ved å trykke på CTRL + F1 hurtigtast.

Legg merke til at Vis i nettleser støtter bare HTML, så hvis du vil se nettstedet ditt må du ha HTML-filen åpen. Du kan ikke få tilgang til nettleseren direkte fra en CSS eller JavaScript-fil.
Debugger for Chrome

Debugger for Chrome ble bygd av Microsoft selv, og det er for tiden den fjerde mest brukte nedlastingen av Visual Studio Code.

Debugger for Chrome gjør det mulig å feilsøk JavaScript i Google Chrome uten å forlate kodeditoren. Dette betyr at du ikke trenger å jobbe med det transpirerte JavaScript nettleseren ser, men du kan Utfør feilsøkingen rett fra de opprinnelige kildefilene. Se denne demonstrasjonen for å se hvordan den fungerer.

Utvidelsen har alle funksjonene en anstendig feilsøkingsbehov, for eksempel brytepunktinnstilling, variabel visning, stepping, en Hendig feilsøkingskonsoll, og mange andre (se funksjonslisten over den første utgivelsen).

For å bruke denne utvidelsen må du starte Chrome med ekstern feilsøking aktivert, og sett opp en skikkelig launch.json fil. Sistnevnte kan ta en stund, men du kan finne detaljerte instruksjoner på GitHub om hvordan du skal gjøre det riktig.
JSHint

Visual Studio Kodens JSHint-utvidelse integrerer den populære JSHint JavaScript-linteren rett inn i kodeditoren, slik at du kan Vær informert om dine feil så snart du forplikter dem. Som standard bruker JSHint-utvidelsen standardvalgene til linteren som du kan tilpasse ved hjelp av en konfigurasjonsfil.

Bruken av denne utvidelsen er ganske enkel, da JSHint markerer feilene med rødt, og meldingene med en grønn understreke. Hvis du vil ha mer informasjon om problemene, holder du bare over de understrekkede delene, og JSHint vil flyte en etikett med beskrivelsen av problemet på en gang.
jQuery-kodeutdrag

jQuery Code Snippets kan i stor grad øke hastigheten på frontend-utviklingen i Visual Studio Code, da det lar deg skrive jQuery raskt uten grunnleggende syntaksfeil. jQuery-kodeutdrag har for tiden rundt 130 tilgjengelige utdrag du kan påkalle ved å skrive den riktige utløseren.

Alle jQuery-utklipp, men en begynner med Jq prefiks. Det ene unntaket er func utløse det legger inn en anonym funksjon i redaktøren.

Denne praktiske utvidelsen er en praktisk hjelp når du ikke er helt sikker på riktig syntaks, og vil spare tid for å sjekke dokumentasjonen. Det gjør det også enkelt å bla raskt gjennom de tilgjengelige alternativene.
Bower

Bower VS-kodeutvidelsen kan gjøre webutviklings arbeidsflyten mer intuitiv ved å integrere Bower-pakkeadministratoren i Visual Studio-koden.

Hvis du legger til denne utvidelsen, skal du bruke den trenger ikke å bytte frem og tilbake mellom terminalen og redaktøren, men du kan enkelt utføre dine pakkeadministrasjonsoppgaver rett inn i Visual Studio-koden.

Bower-utvidelsen fører deg gjennom opprettelsen av prosjektet ditt bower.json fil, og du kan også installere, avinstallere, søke, oppdatere pakker, administrere hurtigbuffer og utføre mange andre oppgaver med den (se full funksjonsliste).

Du kan få tilgang til Bower-relaterte kommandoer ved å starte kommandopaletten ved å trykke F1, typing “Bower” inn i inntastingsfeltet, klikk på “Bower” alternativet i rullegardinlisten som vises, og velg riktig Bower-kommando.
Git historie

Git History gjør det mulig å følg endringene av et Git-prosjekt inne i Visual Studio-koden. Denne utvidelsen er spesielt nyttig når du vil bidra til et større Github-prosjekt, og trenger en måte å raskt sjekke ut modifikasjoner andre utviklere gjort.

Med Git History-utvidelsen installert kan du se historien av en hel fil, eller a bestemt linje innsiden av den. Du kan også sammenlign tidligere versjoner av samme fil.

Du kan få tilgang til kommandoer relatert til Git History hvis du skriver ordet “Git” inn i kommandopalen (F1), velg “Git” i rullegardinlisten, og til slutt velge kommandoen du trenger. Noter det du må åpne filen som du vil se historien før du kan utføre handlinger på den.