Anmeldelse: De 10 bedste JavaScript-redaktører

JavaScript-programmører har mange gode værktøjer at vælge imellem - næsten for mange til at holde styr på. I denne artikel diskuterer jeg 10 teksteditorer med god support til udvikling med JavaScript, HTML5 og CSS og til dokumentation med Markdown. Hvorfor bruge en editor til JavaScript-programmering i stedet for en IDE? Med et ord: hastighed.

Den væsentlige forskel mellem redaktører og IDE'er er, at IDE'er kan fejle og undertiden profilere din kode, og IDE'er har support til ALM-systemer (Application Lifecycle Management). Mange af de redaktører, vi diskuterer her, understøtter mindst et versionskontrolsystem, ofte Git, så dette kriterium er mindre forskel mellem IDE'er og redaktører, end det plejede at være.

Sublim tekst og Visual Studio-kode er toppe blandt JavaScript-redaktører - Sublim tekst for dens hastighed lige så meget som dens praktiske redigeringsfunktioner, og Visual Studio Code for endnu bedre funktioner og hastighed, der er næsten lige så god. Beslag tager tredjepladsen. Mens TextMate rangerede højt på min liste for et par år siden, har dets kapaciteter ikke rigtig fulgt med nye udviklinger.

Mest sandsynligt finder du din valgte JavaScript-editor i Sublime Text, Visual Studio Code eller Brackets. Men flere andre værktøjer - Atom, BBEdit, Komodo Edit, Notepad ++, Emacs og Vim - har alle noget at anbefale dem. Afhængigt af den aktuelle opgave kan du finde en af dem praktisk at have rundt omkring.

Relateret video: Hvad er JavaScript? Skaber Brendan Eich forklarer

Brendan Eich, skaberen af JavaScript-programmeringssproget, forklarer, hvordan sproget bruges, og hvorfor det stadig er en favorit blandt programmører på grund af dets brugervenlighed.

Lad os gennemgå mulighederne og sammenligne dem i slutningen.

Sublim tekst

Hvis du vil have en fleksibel, kraftfuld, udvidelig programmeringsteksteditor, der er lynhurtig, og du ikke har noget imod at skifte til andre vinduer til kodekontrol, fejlretning og implementering, skal du ikke se længere end Sublime Text.

Udover hastighed understøtter de mange bemærkelsesværdige styrker af Sublime Text mere end 70 filtyper, blandt dem JavaScript, HTML og CSS; næsten øjeblikkelig navigation og øjeblikkelig projektskift; flere valg (foretag en masse ændringer på én gang), herunder kolonnevalg (vælg et rektangulært område af filen); flere windows (brug alle dine skærme) og split windows (drage fordel af din skærm fast ejendom); komplet tilpasning med enkle JSON-filer; en Python-baseret plugin API og en samlet, søgbar kommandopalette.

For programmører, der kommer fra andre redaktører, understøtter Sublime Text TextMate-bundter (ekskl. Kommandoer) og Vi / Vim-emulering. Den uofficielle Sublime Text-dokumentation giver nedsættende (og forkerte) bemærkninger om Emacs-brugere (moi, for eksempel), men jeg vil overse dem. Hvorfor findes den uofficielle dokumentation for sublim tekst overhovedet? For det første er den officielle dokumentation mindre end komplet - meget mindre.

Da jeg sagde "næsten øjeblikkelig navigation" tidligere, mente jeg det. For eksempel at springe fra den aktuelle placering på skærmen til definitionen af getResponseHeader i ajax.js kan jeg derefter skrive Command-P på en Mac eller Ctrl-P på en pc aj for at åbne en kortvarig visning i ajax.js, derefter @grh og Enter for at åbne en fane med getResponseHeader valgte. Sublime Text er i stand til at holde trit med min skrivning. Det føles så lydhørt som nogle af de bedste gamle DOS-redaktører som Brief og Kedit.

Når jeg har valgtgetResponseHeader, Jeg kan finde alle anvendelser af funktionen i sammenhæng ved at skrive Shift-Command-F på en Mac eller Shift-Ctrl-F på en pc og derefter Enter. En ny fane viser mig søgeresultaterne med søgeudtrykket i hvert fem-linjestykke. Dobbeltklik på tekst i boks viser den fulde filkontekst i en ny fane.

Ved at klikke på et filnavn i sidebjælken til mapper i venstre side vises en kortvarig fane, der viser filens indhold. Ved at klikke på en anden fil erstattes denne fane. Også her er Sublime Text i stand til at holde trit med min indtastning og klik. På samme måde lader navigationen i reduceret størrelse øverst til højre på siden mig bevæge mig inden for en fil næsten øjeblikkeligt uden at rulle overhead. Jeg ville ønske, at Microsoft Word var lige så lydhør.

Flere valg og kolonnevalg gør hurtigt arbejde med de slags irriterende redigeringer, der tidligere krævede regelmæssige udtryk. Har du brug for at omdanne en liste med ord til en JSON-struktur, hvor hvert ord er omgivet af dobbelt anførselstegn, og hvert citeret ord er adskilt fra det næste med et komma? Det tager cirka otte tastetryk i sublim tekst, uanset hvor mange ord du har på listen.

På min Windows-udviklingsboks bruger jeg to brede skærme. På min MacBook bruger jeg Retina-skærmen plus en Thunderbolt-skærm. Medmindre jeg redigerer på den ene skærm og debugger på den anden, vil jeg normalt se mange forskellige kildefiler og forskellige visninger i kildefiler samtidigt. Sublime Text understøtter flere vinduer, splitvinduer, flere arbejdsområder pr. Projekt, flere visninger og flere ruder, der indeholder visninger. Det er ret simpelt at bruge al min skærm fast ejendom, når jeg vil, og at konsolidere, når jeg har brug for at gøre plads til fejlfinding og test.

Du kan tilpasse alt om sublim tekst: farveskemaet, tekstskrifttypen, de globale nøglebindinger, fanen stopper, de filspecifikke nøglebindinger og uddrag og endda reglerne for fremhævning af syntaks. Præferencer er kodet som JSON-filer. Sprogspecifikke definitioner er XML-præferencefiler. Der er et aktivt samfund omkring Sublime Text, der opretter og vedligeholder Sublime Text-pakker og plugins. Mange funktioner, som jeg oprindeligt troede, at sublim tekst manglede - herunder JSLint- og JSHint-grænseflader, JsFormat, JsMinify, PrettyJSON og Git-support - viser sig at være tilgængelige gennem samfundet ved hjælp af pakkeinstallatøren.

En af grundene til Sublime Texts fantastiske præstation er, at den er tæt kodet. En anden grund er, at Sublime Text ikke er en IDE og ikke har brug for bogføring af en IDE.

Fra en udviklers synspunkt er dette en vanskelig afvejning. Hvis du er i en tæt testdrevet udviklingssløjfe med "rød, grøn, refactor", vil en IDE, der er indstillet til at redigere, teste, refactor og sporkodedækning, hjælpe dig mest. Hvis du laver kodevurderinger eller større redigeringer, vil du på den anden side have den hurtigste og mest effektive editor, du kan finde. Denne redaktør kan godt være Sublime Text.

Omkostninger: Ubegrænset gratis prøveperiode; $ 70 pr. Bruger til forretnings- eller personlig licens. Platforme: Windows, MacOS og Linux.

Visual Studio-kode

Visual Studio Code er en gratis letvægtsredaktør og IDE fra Microsoft. Det har komponenter fra Visual Studio blandet med open source Atom Electron shell, der giver fremragende support til ASP.Net Core-udvikling med C # og til Node.js-udvikling med TypeScript og JavaScript. Bryder med Microsofts historiske mønster om kun at understøtte Visual Studio på Windows, kører Visual Studio Code også på MacOS og Linux. Skærmbilledet nedenfor blev taget på MacOS.

Visual Studio Code har utrolig god JavaScript-kodefuldførelse takket være inkluderingen af TypeScript-kompilatoren og Salsa-motoren. Visual Studio Code sender din JavaScript-kode til TypeScript-kompilatoren i baggrunden for at udlede typer og oprette en symboltabel. Du kan se resultaterne i feltet nær bunden af skærmbilledet, der viser oplysningerne tilhasOwnProperty metode.

Den samme symboltabel gør det muligt for IntelliSense at give dig gode pop-up-lister til valg af kode gennem hele typning af et udtryk. Du får automatisk parenteselukning, automatiske ordudfyldningsindstillinger, automatiske metodelister, når du skriver .og automatiske parameterlister inden for en metode. Du kan forbedre IntelliSense ved at tilføje referencer til d.ts-filer fraDefinitivt indtastetog Visual Studio Code vil tilbyde at gøre det for dig, når det genkender almindelige problemer, såsom brugen af__dirname, som er en indbygget Node.js-variabel.

Git support er meget god og ret enkel at bruge. Visual Studio Code debugger giver en fremragende fejlretningsoplevelse til Node.js-udvikling (og ASP.Net-udvikling). Visual Studio Code har meget god værktøj til HTML, CSS, Less, Sass og JSON, som er baseret på den samme teknologi, der driver Internet Explorer F12 udviklerværktøjer. Derudover har den tilpasset integration med eksterne opgaveløbere som f.eksgulp ogjake.

Visual Studio Code har tiltrukket et robust økosystem af plugins - for eksempel for at understøtte Angular og React. Det er nu den editor, jeg anbefaler, når jeg skriver tutorials om bygning af apps med JavaScript og TypeScript-rammer og biblioteker.

Omkostninger: Gratis open source. Platform: Windows, MacOS og Linux.

Beslag

Brackets er en gratis open source-editor, oprindeligt fra Adobe, bygget til at give bedre værktøj til JavaScript, HTML og CSS samt relaterede åbne webteknologier. Selve parenteser er skrevet i JavaScript, HTML og CSS, og udviklerne bruger parenteser til at bygge parenteser. Ud over de indbyggede funktioner har Brackets en udvidelsesadministrator, og udvidelser er tilgængelige for mange af de sprog og værktøjer, som front-end-udviklere bruger. Beslag er ikke så hurtig som Sublime Text eller TextMate, men det er stadig ret hurtigt bortset fra pauser for at indlæse eller opdatere programindhold fra internettet.

Brackets har god support til JavaScript, CSS, HTML og Node.js. Det har også gode funktioner såsom inline-redigering af CSS relateret til et HTML-id (hurtig redigering). Derudover har beslag et rent brugergrænseflade og en live preview til websider, du redigerer. Det er et meget godt valg for en gratis kodeditor.

JavaScript-autofuldførelse i parenteser er meget god med automatisk lukning af parenteser, vinkelparenteser og firkantede parenteser samt automatiske rullemenuer til nøgleord, variabler og metoder, herunder jQuery-metoder, når du har skrevet $. Beslag kan styre Node.js debugger og genstarte Node fra et menupunkt. Det er let at tilføje udvidelser til yderligere funktionalitet såsom TypeScript og JSX support, Bower integration og Git integration.

Hurtig redigering, hurtigdokumenter, hurtigåbning og livevisning hjælper alle med at strømline redigering af webapplikationer og giver dig mulighed for at fokusere på det, du koder eller designer. På ulempen kan nogle parentesudvidelser være vanskelige at konfigurere, men ikke så vanskelige som Emacs-pakker eller Vim-plugins.

Omkostninger: Gratis open source. Platforme: Windows, MacOS, Linux.

Atom

Atom er en gratis, open source, hackbar programmeringseditor fra GitHub til Windows, MacOS og Linux, der integreres med GitHub-appen og har tusindvis af pakker og temaer tilgængelige. Jeg klarer mig med et par fællesskabspakker plus kernepakkerne og temaerne.

Ikke overraskende i betragtning af dets oprindelse er Atom-kilden hostet på GitHub. Det er skrevet i CoffeeScript og integreret med Node.js. Atom er en specialiseret variant af Chromium designet til at være en teksteditor snarere end en webbrowser; hvert Atom-vindue er i det væsentlige en lokalt gengivet webside. Atom-teamet udvikler Atom i Atom.

Atoms ydeevne er ret god, når den ikke opdaterer sig selv. Det er fuldt udstyret uden for kassen med en fuzzy finder, hurtig projektomfattende søgning og udskiftning, flere markører og markeringer, flere ruder, uddrag, kodefoldning og muligheden for at importere TextMate-grammatikker og temaer. Atom kan installere to kommandolinjeværktøjer: Atom til at starte editoren fra en shell og APM til at administrere Atoms pakker i ånden af NPM for Node.js. Jeg finder mig selv ved at bruge Atom meget, når jeg gennemser arkiver, jeg klonede fra GitHub, fordi GitHub-applikationen indeholder et genvejsmenupunkt til at gøre det.