U bent al bekend met een teksteditor als u een Codecademy-cursus hebt gevolgd. Hieronder ziet u de teksteditor van Codecademy op volledig scherm aan het einde van de eerste module van de HTML-cursus.
Terwijl de leeromgeving van Codecademy een intuïtieve en gebruikersvriendelijke codeerervaring biedt, zult u soms toch uw eigen teksteditor moeten gebruiken. Als je bijvoorbeeld besluit deel te nemen aan een Meetup of een persoonlijke codeercursus, gebruiken ze een downloadbare teksteditor en moet je deze installeren om zowel in de klas als thuis aan projecten te werken.
Ik heb met een paar teksteditors gedobberd om een beter gevoel te krijgen voor wat het beste bij mijn behoeften past. Dit is van cruciaal belang omdat er geen “beste” teksteditor bestaat, maar alleen een waarmee je je beste werk kunt maken.
In dit artikel geef ik een grondige vergelijking van twee van de populairste teksteditors: Visual Studio en Sublime Text.
Visual Studio
Visual Studio (de teksteditor staat bekend als Visual Studio Code, dus daar zullen we vanaf nu naar verwijzen) is Microsofts gratis teksteditor die draait op Windows, Linux en macOS. Het is een recente nieuwkomer op de markt; Microsoft bracht het product eind 2015 als een openbare preview uit, waarbij de open source code op Github werd geplaatst, voordat het in april 2016 als een algemene release beschikbaar werd gesteld.
Ondanks zijn newbie-status heeft Visual Studio Code snel aan populariteit gewonnen onder ontwikkelaars, en gerangschikt als de meest populaire ontwikkelomgeving in het algemeen in Stack Overflow’s 2018 Developer Survey.
De basis
Zo ziet het startscherm van Visual Studio Code eruit wanneer u uw eerste regel code schrijft of een bestand opent dat u al hebt gemaakt:
In het linkerbovenpaneel ziet u de verschillende variaties van code die u aan het bewerken bent. In dit geval bewerk ik een bestand met de naam “style.css.”
In het middelste paneel bewerk je de code die je hebt geschreven of die je moet repareren; je kunt verschillende bestanden naast elkaar openen en bewerken.
De lay-out van Visual Studio lijkt qua eenvoud en gebruiksgemak op de lay-out van Codecademy’s eigen teksteditor. Kijk maar eens naar Codecademy’s teksteditor hieronder voor een vergelijking.
Je kunt de lay-out natuurlijk ook bewerken. De Zen-modus is een van mijn favorieten, vooral omdat het zo ontspannend klinkt. In werkelijkheid is dit een modus voor volledig scherm waarin u code kunt bewerken zonder te worden afgeleid.
Meer functies
Visual Studio Code stelt u in staat code te bewerken in een breed scala aan programmeertalen. Het voorbeeld dat ik hierboven heb gebruikt is CSS (ja, ik classificeer CSS als een codeertaal!). CSS is een van de ingebouwde programmeertalen, maar u kunt andere talen, zoals Python en C#, installeren en configureren via de Extensiemarktplaats.
Debugging
Een van de klassieke oefeningen die u doet wanneer u leert programmeren, is het “breken” van wat code en vervolgens proberen deze opnieuw te repareren. In het begin van mijn programmeercarrière staarde ik urenlang naar coderegels totdat mijn ogen wazig werden, terwijl ik probeerde uit te vinden waarom wat ik had geschreven niet in het eindproduct terug te vinden was.
Gelukkig bevat Visual Studio Code debugging-functionaliteit om deze fouten op te sporen voordat u het stadium van wazige ogen bereikt. Om met het debuggen van uw code te beginnen, hoeft u alleen maar op F5 te drukken om de code in uw huidige venster uit te voeren, of naar het menu “Debug” te gaan.
U kunt ook “breekpunten” maken, dat zijn punten waar het debuggingproces automatisch stopt.
Op een meer elementair debugging-niveau detecteert Visual Studio Code automatisch kleine problemen in uw code, en brengt u er direct naartoe zodat u het probleem gemakkelijk kunt oplossen.
Intellisense
Toen ik leerde coderen, was een van de tips die de leraar ons gaf als we niet wisten hoe we iets moesten doen, om het te googelen. Microsoft heeft in Visual Studio Code een functie ingebouwd die Intellisense heet, een alternatief voor het Googlen van het probleem (of “Bing-ing”, in Microsofts geval).
IntelliSense analyseert de semantiek (letters) van wat je invoert, evenals de rest van de code die je hebt gemaakt, en geeft vervolgens suggesties over hoe je wat je aan het schrijven bent, moet afmaken. Via Intellisense hebt u toegang tot een hele reeks verschillende aanvullingen, waaronder taalserver-suggesties, snippets en tekstuele aanvullingen op basis van woorden.
IntelliSense is beschikbaar voor de meest gangbare programmeertalen, waaronder HTML, CSS en Javascript, maar voor andere talen zult u een extensie moeten installeren.
En de rest
Visual Studio Code heeft een aantal andere handige functies die u helpen tijdens uw coderingsreis door u te helpen uw code beter te visualiseren en uw programmering te versnellen. Deze omvatten:
- Ondersteuning voor snippets: Hiermee kunt u een catalogus maken van kleine delen herbruikbare code, die u kunt invoegen in grotere stukken code
- “Ga naar”-functionaliteit: Hiermee kunt u snel symbolen, bestanden, regels en definities vinden en er naartoe gaan
- Syntax highlighting: Hiermee wordt code in verschillende kleuren en lettertypen weergegeven, afhankelijk van de gebruikte codeertaal.
Algemene indruk
Bekentenis tijd: Ik ben al heel lang gebruiker van Windows/Microsoft Office. Een deel van de reden voor deze (oncoole) beslissing is dat ik Microsoft-producten vertrouwd en gemakkelijk te navigeren vind. Hetzelfde geldt voor Visual Studio Code.
Zelfs als je nieuw bent met tekst editors, is VS Code makkelijk op te pakken en meteen te gebruiken. Het heeft een Microsoft-uiterlijk en -gevoel, en het heeft twee lagen die het ideaal maken voor elk type gebruiker.
Als u een beginnende programmeur bent, is het gemakkelijk om de basiscommando’s uit te werken (plus Microsoft heeft er veel documentatie voor geschreven), maar als u een ervaren gebruiker bent die serieus wil programmeren, zijn er ook genoeg geavanceerde mogelijkheden.
Sublime Text (versie 3)
Sublime Text, dat is ontwikkeld door een voormalig ingenieur van Google, bestaat sinds 2007. Het eerste grote verschil met Visual Studio Code (VSC) is dat het een licentie kost van 80 dollar, hoewel er een gratis proefversie is. Net als VSC draait het op Windows, Linux en macOS, en is het de op drie na populairste ontwikkelomgeving in 2018 volgens StackOverflow.
De laatste versie van Sublime Text-Versie 3-was meer dan vier jaar in bèta, van januari 2013 totdat het in september 2017 werd vrijgegeven voor het publiek.
De basis
Als je Sublime Text voor het eerst opent, krijg je een uitgeklede teksteditor. Er is geen zijbalk, geen opties om te zoeken, geen optie om u rechtstreeks naar de extensiezijbalk te brengen. Het biedt een meer gerichte lay-out om u te helpen concentreren op het coderen. Er is een kleine minimap in de rechterbovenhoek om u in één oogopslag een overzicht van uw code te geven.
Het opent vrij snel in vergelijking met Visual Studio Code en als u klaar bent om aan de slag te gaan met het bewerken van code, biedt het een perfect startpunt. Als je echter nieuw bent met tekstverwerkers, zijn de andere functies en functionaliteiten moeilijker te vinden. Het meeste wat je nodig hebt staat in de menu’s bovenaan, maar je zult ook het opdrachtenpalet (meer daarover hieronder) willen oproepen vanuit het Tools menu om sneller te vinden wat je nodig hebt.
Sublime Text functies
Als je het maximale uit Sublime Text wilt halen, zul je extra plugins willen installeren om je de extra functionaliteit te geven. Om dat te doen, moet je Package Control installeren, wat we hieronder met je doornemen.
Package Control
Package Control is vergelijkbaar met Visual Studio’s extension marketplace, maar het is niet out-of-the-box beschikbaar. Er zijn veel pakketten (of plugins) beschikbaar voor mensen die nieuw zijn met programmeren, zoals een starterspakket voor C++, een pakket dat helpt met Python-aanvullingen (een beetje zoals Intellisense in Visual Studio), en Emmet, dat u helpt sneller HTML en CSS te schrijven door u afkortingen te laten gebruiken, die het automatisch uitbreidt.
Command Palette
Als je het Command Palette gebruikt, kun je veel sneller een commando vinden en er naartoe navigeren dan wanneer je het door menu’s moet zoeken. Je kunt zo’n beetje alles openen, en het Command Palette zal ook automatisch voor je invullen, dus als je niet zeker weet wat je precies zoekt, zal het een aantal opties voorstellen.
Bijv. als je aan een project werkt en je snel een nieuwe map wilt toevoegen, of het project waar je aan werkt wilt opslaan, kun je snel die optie tevoorschijn halen. Of als u snippets wilt maken zonder door de menu’s te hoeven navigeren, kan dat ook.
Om het opdrachtenpalet te openen, hoeft u alleen maar ctrl + shift + p in te drukken.
Goto-functionaliteit
Er is een menu in Sublime Text dat is gewijd aan alle “Goto”-functionaliteit binnen deze teksteditor. Dit is een veel volledigere versie van Visual Studio’s eigen “Ga naar”-menu.
Een van de hoogtepunten is Goto Symbol (toegevoegd in Sublime Text 3), waarmee je gemakkelijk alle voorbeelden van symbolen in een bestand kunt vinden. Het voorbeeld hieronder is voor H1-tags (er was slechts één voorbeeld binnen dit bestand).
Projecten
De functie Projecten verwijst naar een manier om mappen en bestanden te organiseren binnen Sublime Text. Het betekent dat alle mappen en bestanden op één plaats worden opgeslagen en snel toegankelijk zijn vanuit de zijbalk zodra je het project opent, in plaats van dat je steeds handmatig meer bestanden moet openen. Het betekent ook dat je (snel) in alle bestanden binnen een project tegelijk kunt zoeken.
Je kunt maar één project tegelijk open hebben in een werkruimte, dus als je van project wilt veranderen, moet je de optie “Van project wisselen” selecteren.
Visual Studio heeft een vergelijkbare functie, “Workspaces” genaamd, waarmee u meerdere bestanden tegelijk kunt openen en bewerken.
En de rest
Sublime Text heeft nog een groot aantal andere, “kleinere” functies, die het waard zijn om hier te worden genoemd. Deze omvatten:
- Snippets: Deze werken op dezelfde manier als met Visual Studio, maar je kunt ook je eigen bouwen, of er meer installeren van extensies
- Multi-edit: Wanneer je op ctrl + d drukt, worden alle instanties van het woord of commando waar je op dat moment mee bezig bent gemarkeerd binnen het bestand, je kunt ook op ctrl + f drukken om woorden te vinden en te vervangen.
Algemene indruk
Sublime Text is een snelle en gestripte tekst editor die hot is op het organiseren en doorzoeken van de code die je hebt geschreven, en het snel kunnen springen naar elke functie of symbool. De “Goto” functionaliteit en de vele sneltoetsen maken het gemakkelijk voor ervaren ontwikkelaars om hun weg te vinden, en om gemakkelijk code te schrijven en te vinden zonder hun handen van het toetsenbord te hoeven halen. Voor meer beginnende programmeurs (zoals ik) duurt het langer om eraan te wennen.
Sublime Text bevat geen debug-optie, wat een probleem kan zijn voor ontwikkelaars die deze functionaliteit nodig hebben.
Welke teksteditor moet ik kiezen?
Visual Studio kan worden geclassificeerd als een geïntegreerde ontwikkelingsomgeving (IDE), omdat het programmeurs in staat stelt om zowel code te schrijven als te testen. Sublime Text daarentegen is “slechts” een teksteditor (zij het een uitstekende), omdat het zich richt op het bieden van de snelste manier om je code te organiseren en te schrijven, maar geen mogelijkheid om de code te testen (debuggen).
Een ander groot verschil tussen Visual Studio Code en Sublime Text is de ondersteuning die Microsoft biedt in vergelijking met Sublime Text. Microsoft heeft een overvloed aan documentatie gemaakt waarin bijna elke functie wordt uitgelegd en hoe deze te gebruiken, evenals blog posts en video tutorials om gebruikers op weg te helpen met de teksteditor.
Sublime Text biedt wat moeilijker te vinden documentatie, een blog post waarin de functies in de laatste versie worden uitgelegd, en een forum.
Sublime Text is snel en gemakkelijk om code te schrijven en je weg te vinden als je weet waar je mee bezig bent. Visual Studio biedt meer houvast en is een goede optie vanwege de debug-functionaliteit, maar kan sommige snelle ervaren programmeurs afremmen als het gaat om het schrijven van code.