VS Code extensies voor front end

9

NOVEMBER, 2018

Front end
VS Code
Extensies

Visual Studio Code, door velen aanbevolen als de beste Editor heeft erg veel extensies te bieden. Je kunt ze inzien in een Extension-store, zoals de App store voor Apple voor je apps op je telefoon. Er zijn extensies voor debugging, formatteren, key maps, verschillende technieken (zoals github, docker, azure), code snippets en vele andere categorieën.

We hebben het hier vooral over extensies die interessant zijn voor Front end developers. In ieder geval developers die grotendeels werken met opmaaktalen, style sheets en JavaScript en haar frameworks. Er zijn veel inzendingen geweest van echt interessante extensies in VS Code om te helpen bij een efficiënte en eenvoudigere front-end ontwikkeling. Dit laat ook zien hoe sterk de community het programma ondersteunt.

“Gebruik jij deze extensies ook? Of heb je misschien nog goede toevoegingen aan deze lijst?”

Live Server

Live Server

Deze extensie creëert een lokale ontwikkelingsserver voor static en dynamische pagina’s. Met deze extensie verschijnt er een startknop op je taakbalk, zodat jouw code kunt uitvoeren op een liveserver. Daarbij heeft het nog een handige toevoeging: een Live Reload, waarmee de pagina opnieuw wordt geladen als je jouw werk opslaat.

Live Sass Compiler

Live Sass Compiler

Een extensie die jouw SCSS-bestanden kan omzetten naar CSS-bestanden net zo gemakkelijk als node-sass. Met een ‘watch-my-sass’-knop op de taakbalk kan het een realtime voorbeeld van de stijlen in je gewenste browser weergeven, ook met een Live Reload-functie, zoals de live server extensie.

JavaScript snippets

JavaScript code Snippets

Met meer dan 2 miljoen downloads, waarschijnlijk de populairste extensie om JavaScript code snippets in ECMAscript syntax te tonen tijdens het gebruik van JavaScript en TypeScript bestanden. Het ondersteunt meerdere JavaScript frameworks en libraries, zoals Vue, React en Angular.

npm

npm

Dit is de officiële Node Package Manager ondersteuning voor VS Code. Het helpt de gebruiker om een package.json bestand gemakkelijk te beheren. Het waarschuwt je voor dependencies die herkend zijn, maar niet geïnstalleerd of andersom. Het geeft ook afwijkingen in eerdere versies of packages aan en zorgt ook voor handige sneltoetsen voor npm commands.

ESLint

ESLint

Voor al jouw linting van JavaScript en jsx code. Het zorgt ervoor dat jouw code aan de standaarden voldoen, zoals de positionering en meer. Het is een van de meest gedownloade extensie in VS Code met bijna 12 miljoen downloads.

Prettier

Prettier

Deze populaire extensie is al meer dan 4 miljoen keer gedownload. Het zorgt voor prettig leesbare JavaScript code met behulp van kleuren. Er zijn veel vergelijkbare extensies voor deze functie, maar ‘Prettier’ of ‘Beautify’ zijn wel de meest gebruikte extensies.

CSS Peek

CSS Peek

Deze extensie helpt je als je bezig bent met classes en ID’s voor een bepaald element. Het geeft aan welke stijlen er al zijn toegepast aan de betreffende ID en bespaart je veel tijd met het heen en weer gaan tussen html en css bestanden. Met een druk op de knop ben je bij het juiste onderdeel in het css bestand die daaraan gekoppeld is. Dit is vooral handig voor de programmeur die op een klein (en enkel) scherm werkt, al zijn die er maar weinig.

Angular 7 snippets

Angular 7 Snippets

Voor de Angular Developers onder ons onmisbaar. Dit is de officiële Angular 7 snippets extensie voor VS Code. Het maakt het werken met Angular een stuk gemakkelijker. Het voorspelt de code die je wilt typen en met een auto-complete functie verhoogt het jouw productiviteit. Het ondersteunt TypeScript, RxJS, Angular Material en meer. Als je bezig bent met een Angular project, is dit een waardevolle extensie.

Vetur

Vetur

De officiële extensie van Vue.js voor VS Code. Vetur heeft error-checking, auto-complete en ondersteuning om snippets te maken. Gebruikers krijgen ook het laatste nieuws over updates, meetups en conferenties over Vue.

Debugger for Chrome

Debugger for Chrome

Op het moment de meest gebruikte extensie van VS Code. Het helpt je met het debuggen van JavaScript code in jouw chrome browser, direct vanuit VS Code. Het heeft een groot aantal toegewijde bijdragers en zorgt ervoor dat veel dingen gemakkelijker worden gemaakt voor jou als front end developer.

Hoe krijg ik deze extensies?

  • Allereerst, download VS Code. Als je dat nog niet hebt gedaan.
  • In VS Code, klik je in de linkerbalk op het vierkante pictogram. Daarna kun je zoeken naar de gewenste extensie en met een druk op de groene ‘install’ knop een installatie starten.

Natuurlijk zijn dit echter maar enkele voorbeelden en zijn er nog talloze andere goede extensies. Dit zijn echter in onze ogen onmisbare extensies voor front-end developers. Misschien zitten er hier enkele nieuwe voor je bij, maar misschien mis je jouw favoriete extensie. Stuur anders een mail, dan zetten we die er alsnog bij.

JavaScript
Visual Studio Code