Recenzija: 10 najboljih JavaScript urednika

JavaScript programeri imaju na raspolaganju mnogo dobrih alata - gotovo previše da bi ih se moglo pratiti. U ovom članku raspravljam o 10 uređivača teksta s dobrom podrškom za razvoj s JavaScriptom, HTML5 i CSS-om te za dokumentiranje s Markdownom. Zašto koristiti uređivač za JavaScript programiranje umjesto IDE-a? Jednom riječju: brzina.

Bitna razlika između urednika i IDE-a je ta što IDE-i mogu otkloniti pogreške i ponekad profilirati vaš kôd, a IDE-ovi imaju podršku za sustave upravljanja životnim ciklusom aplikacija (ALM). Mnogi urednici o kojima ovdje raspravljamo podržavaju barem jedan sustav za kontrolu verzija, često Git, tako da taj kriterij manje razlikuje IDE-e od urednika nego što je to bio nekada.

Sublime Text i Visual Studio Code su na vrhu među JavaScript urednicima - Sublime Text zbog svoje brzine koliko i svojih prikladnih značajki za uređivanje, a Visual Studio Code za još boljih značajki i brzine koja je gotovo jednako dobra. Zagrade zauzima treće mjesto. Iako se TextMate prije nekoliko godina visoko plasirao na mom popisu, njegove mogućnosti zapravo nisu išle u korak s novim razvojem.

Najvjerojatnije ćete svoj odabrani uređivač JavaScript pronaći u Sublime Text, Visual Studio Code ili Brackets. Ali nekoliko drugih alata - Atom, BBEdit, Komodo Edit, Notepad ++, Emacs i Vim - svi ih imaju što preporučiti. Ovisno o zadatku koji vam je pri ruci, možda će vam biti pri ruci bilo koji od njih.

Povezani videozapis: Što je JavaScript? Objašnjava kreator Brendan Eich

Brendan Eich, tvorac programskog jezika JavaScript, objašnjava kako se jezik koristi i zašto je i dalje omiljen među programerima zbog jednostavnosti upotrebe.

Prođimo kroz opcije i na kraju ih usporedimo.

Uzvišeni tekst

Ako želite fleksibilan, moćan, proširiv programski uređivač teksta koji je munjevit i ne smeta vam prebacivanje na druge prozore za provjeru koda, ispravljanje pogrešaka i implementaciju, onda ne tražite dalje od Uzvišenog teksta.

Osim brzine, mnoge značajne snage Sublime Text-a pokrivaju i više od 70 vrsta datoteka, među kojima su JavaScript, HTML i CSS; gotovo trenutna navigacija i trenutno prebacivanje projekata; višestruki odabir (napravite hrpu promjena odjednom), uključujući odabir stupaca (odaberite pravokutno područje datoteke); više prozora (koristite sve svoje monitore) i podijeljeni prozori (iskoristite nekretnine na zaslonu); potpunu prilagodbu jednostavnim JSON datotekama; API dodatka zasnovan na Pythonu; i objedinjena paleta naredbi koja se može pretraživati.

Za programere koji dolaze iz drugih urednika, Sublime Text podržava TextMate snopove (isključujući naredbe) i Vi / Vim emulaciju. Neslužbena dokumentacija Sublime Text daje omalovažavajuće (i netočne) primjedbe na korisnike Emacsa ( moi , na primjer), ali previdjet ću ih. Zašto uopće postoji neslužbena dokumentacija Sublime Text? Pa, kao prvo, službena dokumentacija je manje nego potpuna - puno manje.

Kad sam ranije rekao "gotovo trenutna navigacija", mislio sam ozbiljno. Na primjer, da bih skočio s trenutnog mjesta na zaslonu na definiciju getResponseHeaderu ajax.js, mogu upisati Command-P na Macu ili Ctrl-P na računalu, a zatim ajotvoriti privremeni prikaz u ajax.js, zatim @grhi Enter da biste otvorili karticu s getResponseHeaderodabranim. Uzvišeni tekst može pratiti moje tipkanje. Osjećaj je podjednako reagirajući kao i neki od najboljih starih DOS-ovih urednika poput Brief i Kedit.

Nakon što odaberem  getResponseHeader, mogu pronaći sve upotrebe funkcije u kontekstu tako da na Mac unesem Shift-Command-F ili Shift-Ctrl-F na računalu, a zatim Enter. Nova kartica prikazat će mi rezultate pretraživanja s pojmom za pretraživanje koji je uokviren u svaki isječak od pet redaka. Dvostrukim klikom na uokvireni tekst prikazuje se puni kontekst datoteke na novoj kartici.

Klikom na naziv datoteke na lijevoj bočnoj traci mapa pojavit će se prijelazna kartica koja prikazuje sadržaj datoteke. Klik na drugu datoteku zamjenjuje tu karticu. I ovdje je Sublime Text u stanju pratiti moje tipkanje i klikanje. Slično tome, navigacija smanjene veličine u gornjem desnom dijelu stranice omogućuje mi kretanje unutar datoteke gotovo trenutno, bez opsežnog pomicanja. Volio bih da je Microsoft Word jednako reagirao.

Višestruki odabir i odabir stupaca brzo rade na vrstama dosadnih uređivanja koja su prije zahtijevala regularne izraze. Trebate li popis riječi pretvoriti u JSON strukturu gdje je svaka riječ okružena dvostrukim navodnicima, a svaka citirana riječ odvojena je zarezom od sljedeće? Potrebno je oko osam tipki u uzvišenom tekstu, bez obzira koliko riječi imate na popisu.

Na svom razvojnom okviru za Windows koristim dva široka monitora. Na svom MacBooku koristim Retina zaslon i Thunderbolt zaslon. Ako ne uređujem na jednom zaslonu i ne ispravljam pogreške na drugom, obično želim istodobno vidjeti puno različitih izvornih datoteka i različitih pogleda u izvorne datoteke. Uzvišeni tekst podržava više prozora, podijeljene prozore, više radnih prostora po projektu, više pogleda i više okna koja sadrže poglede. Prilično je jednostavno koristiti svu moju nekretninu na ekranu kad to želim i konsolidirati kada treba napraviti prostora za ispravljanje pogrešaka i testiranje.

Možete prilagoditi sve o uzvišenom tekstu: shemu boja, font teksta, povezivanja globalnih ključeva, zaustavljanja kartica, vezivanja i isječke tipki specifičnih za datoteku, pa čak i pravila isticanja sintakse. Postavke su kodirane kao JSON datoteke. Definicije specifične za jezik su datoteke s postavkama XML-a. Postoji aktivna zajednica oko Sublime Text koja stvara i održava Sublime Text pakete i dodatke. Mnoge značajke za koje sam u početku smatrao da nedostaju uzvišenom tekstu - uključujući sučelja JSLint i JSHint, podršku za JsFormat, JsMinify, PrettyJSON i Git - ispadaju dostupne u zajednici, koristeći program za instaliranje paketa.

Jedan od razloga sjajne izvedbe Sublime Text-a je taj što je čvrsto kodiran. Drugi je razlog taj što Sublime Text nije IDE i ne treba mu knjigovodstvene troškove IDE-a.

Sa stajališta programera, ovo je zeznut kompromis. Ako ste u uskoj razvojnoj petlji vođenoj testom "crvena, zelena, refaktor", tada će vam najviše pomoći IDE koji je postavljen za uređivanje, testiranje, refaktor i praćenje koda. S druge strane, ako radite recenzije koda ili veće izmjene, poželjet ćete najbrži i najučinkovitiji uređivač koji možete pronaći. Taj urednik mogao bi biti Sublime Text.

Cijena: neograničeno besplatno probno razdoblje; 70 dolara po korisniku za poslovnu ili osobnu licencu. Platforme: Windows, MacOS i Linux.

Visual Studio kôd

Visual Studio Code je besplatni lagani uređivač i IDE tvrtke Microsoft. Sadrži komponente Visual Studija, pomiješane s ljuskom otvorenog koda Atom Electron, pružajući izvrsnu podršku za razvoj ASP.Net Core s C # i za razvoj Node.js s TypeScriptom i JavaScriptom. Prekidajući Microsoftov povijesni obrazac da podržava samo Visual Studio u sustavu Windows, Visual Studio Code također radi na MacOS-u i Linuxu. Snimak zaslona u nastavku snimljen je na MacOS-u.

Visual Studio Code ima nevjerojatno dobru dovršenost JavaScript koda, zahvaljujući uključivanju TypeScript kompajlera i mehanizma Salsa. Visual Studio Code šalje vaš JavaScript kôd prevoditelju TypeScript u pozadini kako bi zaključio vrste i izgradio tablicu simbola. Rezultate možete vidjeti u okviru pri dnu slike na zaslonu koji prikazuje informacije o  hasOwnProperty metodi.

Ista tablica simbola omogućuje IntelliSenseu da vam pruži sjajne skočne popise opcija za dovršavanje koda tijekom tipkanja izraza. Dobivate automatsko zatvaranje zagrada, mogućnosti automatskog dopunjavanja riječi, automatske popise metoda nakon unosa .i automatske popise parametara unutar metode. Možete poboljšati IntelliSense dodavanjem referenci na d.ts datoteke iz  DefinitelyTyped, a Visual Studio Code ponudit će to učiniti umjesto vas kad prepozna uobičajene probleme, poput upotrebe  __dirname, koja je ugrađena varijabla Node.js.

Git podrška je vrlo dobra i vrlo jednostavna za upotrebu. Program za ispravljanje pogrešaka Visual Studio nudi izvrsno iskustvo ispravljanja pogrešaka za razvoj Node.js (i razvoj ASP.Net). Visual Studio Code ima vrlo dobar alat za HTML, CSS, Less, Sass i JSON, koji se temelji na istoj tehnologiji koja pokreće alate za razvojne programere Internet Explorer F12. Uz to ima prilagodljivu integraciju s vanjskim pokretačima zadataka kao što su  gulp i  jake.

Visual Studio Code privukao je robusni ekosustav dodataka - na primjer, za podršku Angular i React. Sada je uređivač koji preporučujem kada pišem vodiče o gradnji aplikacija s JavaScript i TypeScript okvirima i knjižnicama.

Cijena: Besplatni otvoreni kod. Platforma: Windows, MacOS i Linux.

Zagrade

Brackets je besplatni uređivač otvorenog koda, izvorno iz Adobea, napravljen da pruži bolje alate za JavaScript, HTML i CSS, kao i srodne otvorene web tehnologije. Sami zagrade napisani su u JavaScript, HTML i CSS, a programeri koriste zagrade za izradu zagrada. Pored ugrađenih mogućnosti, Brackets ima i upravitelj proširenja, a proširenja su dostupna za mnoge jezike i alate koje koriste front-end programeri. Zagrade nisu tako brze kao Sublime Text ili TextMate, ali su i dalje prilično brze, osim stanki za učitavanje ili ažuriranje programskog sadržaja s weba.

Zagrade imaju dobru podršku za JavaScript, CSS, HTML i Node.js. Također ima lijepe značajke kao što je linijsko uređivanje CSS-a povezano s HTML ID-om (brzo uređivanje). Uz to, zagrade sadrže čisto korisničko sučelje i pregled uživo za web stranice koje uređujete. To je vrlo dobar izbor za besplatni uređivač koda.

Automatsko dovršavanje JavaScript-a u zagradama vrlo je dobro, s automatskim zatvaranjem zagrada, kutnih zagrada i uglatih zagrada, kao i automatskim padajućim izbornicima za ključne riječi, varijable i metode, uključujući jQuery metode nakon što unesete $. Zagrade mogu kontrolirati program za ispravljanje pogrešaka Node.js i ponovno pokrenuti Node iz stavke izbornika. Jednostavno je dodati proširenja za dodatne funkcije kao što su TypeScript i JSX podrška, Bower integracija i Git integracija.

Brzo uređivanje, brzi dokumenti, brzo otvaranje i pregled uživo omogućuju pojednostavljivanje uređivanja web aplikacija i omogućuju vam da se usredotočite na ono što kodirate ili dizajnirate. Negativno je to što neka proširenja zagrade mogu biti nezgodno konfigurirati, ali ne tako lukavo kao Emacs paketi ili Vim dodaci.

Cijena: Besplatni otvoreni kod. Platforme: Windows, MacOS, Linux. 

Atom

Atom je besplatni uređivač programiranja s otvorenim kodom, koji se može provaliti iz GitHub-a za Windows, MacOS i Linux, koji se integrira s aplikacijom GitHub i ima na raspolaganju tisuće paketa i tema. Snalazim se s nekoliko zajedničkih paketa, plus osnovni paketi i teme.

Nije iznenađujuće, s obzirom na svoje podrijetlo, izvor Atoma hostiran je na GitHubu. Napisan je na jeziku CoffeeScript i integriran s Node.js. Atom je specijalizirana inačica Chromiuma dizajnirana da bude uređivač teksta, a ne web preglednik; svaki Atomov prozor u osnovi je lokalno prikazana web stranica. Atom tim razvija Atom u Atomu.

Izvedba Atoma prilično je dobra kad se ne ažurira. Potpuno je opremljen, s nejasnim pretraživačem, brzim pretraživanjem i zamjenom na cijelom projektu, višestrukim pokazivačima i odabirima, više okna, isječcima, presavijanjem koda i mogućnošću uvoza gramatika i tema TextMate. Atom može instalirati dvije uslužne programe naredbenog retka: Atom za pokretanje uređivača iz ljuske i APM za upravljanje paketima Atoma, u duhu NPM-a za Node.js. Mnogo se koristim Atomom prilikom pregledavanja spremišta koja sam klonirao iz GitHub-a, jer aplikacija GitHub uključuje stavku kontekstnog izbornika za to.

Cijena: Besplatni otvoreni kod. Platforme: Windows, MacOS, Linux.

Komodo Edit

Komodo Edit, ActiveStateova besplatna verzija komodo IDE-a sa smanjenom funkcionalnošću, prilično je dobar višejezični uređivač. Sve što sam imao reći o Komodo IDE-u kao uredniku (vidi “Pregled: 6 najboljih JavaScript IDE-a”) odnosi se na Komodo Edit.