Recension: De 10 bästa JavaScript-redigerarna

JavaScript-programmerare har många bra verktyg att välja mellan - nästan för många att hålla koll på. I den här artikeln diskuterar jag tio textredigerare med bra stöd för att utveckla med JavaScript, HTML5 och CSS, och för att dokumentera med Markdown. Varför använda en redigerare för JavaScript-programmering istället för en IDE? Med ett ord: hastighet.

Den väsentliga skillnaden mellan redaktörer och IDE är att IDE kan felsöka och ibland profilera din kod, och IDE har stöd för ALM-system (Application Lifecycle Management). Många av de redaktörer som vi diskuterar här har stöd för minst ett versionskontrollsystem, ofta Git, så att kriteriet är en mindre skillnad mellan IDE och redigerare än det brukade vara.

Sublime Text och Visual Studio Code är toppar bland JavaScript-redaktörer - Sublime Text för dess hastighet lika mycket som dess praktiska redigeringsfunktioner, och Visual Studio Code för ännu bättre funktioner och hastighet som är nästan lika bra. Brackets tar tredje plats. Medan TextMate rankades högt på min lista för några år sedan, har dess kapacitet inte riktigt följt med den nya utvecklingen.

Troligtvis hittar du din JavaScript-redigerare som du väljer i Sublime Text, Visual Studio Code eller Brackets. Men flera andra verktyg - Atom, BBEdit, Komodo Edit, Notepad ++, Emacs och Vim - har alla något att rekommendera dem. Beroende på uppgiften kan du hitta någon av dem praktiska att ha runt.

Relaterad video: Vad är JavaScript? Skaparen Brendan Eich förklarar

Brendan Eich, skaparen av JavaScript-programmeringsspråket, förklarar hur språket används och varför det fortfarande är en favorit bland programmerare för dess användarvänlighet.

Låt oss gå igenom alternativen och jämföra dem i slutet.

Sublim text

Om du vill ha en flexibel, kraftfull, utdragbar programmeringstextredigerare som är blixtsnabb och du inte har något emot att byta till andra fönster för kodkontroll, felsökning och distribution, leta inte längre än Sublime Text.

Förutom hastighet stödjer de många anmärkningsvärda styrkorna för Sublime Text för mer än 70 filtyper, bland annat JavaScript, HTML och CSS; nästan omedelbar navigering och omedelbar projektbyte; flera val (gör en massa ändringar samtidigt), inklusive kolumnval (välj ett rektangulärt område av filen); flera fönster (använd alla dina skärmar) och delade fönster (dra nytta av din skärmfastighet); komplett anpassning med enkla JSON-filer; ett Python-baserat plugin-API; och en enhetlig, sökbar kommandopalett.

För programmerare som kommer från andra redaktörer stöder Sublime Text TextMate-paket (exklusive kommandon) och Vi / Vim-emulering. Den inofficiella dokumentationen om sublim text gör nedsättande (och felaktiga) kommentarer om Emacs-användare (till exempel moi ), men jag kommer att förbise dem. Varför finns även den inofficiella dokumentationen om sublim text? För det första är den officiella dokumentationen mindre än komplett - mycket mindre.

När jag sa "nästan omedelbar navigering" tidigare menade jag det. För att till exempel hoppa från den aktuella platsen på skärmen till definitionen getResponseHeaderi ajax.js kan jag skriva Command-P på en Mac eller Ctrl-P på en PC och sedan ajöppna en övergående vy till ajax.js, sedan @grhoch Enter för att öppna en flik med getResponseHeadervald. Sublime Text kan hålla jämna steg med min typning. Det känns lika lyhörd som några av de bästa gamla DOS-redaktörerna som Brief och Kedit.

När jag väl har valt  getResponseHeaderkan jag hitta alla användningsområden för funktionen i sitt sammanhang genom att skriva Shift-Command-F på en Mac eller Shift-Ctrl-F på en PC och sedan Enter. En ny flik visar sökresultaten med sökordet i varje femradig kodavsnitt. Genom att dubbelklicka på rutan visas hela filkontext i en ny flik.

Genom att klicka på ett filnamn i vänster mappens sidofält visas en övergående flik som visar filens innehåll. Att klicka på en annan fil ersätter den fliken. Här kan Sublime Text återigen följa med att skriva och klicka. På samma sätt låter mig navigering i reducerad storlek längst upp till höger på sidan flytta in i en fil nästan direkt, utan att det går att rulla. Jag önskar att Microsoft Word var lika lyhörd.

Flera val och kolumnval gör snabbt arbete med de slags irriterande redigeringar som tidigare krävde reguljära uttryck. Behöver du förvandla en lista med ord till en JSON-struktur där varje ord är omgivet av dubbla citat och varje citerat ord är åtskilt från nästa med ett komma? Det tar ungefär åtta tangenttryckningar i sublim text, oavsett hur många ord du har i listan.

I min Windows-utvecklingsruta använder jag två breda bildskärmar. På min MacBook använder jag Retina-skärmen plus en Thunderbolt-skärm. Om jag inte redigerar på en skärm och felsöker på den andra vill jag vanligtvis se många olika källfiler och olika vyer i källfiler samtidigt. Sublime Text stöder flera fönster, delade fönster, flera arbetsytor per projekt, flera vyer och flera rutor som innehåller vyer. Det är ganska enkelt att använda alla mina skärmfastigheter när jag vill och att konsolidera när jag behöver göra plats för felsökning och testning.

Du kan anpassa allt om sublim text: färgschemat, teckensnitt, globala tangentbindningar, flikstopp, filspecifika tangentbindningar och utdrag och till och med syntaxregleringsregler. Inställningar är kodade som JSON-filer. Språkspecifika definitioner är XML-preferensfiler. Det finns en aktiv gemenskap kring Sublime Text som skapar och underhåller Sublime Text-paket och plugins. Många funktioner som jag ursprungligen trodde att Sublime Text saknade - inklusive JSLint- och JSHint-gränssnitt, JsFormat, JsMinify, PrettyJSON och Git-support - visade sig vara tillgängliga via communityn med hjälp av Package Installer.

En av anledningarna till Sublime Texts fantastiska prestanda är att den är tätt kodad. En annan anledning är att Sublime Text inte är en IDE och inte behöver bokföringskostnaden för en IDE.

Ur utvecklarens synvinkel är detta en knepig avvägning. Om du befinner dig i en tät testdriven utvecklingsslinga med "röd, grön, refaktor", kommer en IDE som är inställd för att redigera, testa, refaktorera och spåra täckning hjälpa dig mest. Om du gör kodrecensioner eller större ändringar vill du å andra sidan ha den snabbaste och mest effektiva redigeraren du kan hitta. Den redaktören kan mycket väl vara Sublime Text.

Kostnad: Obegränsad gratis provperiod; $ 70 per användare för företags- eller personlig licens. Plattformar: Windows, MacOS och Linux.

Visual Studio-kod

Visual Studio Code är en gratis lättredigerare och IDE från Microsoft. Den har komponenter i Visual Studio, blandat med Atom Electron-skalet med öppen källkod, vilket ger utmärkt stöd för ASP.Net Core-utveckling med C # och för Node.js-utveckling med TypeScript och JavaScript. Bryter mot Microsofts historiska mönster att bara stödja Visual Studio på Windows, körs Visual Studio Code också på MacOS och Linux. Skärmdumpen nedan togs på MacOS.

Visual Studio Code har otroligt bra JavaScript-kodfullbordande, tack vare införandet av TypeScript-kompilatorn och Salsa-motorn. Visual Studio Code skickar din JavaScript-kod till TypeScript-kompilatorn i bakgrunden för att avleda typer och bygga en symboltabell. Du kan se resultaten i rutan nära botten av skärmbilden som visar informationen för  hasOwnProperty metoden.

Samma symboltabell gör det möjligt för IntelliSense att ge dig fantastiska popup-alternativlistor för kodavslutning under hela typningen av ett uttryck. Du får automatisk stängning av parenteser, automatiska ordfyllnadsalternativ, automatiska metodlistor efter att du har skrivit .och automatiska parameterlistor inom en metod. Du kan förbättra IntelliSense genom att lägga till referenser till d.ts-filer från  DefinitelyTyped, och Visual Studio Code kommer att erbjuda att göra det åt dig när det känner igen vanliga problem, till exempel användningen av  __dirname, som är en inbyggd Node.js-variabel.

Git-support är mycket bra och ganska enkelt att använda. Visual Studio Code-felsökaren ger en utmärkt felsökningsupplevelse för Node.js-utveckling (och ASP.Net-utveckling). Visual Studio Code har mycket bra verktyg för HTML, CSS, Less, Sass och JSON, som bygger på samma teknik som driver utvecklarverktygen för Internet Explorer F12. Dessutom har den anpassningsbar integration med externa aktivitetslöpare som  gulp och  jake.

Visual Studio Code har lockat ett robust ekosystem av plugins - till exempel för att stödja Angular och React. Det är nu redigeraren jag rekommenderar när jag skriver handledning om hur man bygger appar med JavaScript och TypeScript-ramar och bibliotek.

Kostnad: Gratis öppen källkod. Plattform: Windows, MacOS och Linux.

Fästen

Brackets är en gratis öppen källkodsredigerare, ursprungligen från Adobe, byggd för att ge bättre verktyg för JavaScript, HTML och CSS samt relaterade öppna webbtekniker. Brackets själv är skrivet i JavaScript, HTML och CSS, och utvecklarna använder Brackets för att bygga Brackets. Förutom de inbyggda funktionerna har Brackets en tilläggshanterare, och tillägg finns för många av de språk och verktyg som front-end-utvecklare använder. Brackets är inte lika snabba som Sublime Text eller TextMate, men det är fortfarande ganska snabbt förutom pauser för att ladda eller uppdatera programinnehåll från webben.

Brackets har bra stöd för JavaScript, CSS, HTML och Node.js. Det har också fina funktioner som inline-redigering av CSS relaterat till ett HTML-ID (Quick Edit). Dessutom har parenteser ett rent användargränssnitt och en liveförhandsgranskning för webbsidor du redigerar. Det är ett mycket bra val för en gratis kodredigerare.

Autofullföring av JavaScript i parenteser är mycket bra, med automatisk stängning av parenteser, vinkelparenteser och fyrkantiga parenteser, samt automatiska rullgardinsmenyer för nyckelord, variabler och metoder, inklusive jQuery-metoder efter att du har skrivit $. Fästen kan styra Node.js-felsökaren och starta om Node från ett menyalternativ. Det är enkelt att lägga till tillägg för ytterligare funktioner som TypeScript och JSX-stöd, Bower-integration och Git-integration.

Snabbredigering, snabbdokument, snabböppning och liveförhandsgranskning hjälper till att effektivisera redigering av webbapplikationer och låta dig fokusera på vad du kodar eller designar. Nackdelen är att vissa konsoltillägg kan vara knepiga att konfigurera, men inte lika knepiga som Emacs-paket eller Vim-plugins.

Kostnad: Gratis öppen källkod. Plattformar: Windows, MacOS, Linux. 

Atom

Atom är en gratis, öppen källkod, hackbar programmeringsredigerare från GitHub för Windows, MacOS och Linux som integreras med GitHub-appen och har tusentals paket och teman tillgängliga. Jag klarar mig med några communitypaket, plus kärnpaketen och teman.

Inte förvånande, med tanke på sitt ursprung är Atom-källan värd på GitHub. Den är skriven i CoffeeScript och integrerad med Node.js. Atom är en specialiserad variant av Chromium utformad för att vara en textredigerare snarare än en webbläsare; varje Atom-fönster är i huvudsak en lokalt renderad webbsida. Atom-teamet utvecklar Atom i Atom.

Atoms prestanda är ganska bra när den inte uppdaterar sig själv. Det finns fullt ut ur lådan med en suddig sökare, snabb projektomfattande sökning och ersättning, flera markörer och val, flera rutor, utdrag, kodvikning och möjligheten att importera TextMate-grammatik och teman. Atom kan installera två kommandoradsverktyg: Atom för att starta redigeraren från ett skal och APM för att hantera Atoms paket, i andan av NPM för Node.js. Jag använder mig av Atom mycket när jag surfar på förråd som jag klonade från GitHub, eftersom GitHub-programmet innehåller ett snabbmenyalternativ för att göra det.

Kostnad: Gratis öppen källkod. Plattformar: Windows, MacOS, Linux.

Komodo Redigera

Komodo Edit, ActiveStates kostnadsfria version med reducerad funktionalitet av Komodo IDE, är en ganska bra flerspråkig redaktör. Allt jag hade att säga om Komodo IDE som redaktör (se “Granska: De 6 bästa JavaScript IDE”) gäller Komodo Edit.