8 Kraftige Visual Studio-kodeudvidelser til front-end-udviklere

Selv om Microsoft udgav den første stabile version af Visual Studio Code, har den kraftige kode editor kun for nogle måneder siden, i marts 2016, allerede fået mange udvidelser til rådighed, der kan tage kodningserfaring til næste niveau. Det officielle Visual Studio-kodeudvidelser er hostet på Visual Studio Code Marketplace, hvoraf mange kan være en stor hjælp til webudviklere.

Til dette indlæg testede jeg en masse VS-kodeudvidelser relateret til front-end-udvikling og lavede en liste over dem, der fandt mig mest intuitiv, nem at bruge og praktisk. Det er ikke en ultimativ liste af alle. Tag dig tid til at gennemse markedspladsen for dig selv og se, hvad der mere kan tilbyde dig, især da mange gode udvidelser endnu ikke er kommet.

Sådan installeres VS-kodeudvidelser

Installation af en udvidelse er ret ligetil i Visual Studio Code, som du kan gør det inden for kode editoren. I VS Code Marketplace har hver udvidelse sin egen side, og du kan finde kommandoen, du kan installere den givne udvidelse med oven på denne side.

Kommandoen begynder altid med ekstern installation semester. For at installere en udvidelse, bare trykke CTRL + P inde i VS-kode for at starte Quick Open-panelet, Kopier-indsæt denne kommando ind i det og endelig genstart kodeditoren for at få den nye udvidelse til at fungere.

8 Kraftige Visual Studio Code Extensions

HTML-uddrag

Hvis du ofte vil skrive HTML i Visual Studio Code, kan HTML Snippets udvidelsen komme som et praktisk værktøj, som det tilføjer uddybende support til HTML. Selvom VS-koden har grundlæggende support til HTML, f.eks syntaksfarve, Udvidelsen HTML Snippets kender meget mere.

Sandsynligvis den mest nyttige funktion af denne udvidelse er det når du begynder at skrive navnet på en HTML-tag (uden startvinkelbeslag), HTML Snippets hurtigt viser en liste af de tilgængelige muligheder med en kort information om hver.

Når du klikker på det element, du har brug for, tilføjer HTML Snippets det fulde HTML5-tag med de mest almindelige egenskaber. Hvis du f.eks. Vil tilføje et link (anker tag) til dit dokument, skal du blot skrive en -en i VS-kode, vælg den rigtige indstilling i popup-feltet, og HTML-uddrag vil indsætte de nødvendige uddrag i din editor uden besvær.

Forfatteren af denne udvidelse lægger også vægt på at fjerne forældede elementer, så hvis du vil bruge et HTML-tag, som du ikke kan finde i popuplisten, er det værd at tjekke, om det stadig er gyldigt eller ej.
HTML CSS klasse fuldførelse

HTML CSS Class Completion kan være en nyttig udvidelse, hvis du skal bruge mange CSS klasser i dit projekt. Det sker ofte for os udviklere, at vi er ikke helt sikker i det nøjagtige navn på en klasse, men det sidder lige bag vores sind som passiv viden.

Denne smarte udvidelse giver en løsning på dette problem, som det henter navnene på alle CSS klasser i det aktuelle arbejdsområde og viser en liste om dem.

Lad os sige, du vil oprette et websted ved hjælp af Zurb Foundation, og du vil bruge det lille net. Du kan ikke huske, hvordan klasserne nøjagtigt hedder, men du ved, at de har semantiske navne.

Med HTML CSS klasse fuldførelse skal du kun begynde at skrive ordet lille, og de tilgængelige muligheder vises på skærmen med det samme, så du nemt kan vælge den, du har brug for.
Vis i Browser

Vis i Browser er en simpel men kraftig udvidelse til Visual Studio Code. Det kan lette front-end udvikling ved at tillade dig at Kig hurtigt på resultatet af dit arbejde i browseren, mens du kodes. Du kan åbne din HTML-fil i din standardbrowser direkte fra VS-koden ved at trykke på CTRL + F1 tastaturgenvej.

Bemærk, at Vis i browser understøtter kun HTML, så hvis du vil se dit websted, skal du have HTML-filen åben. Du kan ikke direkte få adgang til browseren fra en CSS eller JavaScript-fil.
Debugger til Chrome

Debugger for Chrome blev bygget af Microsoft selv, og det er for øjeblikket den 4. downloadede Visual Studio Code-udvidelse.

Debugger for Chrome gør det muligt at debug JavaScript i Google Chrome uden at forlade kodeditoren. Det betyder, at du ikke behøver at arbejde med det transpirerede JavaScript, som browseren ser, men du kan udfør fejlfinding lige fra de oprindelige kildefiler. Se denne demo for at se, hvordan det virker.

Udvidelsen har alle funktioner en anstændig debugger behov, såsom breakpoint indstilling, variabel watching, stepping, -en Handy debug konsol, og mange andre (se funktionslisten over den første udgave).

For at bruge denne udvidelse skal du starte Chrome med fjern debugging aktiveret, og oprette en ordentlig launch.json fil. Sidstnævnte kan tage et stykke tid, men du kan finde detaljerede instruktioner om GitHub om, hvordan du gør det korrekt.
JSHint

Visual Studio Code's JSHint-udvidelse integrerer den populære JSHint JavaScript-linter lige ind i kodeditoren, så du kan Få besked om dine fejl, så snart du begår dem. Som standard bruger JSHint-udvidelsen standardindstillingerne for linteren, som du kan tilpasse ved hjælp af en konfigurationsfil.

Brugen af denne udvidelse er ret ligetil, da JSHint markerer fejlene med rødt og meddelelserne med en grøn understrege. Hvis du vil have mere information om problemerne, skal du bare svæve over de understregede dele, og JSHint vil flyde en etiket med beskrivelsen af problemet på én gang.
jQuery Kode Snippets

jQuery Code Snippets kan i høj grad fremskynde udviklingen i fronten i Visual Studio Code, da det lader dig hurtigt skrive jQuery uden grundlæggende syntaksfejl. jQuery Kode Snippets har i øjeblikket rundt 130 tilgængelige uddrag du kan påberåbe ved at indtaste den rigtige udløser.

Alle jQuery uddrag, men man starter med JQ præfiks. Den ene undtagelse er den funk udløse det indsætter en anonym funktion i editoren.

Denne praktiske udvidelse er en praktisk hjælp, når du ikke er helt sikker på den korrekte syntaks, og du vil spare tid til at kontrollere dokumentationen. Det gør det også nemt at hurtigt rulle gennem de tilgængelige muligheder.
Bower

Bower VS-kodeudvidelsen kan gøre din webudviklingsarbejdsproces mere intuitiv ved at integrere Bower-pakkeadministratoren i Visual Studio Code.

Hvis du sætter denne udvidelse i brug, skal du behøver ikke at skifte frem og tilbage mellem terminalen og editoren, men du kan nemt udføre dine pakkehåndteringsopgaver lige inden for Visual Studio Code.

Bower-forlængelsen fører dig gennem oprettelsen af dit projekt bower.json fil, og du kan også installere, afinstallere, søge, opdatere pakker, administrere cache og udføre mange andre opgaver med det (se den fulde funktionsliste).

Du kan adgang Bower-relaterede kommandoer ved at starte kommandopaletten ved at trykke på F1, maskinskrivning “Bower” i indgangslinjen, klik på knappen “Bower” mulighed i rullelisten, der vises, og vælge den relevante Bower-kommando.
Git historie

Git History gør det muligt at Følg ændringerne i et Git-projekt i Visual Studio Code. Denne udvidelse er især nyttig, når du vil bidrage til et større Github-projekt, og har brug for en måde at hurtigt tjekke de ændringer, andre udviklere har foretaget.

Med Git History-udvidelsen installeret kan du se historien af en hel fil, eller a bestemt linje indersiden af det. Du kan også sammenlign tidligere versioner af samme fil.

Du kan få adgang til kommandoerne relateret til Git History, hvis du skriver ordet “git” ind i kommandopaletten (F1), vælg “git” inde i dropdown listen, og endelig vælge den kommando du har brug for. Noter det du skal åbne filen hvoraf du vil se historien, før du kan udføre handlinger på den.