8 Krachtige Visual Studio-codelextensies voor front-end ontwikkelaars

Hoewel Microsoft de eerste stabiele versie van Visual Studio Code uitbracht, de krachtige code-editor slechts een paar maanden geleden, tegen maart 2016, heeft het al veel extensies beschikbaar die de codeerervaring naar een hoger niveau kunnen tillen. De officiële Visual Studio Code-uitbreidingen worden gehost in de Visual Studio Code Marketplace, waarvan vele een grote hulp kunnen zijn voor webontwikkelaars.

Voor deze post heb ik een aantal VS-code-uitbreidingen met betrekking tot front-end-ontwikkeling getest en een lijst gemaakt met de meest gebruikte intuïtief, gemakkelijk te gebruiken en handig. Het is geen ultieme lijst voor iedereen. Neem de tijd om zelf de markt te doorzoeken en kijk wat het nog meer kan bieden, vooral omdat er nog veel geweldige extensies moeten komen.

Hoe VS-code-uitbreidingen te installeren

Het installeren van een extensie is vrij eenvoudig in Visual Studio Code, als je kunt doe het in de code-editor. In de VS-codemarktplaats heeft elke extensie een eigen pagina en u kunt de opdracht vinden waarop u de extensie kunt installeren met bovenaan deze pagina.

Het commando begint altijd met de ext-installatie termijn. Om een extensie te installeren, gewoon druk op CTRL + P in de VS Code om het Quick Open-paneel te starten, kopieer deze opdracht erin en ten slotte herstart de code-editor om de nieuwe extensie te laten werken.

8 Krachtige Visual Studio-codelextensies

HTML-fragmenten

Als u vaak HTML wilt schrijven in Visual Studio-code, kan de extensie HTML-snippets een handige tool zijn voegt uitgebreide ondersteuning voor HTML toe. Hoewel de VS-code standaardondersteuning biedt voor HTML, zoals syntax kleuren, de extensie HTML-snippets weet veel meer.

Waarschijnlijk is de meest bruikbare eigenschap van deze extensie dat wanneer u begint met het typen van de naam van een HTML-tag (zonder de beginhoek), HTML-fragmenten snel geeft een lijst weer van de beschikbare opties met een korte informatie over elk.

Wanneer u op het gewenste element klikt, voegt HTML-fragmenten de volledige HTML5-tag toe met de meest voorkomende eigenschappen. Als u bijvoorbeeld een koppeling (ankertag) aan uw document wilt toevoegen, typt u gewoon een een in de VS-code, kies de juiste optie in het pop-upvenster en HTML-fragmenten voegen het benodigde in snippet in je editor zonder enige moeite.

De auteur van deze extensie let ook op het verwijderen van verouderde elementen, dus als u een HTML-tag wilt gebruiken die u niet kunt vinden in de pop-uplijst, is het de moeite waard om te controleren of deze nog steeds geldig is of niet.
HTML CSS Class Completion

HTML CSS Class Completion kan een nuttige extensie zijn als u er veel van moet gebruiken CSS-klassen in je project. Het overkomt ons regelmatig ontwikkelaars, dat zijn we niet helemaal zeker in de exacte naam van een klas, maar het zit gewoon in de rug van onze geest als passieve kennis.

Deze slimme uitbreiding biedt een oplossing voor dit probleem, zoals het haalt de namen van alle CSS-klassen op in de huidige werkruimte en geeft een lijst weer.

Laten we zeggen dat u een site wilt maken met behulp van Zurb Foundation en dat u het kleine raster wilt gebruiken. Je weet niet meer hoe de klassen exact worden genoemd, maar je weet dat ze semantische namen hebben.

Met HTML CSS Class Completion hoeft u alleen maar te beginnen met het typen van het woord klein, en de beschikbare opties verschijnen tegelijkertijd op uw scherm, zodat u eenvoudig degene kunt selecteren die u nodig hebt.
Bekijken in browser

View in Browser is een eenvoudige maar krachtige uitbreiding voor Visual Studio Code. Het kan de ontwikkeling van de front-end vergemakkelijken door u toe te staan bekijk snel het resultaat van uw werk in de browser tijdens het coderen. U kunt uw HTML-bestand rechtstreeks vanuit VS-code in uw standaardbrowser openen door op de CTRL + F1 Toetsenbord sneltoets.

Merk op dat View in Browser ondersteunt alleen HTML, dus als u uw site wilt zien, moet u het HTML-bestand openen. U kan de browser niet rechtstreeks benaderen vanuit een CSS- of JavaScript-bestand.
Debugger voor Chrome

Debugger voor Chrome is door Microsoft zelf gebouwd en het is momenteel de 4e meest gedownloade Visual Studio Code-extensie.

Debugger voor Chrome maakt het mogelijk om debug JavaScript in Google Chrome zonder de code-editor te verlaten. Dit betekent dat u niet hoeft te werken met het doorzichtige JavaScript dat de browser ziet, maar dat kan wel voer het foutopsporingsrecht uit vanuit de originele bronbestanden. Zie deze demo om te zien hoe het werkt.

De extensie heeft alle functies die een fatsoenlijke debugger nodig heeft, zoals breekpuntinstelling, variabel kijken, stappen, een handige debug-console, en vele anderen (zie de lijst met functies van de eerste release).

Als u deze extensie wilt gebruiken, moet u Chrome starten met debugging op afstand ingeschakeld, en maak een goede launch.json het dossier. Dit laatste kan een tijdje duren, maar je kunt gedetailleerde instructies vinden op GitHub over hoe je het goed kunt doen.
JSHint

De JSHint-extensie van Visual Studio Code integreert de populaire JSHint JavaScript-linter rechtstreeks in de codebewerker, dus u kunt dit doen op de hoogte worden gebracht van uw fouten zodra u ze hebt vastgelegd. Standaard gebruikt de JSHint-extensie de standaardopties van de linter die u kunt aanpassen met behulp van een configuratiebestand.

Het gebruik van deze extensie is vrij eenvoudig, omdat JSHint de fouten markeert met rood en de meldingen met een groene onderstreping. Als u meer informatie over de problemen wilt, zweeft u gewoon over de onderstreepte delen en JSHint drijft een label met de beschrijving van het probleem in één keer.
jQuery-codefragmenten

jQuery-codefragmenten kunnen de ontwikkeling van de frontend in Visual Studio-code aanzienlijk versnellen, omdat u snel jQuery kunt schrijven zonder fouten in de basissyntaxis. jQuery-codefragmenten heeft momenteel ongeveer 130 beschikbare fragmenten je kunt een beroep doen op de juiste trigger.

Alle jQuery-fragmenten maar één begint met de jQ voorvoegsel. De enige uitzondering is de func trigger dat voegt een anonieme functie in de editor in.

Deze handige extensie is een handige hulp wanneer u niet helemaal zeker bent over de juiste syntaxis en u de tijd wilt besparen om de documentatie te controleren. Het maakt het ook gemakkelijk om snel door de beschikbare opties te bladeren.
Prieel

De Bower VS Code-uitbreiding kan uw webontwikkelingsworkflow intuïtiever maken door de Bower-pakketbeheerder te integreren in Visual Studio Code.

Als u deze extensie in gebruik neemt, doet u dat hoef niet heen en weer schakelen tussen de terminal en de editor, maar u kunt uw pakketbeheerstaken eenvoudig uitvoeren binnen de Visual Studio-code.

De extensie Bower leidt u door de creatie van uw project bower.json bestand, en u kunt ook pakketten installeren, de-installeren, doorzoeken, bijwerken, cache beheren en er vele andere taken mee uitvoeren (zie de lijst met volledige functies).

Jij kan toegang tot aan Bower gerelateerde opdrachten door het opdrachtpalet te starten door te drukken F1, typen “Prieel” in de invoerbalk en klik op de “Prieel” optie in de vervolgkeuzelijst die verschijnt en het juiste Bower-commando kiest.
Git geschiedenis

Git History maakt het mogelijk om volg de wijzigingen van een Git-project binnen Visual Studio Code. Deze extensie is vooral handig als u wilt bijdragen aan een groter Github-project, en een manier nodig hebben om snel de wijzigingen te bekijken die andere ontwikkelaars hebben gemaakt.

Met de Git History-extensie is dat mogelijk bekijk de geschiedenis van een volledig bestand, of een bepaalde regel binnenkant ervan. Je kan ook vergelijk vorige versies van hetzelfde bestand.

Je hebt toegang tot de commando's gerelateerd aan Git History als je het woord typt “Git” in het opdrachtenpalet (F1), Kiezen “Git” in de vervolgkeuzelijst en selecteer uiteindelijk de gewenste opdracht. Let daar op je moet het bestand openen waarvan u de geschiedenis wilt bekijken voordat u er acties op kunt uitvoeren.