Review: de 10 beste JavaScript-editors

JavaScript-programmeurs hebben veel goede tools om uit te kiezen - bijna te veel om bij te houden. In dit artikel bespreek ik 10 teksteditors met goede ondersteuning voor ontwikkelen met JavaScript, HTML5 en CSS, en voor documenteren met Markdown. Waarom een ​​editor gebruiken voor JavaScript-programmering in plaats van een IDE? In één woord: snelheid.

Het essentiële verschil tussen editors en IDE's is dat IDE's uw code kunnen debuggen en soms profileren, en IDE's hebben ondersteuning voor Application Lifecycle Management (ALM) -systemen. Veel van de editors die we hier bespreken, ondersteunen ten minste één versiebeheersysteem, vaak Git, zodat dat criterium minder onderscheidend is tussen IDE's en editors dan het vroeger was.

Sublime Text en Visual Studio Code zijn de toppers onder JavaScript-editors: Sublime Text vanwege zijn snelheid en handige bewerkingsfuncties, en Visual Studio Code voor nog betere functies en snelheid die bijna net zo goed is. Beugels nemen de derde plaats in. Hoewel TextMate een paar jaar geleden hoog op mijn lijst stond, hebben zijn mogelijkheden de nieuwe ontwikkelingen niet echt bijgehouden.

Hoogstwaarschijnlijk vindt u uw JavaScript-editor naar keuze in Sublime Text, Visual Studio Code of Brackets. Maar verschillende andere tools - Atom, BBEdit, Komodo Edit, Notepad ++, Emacs en Vim - hebben allemaal iets om ze aan te bevelen. Afhankelijk van de taak die voor u ligt, vindt u ze misschien handig om bij de hand te hebben.

Gerelateerde video: Wat is JavaScript? Schepper Brendan Eich legt uit

Brendan Eich, de maker van de programmeertaal JavaScript, legt uit hoe de taal wordt gebruikt en waarom het nog steeds favoriet is bij programmeurs vanwege het gebruiksgemak.

Laten we de opties bekijken en ze aan het einde vergelijken.

Sublieme tekst

Als u een flexibele, krachtige, uitbreidbare programmeerteksteditor wilt die razendsnel is en u het niet erg vindt om over te schakelen naar andere vensters voor codecontrole, foutopsporing en implementatie, hoeft u niet verder te zoeken dan Sublime Text.

Naast snelheid omvatten de vele opmerkelijke sterke punten van Sublime Text ondersteuning voor meer dan 70 bestandstypen, waaronder JavaScript, HTML en CSS; vrijwel directe navigatie en direct schakelen tussen projecten; meerdere selecties (maak een heleboel wijzigingen in één keer), inclusief kolomselecties (selecteer een rechthoekig gebied van het bestand); meerdere vensters (gebruik al uw monitoren) en gesplitste vensters (profiteer van uw schermvastgoed); volledige aanpassing met eenvoudige JSON-bestanden; een op Python gebaseerde plug-in API; en een uniform, doorzoekbaar opdrachtenpalet.

Voor programmeurs die afkomstig zijn van andere editors, ondersteunt Sublime Text TextMate-bundels (exclusief opdrachten) en Vi / Vim-emulatie. De onofficiële Sublime Text-documentatie bevat minachtende (en onjuiste) opmerkingen over Emacs-gebruikers (bijvoorbeeld moi ), maar ik zal ze over het hoofd zien. Waarom bestaat de onofficiële Sublime Text-documentatie eigenlijk? Ten eerste is de officiële documentatie minder dan compleet - laat staan.

Toen ik eerder "bijna directe navigatie" zei, meende ik het. Om bijvoorbeeld van de huidige locatie op het scherm naar de definitie van getResponseHeaderin ajax.js te springen, typ ik Command-P op een Mac of Ctrl-P op een pc en ajopen ik vervolgens een tijdelijke weergave in ajax.js en vervolgens @grhen Enter om een ​​tabblad te openen met getResponseHeadergeselecteerd. Sublime Text kan mijn typen bijhouden. Het voelt net zo responsief als enkele van de beste oude DOS-editors zoals Brief en Kedit.

Als ik eenmaal heb geselecteerd  getResponseHeader, kan ik alle toepassingen van de functie in context vinden door Shift-Command-F op een Mac te typen, of Shift-Ctrl-F op een pc en vervolgens Enter. Een nieuw tabblad toont me de zoekresultaten met de zoekterm in elk fragment van vijf regels. Dubbelklikken op omkaderde tekst brengt de volledige bestandscontext op een nieuw tabblad.

Als u op een bestandsnaam klikt in de linker Mappen-zijbalk, wordt een tijdelijk tabblad geopend met de inhoud van het bestand. Als u op een ander bestand klikt, wordt dat tabblad vervangen. Ook hier kan Sublime Text mijn typen en klikken bijhouden. Op dezelfde manier kan ik met de verkleinde navigatie rechtsboven op de pagina vrijwel onmiddellijk binnen een bestand navigeren, zonder dat ik veel moet scrollen. Ik wou dat Microsoft Word zo responsief was.

Meerdere selecties en kolomselecties maken snel werk van het soort vervelende bewerkingen waarvoor reguliere expressies nodig waren. Moet u een lijst met woorden omzetten in een JSON-structuur waarin elk woord wordt omgeven door dubbele aanhalingstekens en elk geciteerd woord wordt gescheiden van het volgende door een komma? In Sublime Text zijn ongeveer acht toetsaanslagen nodig, ongeacht hoeveel woorden er in de lijst staan.

Op mijn Windows-ontwikkelbox gebruik ik twee brede monitoren. Op mijn MacBook gebruik ik het Retina-display plus een Thunderbolt-display. Tenzij ik op het ene beeldscherm aan het bewerken ben en op het andere foutopsporing, wil ik meestal veel verschillende bronbestanden en verschillende weergaven in bronbestanden tegelijk zien. Sublime Text ondersteunt meerdere vensters, gesplitste vensters, meerdere werkruimten per project, meerdere weergaven en meerdere deelvensters met weergaven. Het is vrij eenvoudig om al mijn schermruimte te gebruiken wanneer ik dat wil en om te consolideren wanneer ik ruimte moet maken voor foutopsporing en testen.

U kunt alles aan Sublime Text aanpassen: het kleurenschema, het lettertype van de tekst, de algemene sneltoetsen, de tabstops, de bestandsspecifieke sneltoetsen en fragmenten, en zelfs de regels voor syntaxisaccentuering. Voorkeuren zijn gecodeerd als JSON-bestanden. Taalspecifieke definities zijn XML-voorkeurenbestanden. Er is een actieve gemeenschap rond Sublime Text die Sublime Text-pakketten en plug-ins maakt en onderhoudt. Veel functies waarvan ik aanvankelijk dacht dat Sublime Text ze miste - inclusief JSLint- en JSHint-interfaces, JsFormat, JsMinify, PrettyJSON en Git-ondersteuning - blijken beschikbaar te zijn via de gemeenschap, met behulp van de Package Installer.

Een van de redenen voor de geweldige prestaties van Sublime Text is dat het strak is gecodeerd. Een andere reden is dat Sublime Text geen IDE is en de boekhoudkundige overhead van een IDE niet nodig heeft.

Vanuit het oogpunt van een ontwikkelaar is dit een lastige afweging. Als u zich in een strakke testgestuurde ontwikkelingslus van "rood, groen, refactor" bevindt, dan zal een IDE die is ingesteld om codedekking te bewerken, testen, refactoren en volgen, u het meest helpen. Als u daarentegen codebeoordelingen of grote bewerkingen uitvoert, wilt u de snelste en meest efficiënte editor die u kunt vinden. Die editor is misschien wel Sublime Text.

Kosten: onbeperkte gratis proefperiode; $ 70 per gebruiker voor zakelijke of persoonlijke licentie. Platforms: Windows, MacOS en Linux.

Visual Studio Code

Visual Studio Code is een gratis lichtgewicht editor en IDE van Microsoft. Het heeft componenten van Visual Studio, gemengd met de open source Atom Electron-shell, en biedt uitstekende ondersteuning voor ASP.Net Core-ontwikkeling met C # en voor Node.js-ontwikkeling met TypeScript en JavaScript. Door te breken met het historische patroon van Microsoft om alleen Visual Studio op Windows te ondersteunen, draait Visual Studio Code ook op MacOS en Linux. De onderstaande schermafbeelding is gemaakt op MacOS.

Visual Studio Code heeft verbazingwekkend goede JavaScript-codeaanvulling, dankzij de opname van de TypeScript-compiler en de Salsa-engine. Visual Studio Code verzendt uw JavaScript-code naar de TypeScript-compiler op de achtergrond om typen af ​​te leiden en een symbolentabel samen te stellen. U kunt de resultaten zien in het vak onder aan de schermafbeelding met de informatie voor de  hasOwnProperty methode.

Met dezelfde symbolentabel kan IntelliSense u geweldige pop-up optielijsten geven voor het aanvullen van code tijdens het typen van een uitdrukking. U krijgt automatische sluiting tussen haakjes, opties voor automatische woordaanvulling, lijsten met automatische methoden nadat u hebt getypt .en automatische parameterlijsten binnen een methode. U kunt IntelliSense verbeteren door verwijzingen naar d.ts-bestanden van toe te voegen  DefinitelyTyped, en Visual Studio Code zal u aanbieden om dat voor u te doen wanneer het veelvoorkomende problemen herkent, zoals het gebruik van  __dirname, een ingebouwde variabele van Node.js.

Git-ondersteuning is erg goed en vrij eenvoudig te gebruiken. De Visual Studio Code-foutopsporing biedt een uitstekende foutopsporingservaring voor de ontwikkeling van Node.js (en ASP.Net-ontwikkeling). Visual Studio Code heeft zeer goede tools voor HTML, CSS, Less, Sass en JSON, die is gebaseerd op dezelfde technologie die de ontwikkelaarstools van Internet Explorer F12 aandrijft. Bovendien heeft het aanpasbare integratie met externe taaklopers zoals  gulp en  jake.

Visual Studio Code heeft een robuust ecosysteem van plug-ins aangetrokken, bijvoorbeeld ter ondersteuning van Angular en React. Het is nu de editor die ik aanbeveel als ik tutorials schrijf over het bouwen van apps met JavaScript en TypeScript-frameworks en -bibliotheken.

Kosten: gratis open source. Platform: Windows, MacOS en Linux.

Beugels

Brackets is een gratis open source-editor, oorspronkelijk van Adobe, gebouwd om betere tools te bieden voor JavaScript, HTML en CSS, evenals gerelateerde open webtechnologieën. Brackets zelf is geschreven in JavaScript, HTML en CSS, en de ontwikkelaars gebruiken Brackets om Brackets te bouwen. Naast de ingebouwde mogelijkheden heeft Brackets een extensiebeheerder en zijn er extensies beschikbaar voor veel van de talen en tools die front-end-ontwikkelaars gebruiken. Brackets is niet zo snel als Sublime Text of TextMate, maar het is nog steeds behoorlijk snel, behalve pauzes om programma-inhoud van internet te laden of bij te werken.

Brackets heeft goede ondersteuning voor JavaScript, CSS, HTML en Node.js. Het heeft ook leuke functies zoals het in-line bewerken van CSS gerelateerd aan een HTML-ID (Quick Edit). Bovendien biedt Brackets een schone gebruikersinterface en een live preview voor webpagina's die u aan het bewerken bent. Het is een zeer goede keuze voor een gratis code-editor.

Het automatisch aanvullen van JavaScript tussen haakjes is erg goed, met het automatisch sluiten van haakjes, punthaken en vierkante haken, evenals automatische vervolgkeuzemenu's voor trefwoorden, variabelen en methoden, inclusief jQuery-methoden nadat je hebt getypt $. Haakjes kunnen de Node.js-foutopsporing besturen en Node opnieuw starten vanuit een menu-item. Het is gemakkelijk om extensies toe te voegen voor extra functionaliteit, zoals TypeScript- en JSX-ondersteuning, Bower-integratie en Git-integratie.

Snel bewerken, Snelle documenten, Snel openen en Live voorbeeld helpen allemaal om het bewerken van webapplicaties te stroomlijnen en u te laten focussen op wat u codeert of ontwerpt. Aan de andere kant kunnen sommige Brackets-extensies lastig te configureren zijn, maar niet zo lastig als Emacs-pakketten of Vim-plug-ins.

Kosten: gratis open source. Platformen: Windows, MacOS, Linux. 

Atoom

Atom is een gratis, open source, hackbare programmeereditor van GitHub voor Windows, MacOS en Linux die kan worden geïntegreerd met de GitHub-app en duizenden pakketten en thema's beschikbaar heeft. Ik kom langs met een paar community-pakketten, plus de kernpakketten en thema's.

Niet verwonderlijk, gezien de oorsprong, wordt de Atom-bron gehost op GitHub. Het is geschreven in CoffeeScript en geïntegreerd met Node.js. Atom is een gespecialiseerde variant van Chromium die is ontworpen als teksteditor in plaats van als webbrowser; elk Atom-venster is in wezen een lokaal weergegeven webpagina. Het Atom-team ontwikkelt Atom in Atom.

De prestaties van Atom zijn redelijk goed als het zichzelf niet updatet. Het is volledig uit de doos uitgerust, met een fuzzy finder, snel projectbrede zoeken en vervangen, meerdere cursors en selecties, meerdere deelvensters, fragmenten, codevouwen en de mogelijkheid om TextMate-grammatica's en thema's te importeren. Atom kan twee opdrachtregelhulpprogramma's installeren: Atom om de editor vanuit een shell te starten en APM om de pakketten van Atom te beheren, in de geest van NPM voor Node.js. Ik merk dat ik Atom veel gebruik bij het bladeren door repositories die ik heb gekloond vanuit GitHub, omdat de GitHub-applicatie een contextmenu-item bevat om dat te doen.

Kosten: gratis open source. Platforms: Windows, MacOS, Linux.

Komodo Bewerken

Komodo Edit, ActiveState's gratis versie met verminderde functionaliteit van Komodo IDE, is een redelijk goede meertalige editor. Alles wat ik te zeggen had over Komodo IDE als redacteur (zie "Review: de 6 beste JavaScript-IDE's") is van toepassing op Komodo Edit.