Mogelijkheden VS Code per januari 2018

Ingediend door Dirk Hornstra op 18-jan-2018 21:45

Ergens in 2015 heb ik een praatje gehouden tijdens de Fresh Friday bij TRES over het Build evenement van Microsoft. Dat was ook de periode dat de eerste preview-versie van Visual Studio Code uitkwam. Het was toen, in mijn ogen, een MS-versie van Notepad++ met minder mogelijkheden, ik zag er niet de toegevoegde waarde van en verwachtte er weinig van. Daar zat ik toch fout, want inmiddels is het programma dermate doorontwikkeld dat het een prima te gebruiken programma is.

Voor het algemene verhaal kun je op de wikipedia-pagina kijken. Omdat ik enthousiaster begin te worden over VS Code en ik regelmatig tweets over VS Code aanklik en denk "daar wil ik nog wat mee doen", verwerk ik die tweets in deze post. Werk ik zelf ook meteen VS Code op mijn pc bij en heb een referentie om het ook op andere machines bij te werken.

Zo kwam ik deze tweet tegen van Michael Crump. Hij linkt hier naar de algemene pagina van VS Code over de basismogelijkheden. Je kunt dus op meerdere regels hetzelfde item selecteren en collectief vervangen. We gebruiken dit ook wel eens in SQL Management Studio om een lijstje komma-gescheiden waardes te krijgen. Deze pagina nog even doorgelezen, ik zie nu dat je ook hier kunt instellen of je tabs of spaties in je code wilt gebruiken, iets wat we in Visual Studio ook gebruiken (anders gaan tabs en spaties door elkaar lopen en is het een rommeltje in je "tekst"/code bestanden). Het zoeken in bestanden gebruik ik ook al, net als de mogelijkheid om met reguliere expressies te zoeken. Ook staat de editor standaard ingesteld op UTF-8, waarbij Notepad++ nog wel eens op ANSI ingesteld staat en daardoor voor problemen op websites zorgt.

Vervolgens de tweet van @openatmicrosoft die verwijst naar deze pagina. Op deze pagina de aankondiging van een nieuwe Powershell-core, maar ook dat de ondersteuning van Code uitgebreid is voor Java, Tomcat en Maven. Ik programmeer niet in Java en heb dit eigenlijk niet nodig, maar mocht ik er toch mee aan de slag gaan, dan is het fijn dat je met de editor zaken kunt debuggen. Dus bij deze geïnstalleerd. Beetje verwarrend dat je op Install klikt en dan de melding krijgt dat je Visual Studio Code op je PC moet hebben (dat heb ik toch??), maar bij doorklikken wordt VS Code geopend en kun je daar kiezen de extensie te installeren.

Ik dacht dat dit werkte, maar ik zie nu in de output dat "GIT" niet gevonden kan worden. Met behulp van GIT worden je extensies dus geïnstalleerd. Ik had al een melding gekregen dat ik GIT moest installeren (dit is op mijn Windows-pc). Ik word verwezen naar https://git-scm.com/ Daar de download uitgevoerd en geïnstalleerd. Schijnbaar moest ik Code nog even afsluiten en opnieuw opstarten en gaat het vervolgens wel goed (have you tried turning it off and on again?). Je kunt ook de stappen volgen die op de pagina genoemd worden, in Code <CTRL> en P drukken, vervolgens in het invoerveld 

ext install vscode-java-debug

plakken, enter drukken en klaar!

Het Maven-project kan niet gevonden worden (de link op de pagina van MSDN verwijst naar een 404), maar je kunt in Code bij de extensies wel zoeken op eskibear.vscode-maven en zo de extensie installeren. 

Deze tweet van Visual Studio linkt naar dit artikel, waarin een korte how-to beschreven wordt over hoe je in Visual Studio een koppeling kunt maken om een bestand van je project in Visual Studio Code te openen. Je zou je kunnen afvragen waarom je dat zou willen, maar volgens mij heb ik al een idee waar ik dit voor wil gaan gebruiken. We maken bij onze projecten gebruik van Razor-templates (.cshtml). We gebruiken CodeMaid om onze .cs bestanden te formatteren/juiste opmaak te geven, maar volgens mij vernaggelt deze ook onze Razor-templates tijdens het typen (of het is de Intellisense die dingen doet die ik niet wil). Als ik ergens een haakje weghaal en later wat toevoeg heb ik vaak dat de HTML niet goed opgemaakt is, waardoor de pagina afsterft. Hiervoor zou Visual Studio Code een prima editor zijn.

In deze tweet van Visual Studio Code wordt verwezen naar een artikel op Smashing Magazine. Een uitgebreid overzicht van wat je met VS Code kunt doen. Ik heb de tips opgevolgd om "prettier" te installeren en ook de "Font Ligatures". Dat laatste voegt niet echt iets toe, alleen dat het er "mooier" uitziet. Het zorgt ervoor dat bepaalde statements ==, != samengevoegd worden naar 1 karakter. Het houdt je scherm wat schoner :)

Als afsluiting van deze post een laatste tweet, deze is van Shubheksha. Soms heb je statements of controles waar tig "haakjes openen" en "haakjes sluiten" in zitten. Je denkt dat je alles netjes afgesloten hebt, maar nee, je hebt er net 1 of 2 over het hoofd gezien. Met deze extensie krijgen alle haakjes een eigen kleur en kun je dus checken of je laatste haakje dezelfde kleur heeft als de eerste. De Bracket Pair Colorizer.  Geïnstalleerd, code opnieuw opgestart, maar in een bepaald bestand kreeg ik de kleuren niet te zien. Later wel weer. Deze extensie werkt met een bepaalde vertraging, die kun je uitzetten. Bij deze gedaan. Dat doe je door <CTRL> en , in te typen, in het rechter scherm kun je dan je eigen settings instellen. Bij mij is dat nu:

// Place your settings in this file to overwrite the default settings
{
"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true,
"bracketPairColorizer.timeOut" : 0
}

Oh, toch nog één toevoeging. Bij de reacties op de tweet van Shubheksha zit een reactie van Matt Stratton. Hij verwijst naar een blog-artikel van hem waarin hij een lijstje met extensies geplaatst heeft. Markdownlint, REST Cliënt en WakaTime alvast geïnstalleerd, de rest ga ik later nog eens naar kijken.