Pregled: 10 najboljših urejevalnikov JavaScript

Programerji JavaScript imajo na izbiro veliko dobrih orodij - skoraj preveč, da bi jih lahko spremljali. V tem članku obravnavam 10 urejevalnikov besedil z dobro podporo za razvoj z JavaScript, HTML5 in CSS ter za dokumentiranje z Markdownom. Zakaj namesto IDE uporabiti urejevalnik za programiranje JavaScript? Z eno besedo: hitrost.

Bistvena razlika med urejevalniki in IDE je v tem, da lahko IDE razhrostijo in včasih profilirajo kodo, IDE pa imajo podporo za sisteme upravljanja življenjskega cikla aplikacij (ALM). Mnogi uredniki, o katerih razpravljamo tukaj, podpirajo vsaj en sistem za nadzor različic, pogosto Git, tako da merilo manj razlikuje med IDE-ji in urejevalniki kot nekoč.

Sublime Text in Visual Studio Code sta na vrhu med urejevalniki JavaScript - Sublime Text zaradi svoje hitrosti in priročnih funkcij urejanja, Visual Studio Code pa za še boljše funkcije in skoraj enako dobro hitrost. Tretje mesto zaseda oklepaj. Čeprav se je TextMate pred nekaj leti visoko uvrstil na moj seznam, njegove zmogljivosti v resnici niso sledile novemu razvoju.

Najverjetneje boste izbrani urejevalnik JavaScript našli v Sublime Text, Visual Studio Code ali Brackets. Toda več drugih orodij - Atom, BBEdit, Komodo Edit, Notepad ++, Emacs in Vim - jih ima vse, da jih priporoči. Glede na nalogo, ki vam je na voljo, boste morda našli katero od njih priročno za obisk.

Povezani video: Kaj je JavaScript? Ustvarjalec Brendan Eich pojasnjuje

Brendan Eich, ustvarjalec programskega jezika JavaScript, razloži, kako se jezik uporablja in zakaj je še vedno priljubljen med programerji zaradi enostavnosti uporabe.

Poglejmo si možnosti in jih na koncu primerjajmo.

Vzvišeno besedilo

Če želite prilagodljiv, zmogljiv, razširljiv programski urejevalnik besedil, ki je bliskovit in vam ni do tega, da bi za preverjanje, odpravljanje napak in uvajanje kode preklopili na druga okna, potem ne iščite več kot Sublime Text.

Številne pomembne prednosti Sublime Text poleg hitrosti zajemajo tudi več kot 70 vrst datotek, med njimi JavaScript, HTML in CSS; skoraj takojšnja navigacija in takojšnje preklapljanje med projekti; več izbir (naredite kup sprememb naenkrat), vključno z izbirami stolpcev (izberite pravokotno območje datoteke); več oken (uporabite vse monitorje) in razdeljena okna (izkoristite nepremičnine na zaslonu); popolna prilagoditev s preprostimi datotekami JSON; API vtičnika na osnovi Pythona; in enotno paleto ukazov, ki jo je mogoče iskati.

Za programerje, ki prihajajo iz drugih urednikov, Sublime Text podpira svežnje TextMate (razen ukazov) in emulacijo Vi / Vim. Neuradna dokumentacija Sublime Text daje omalovažujoče (in napačne) pripombe o uporabnikih Emacsa (moina primer), vendar jih bom spregledal. Zakaj sploh obstaja neuradna dokumentacija Sublime Text? No, kot prvo, uradna dokumentacija je manj kot popolna - veliko manj.

Ko sem prej rekel »skoraj takojšnja navigacija«, sem to resno mislil. Na primer, da skočite s trenutne lokacije na zaslonu na definicijo getResponseHeader v ajax.js lahko vtipkam Command-P na Macu ali Ctrl-P na PCju aj da odprete prehodni pogled v ajax.js, nato @grh in Enter, da odprete zavihek z getResponseHeader izbrano. Sublime Text lahko sledi mojemu tipkanju. Počuti se enako odziven kot nekateri najboljši stari urejevalniki DOS, kot sta Brief in Kedit.

Ko sem izbralgetResponseHeader, Vse navade funkcije najdem v kontekstu tako, da v Mac vtipkam Shift-Command-F ali v računalniku Shift-Ctrl-F in nato Enter. Nov zavihek mi bo pokazal rezultate iskanja z iskalnim izrazom, ki je v vsakem petvrstičnem odrezku. Dvoklik na polje z besedilom prikaže celoten kontekst datoteke na novem zavihku.

Če kliknete ime datoteke v levi stranski vrstici Mape, se odpre prehodni zavihek, ki prikazuje vsebino datoteke. Klik na drugo datoteko nadomesti ta zavihek. Tudi tu lahko Sublime Text sledi mojim tipkanjem in klikom. Podobno tudi navigacija zmanjšane velikosti v zgornjem desnem kotu strani omogoča skoraj takojšnje premikanje po datoteki, ne da bi se pomaknili zgoraj. Želim si, da bi bil Microsoft Word tako odziven.

Več izbir in izbir stolpcev omogoča hitro delo z nekakšnimi nadležnimi urejanji, ki so prej zahtevale regularne izraze. Ali morate seznam besed spremeniti v strukturo JSON, kjer je vsaka beseda obkrožena z dvojnimi narekovaji, vsaka navedena beseda pa je od naslednje ločena z vejico? V Sublime Text je potrebnih približno osem pritiskov tipk, ne glede na to, koliko besed imate na seznamu.

V svojem razvojnem polju Windows uporabljam dva široka monitorja. V svojem MacBooku uporabljam zaslon Retina in zaslon Thunderbolt. Če ne urejam na enem zaslonu in odpravljam napak na drugem, si navadno želim hkrati ogledati veliko različnih izvornih datotek in različnih pogledov v izvorne datoteke. Sublime Text podpira več oken, razdeljena okna, več delovnih prostorov na projekt, več pogledov in več podoken, ki vsebujejo poglede. Preprosto je uporabiti vso nepremičnino na zaslonu, kadar želim, in utrditi, ko moram narediti prostor za odpravljanje napak in testiranje.

O sublimnem besedilu lahko prilagodite vse: barvno shemo, pisavo besedila, povezave globalnih tipk, zavihke, zaveznice in delčke ključev za datoteke in celo pravila za poudarjanje sintakse. Nastavitve so kodirane kot datoteke JSON. Definicije, specifične za jezik, so datoteke z nastavitvami XML. Okoli Sublime Text deluje aktivna skupnost, ki ustvarja in vzdržuje pakete in vtičnike Sublime Text. Številne funkcije, za katere sem sprva mislil, da jim sublime text primanjkuje - vključno z vmesniki JSLint in JSHint, podporo za JsFormat, JsMinify, PrettyJSON in Git - se izkažejo za dostopne prek skupnosti s pomočjo programa Package Installer.

Eden od razlogov za odlično izvedbo Sublime Text je, da je tesno kodiran. Drug razlog je, da Sublime Text ni IDE in ne potrebuje knjigovodskih stroškov IDE.

Z vidika razvijalca je to zapleten kompromis. Če ste v tesni testno usmerjeni razvojni zanki »rdeče, zeleno, refaktor«, vam bo najbolj pomagal IDE, ki je nastavljen za urejanje, testiranje, refaktor in kodo sledenja. Če izvajate preglede kode ali večje urejanja, boste želeli najhitrejši in najučinkovitejši urejevalnik, ki ga najdete. Ta urednik bi lahko bil Sublime Text.

Cena: neomejen brezplačni preskus; 70 USD na uporabnika za poslovno ali osebno licenco. Platforme: Windows, MacOS in Linux.

Koda Visual Studio

Visual Studio Code je brezplačen lahek urejevalnik in IDE Microsofta. Vsebuje komponente Visual Studio, pomešane z odprtokodno lupino Atom Electron, ki zagotavljajo odlično podporo za razvoj ASP.Net Core s C # in za razvoj Node.js s TypeScriptom in JavaScriptom. V nasprotju z Microsoftovim zgodovinskim vzorcem, ki podpira Visual Studio samo v sistemu Windows, Visual Studio Code deluje tudi v sistemih MacOS in Linux. Spodnji posnetek zaslona je bil posnet v sistemu MacOS.

Visual Studio Code ima neverjetno dobro dokončanje kode JavaScript, zahvaljujoč vključitvi prevajalnika TypeScript in mehanizma Salsa. Visual Studio Code pošlje vašo kodo JavaScript prevajalniku TypeScript v ozadju, da sklepa na vrste in gradi tabelo simbolov. Rezultate si lahko ogledate v polju na dnu slike na zaslonu, ki prikazuje informacije zahasOwnProperty metoda.

Ista tabela simbolov omogoča IntelliSenseu, da vam prikaže odlične pojavne sezname možnosti za dokončanje kode med tipkanjem izraza. Po vnosu dobite samodejno zaklepanje v oklepajih, možnosti samodejnega dokončanja besed, samodejne sezname metod .in samodejni seznami parametrov znotraj metode. IntelliSense lahko izboljšate tako, da dodate sklice na datoteke d.ts izVsekakor tipin Visual Studio Code vam bo to ponudil, ko bo prepoznal pogoste težave, na primer uporabo__dirname, ki je vgrajena spremenljivka Node.js.

Podpora za Git je zelo dobra in dokaj enostavna za uporabo. Napaka za odpravljanje napak Visual Studio ponuja odlično izkušnjo odpravljanja napak za razvoj Node.js (in razvoj ASP.Net). Visual Studio Code ima zelo dobro orodje za HTML, CSS, Less, Sass in JSON, ki temelji na isti tehnologiji, ki poganja orodja za razvijalce Internet Explorer F12. Poleg tega ima prilagodljivo integracijo z zunanjimi tekači opravil, kot jepožirek injake.

Visual Studio Code je pritegnil močan ekosistem vtičnikov - na primer za podporo Angular in React. Zdaj je urejevalnik, ki ga priporočam, ko pišem vadnice o gradnji aplikacij z ogrodji in knjižnicami JavaScript in TypeScript.

Cena: brezplačno odprtokodno. Platforma: Windows, MacOS in Linux.

Nosilci

Brackets je brezplačen odprtokodni urejevalnik, prvotno iz Adobeja, zasnovan za zagotavljanje boljšega orodja za JavaScript, HTML in CSS ter s tem povezane odprte spletne tehnologije. Sam oklepaji so napisani v JavaScript, HTML in CSS, razvijalci pa z oklepaji gradijo oklepaje. Poleg vgrajenih zmogljivosti ima Brackets upravitelja razširitev, razširitve pa so na voljo za številne jezike in orodja, ki jih uporabljajo front-end razvijalci. Oklepaji niso tako hitri kot Sublime Text ali TextMate, vendar je vseeno precej hiter, razen začasne ustavitve nalaganja ali posodabljanja programske vsebine iz spleta.

Oklepaji imajo dobro podporo za JavaScript, CSS, HTML in Node.js. Ima tudi lepe funkcije, na primer urejanje CSS v vrstici, povezano z ID-jem HTML (hitro urejanje). Poleg tega ima oklepaji čist uporabniški vmesnik in predogled v živo za spletne strani, ki jih urejate. To je zelo dobra izbira za brezplačni urejevalnik kod.

Samodejno dokončanje JavaScript v oklepajih je zelo dobro, s samodejnim zapiranjem oklepajev, kotnih oklepajev in oglatih oklepajev ter samodejnimi spustnimi meniji za ključne besede, spremenljivke in metode, vključno z metodami jQuery po vnosu $. Oklepaji lahko nadzorujejo razhroščevalnik Node.js in znova zaženejo Node iz elementa menija. Enostavno je dodati razširitve za dodatne funkcije, kot so podpora za TypeScript in JSX, integracija Bower in integracija Git.

Hitro urejanje, hitri dokumenti, hitro odpiranje in predogled v živo pomagajo poenostaviti urejanje spletnih aplikacij in se osredotočijo na to, kaj kodirate ali oblikujete. Slaba stran je, da je nekatere razširitve oklepajev težko konfigurirati, vendar ne tako zapleteno kot paketi Emacs ali vtičniki Vim.

Cena: brezplačno odprtokodno. Platforme: Windows, MacOS, Linux.

Atom

Atom je brezplačen, odprtokodni programski urejevalnik programov GitHub za Windows, MacOS in Linux, ki se integrira z aplikacijo GitHub in ima na voljo na tisoče paketov in tem. Prebrodim nekaj skupnostnih paketov ter osnovne pakete in teme.

Ni presenetljivo, ker izvor Atom gostuje na GitHubu. Zapisano je v CoffeeScript in integrirano z Node.js. Atom je specializirana različica Chromiuma, zasnovana kot urejevalnik besedil in ne kot spletni brskalnik; vsako okno Atom je v bistvu lokalno upodobljena spletna stran. Ekipa Atoma razvija Atom v Atomu.

Atomova zmogljivost je precej dobra, če se ne posodablja. Popolnoma je opremljen z nejasnim iskalnikom, hitrim iskanjem in zamenjavo po celotnem projektu, več kazalci in izbirami, več podokni, delčki, zlaganje kode in možnostjo uvoza slovnic in tem TextMate. Atom lahko namesti dve pripomočki ukazne vrstice: Atom za zagon urejevalnika iz lupine in APM za upravljanje paketov Atom v duhu NPM za Node.js. Atom veliko uporabljam pri brskanju po repozitorijih, ki sem jih kloniral iz GitHub, ker aplikacija GitHub vključuje element kontekstnega menija za to.