Pregled: 6 najboljih IDE-ova za JavaScript

JavaScript se danas koristi za razne vrste aplikacija. JavaScript najčešće radi s HTML5 i CSS-om kako bi stvorio web stranice. No, JavaScript također pomaže u izradi mobilnih aplikacija i našao je važno mjesto na stražnjoj strani u obliku Node.js poslužitelja. Srećom, alati za razvoj JavaScripta - i urednici i IDE - ustaju kako bi odgovorili novim izazovima.

Zašto koristiti IDE umjesto uređivača? Glavni razlog je taj što IDE može otkloniti pogreške i ponekad profilirati vaš kôd. IDE-ovi također imaju podršku za ALM sustave, integrirajući se s Git-om, GitHub-om, Mercurial-om, Subverzijom i Perforce-om za kontrolu verzija. No kako sve više urednika dodaje kuke tim sustavima, podrška za ALM postaje sve manja razlika.

Eclipse 2018 s JavaScript razvojnim alatima

Još u davna vremena kada je Java Swing bio nov i uzbudljiv, uživao sam koristiti Eclipse za razvoj Jave, ali ubrzo sam prešao na druge Java IDE-ove. Prije pet i više godina, kada sam razvijao Android s Eclipseom, otkrio sam da je to iskustvo u redu, ali nesigurno. Kada sam 2014. godine pokušao koristiti Eclipse Luna s JSDT-om za razvoj JavaScript-a, stalno je prikazivao lažno pozitivne pogreške za valjani kôd koji je prošao JSHint.

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.

Srećom, nekoliko dobavljača i projekata otvorenog koda od tada se pojačalo. Eclipse 2018 s JavaScript razvojnim alatima ima pristojan JavaScript uređivač i program za ispravljanje pogrešaka temeljenih na Chromeu, ali ne zna za TypeScript koji koristi Angular niti za ES6 i JSX datoteke koje koristi React.

Eclipse je uvijek uživao veliko tržište dodataka. Za TypeScript razmotrite besplatni dodatak TypeScript 1.0.0. Za Angular, TypeScript i ES6 razmotrite komercijalni Angular IDE (od CodeMix, ranije Webclipse), a za React projekte s JSX datotekama isprobajte TypeScript IDE otvorenog koda. Ako dodate više od jedne, morat ćete riješiti njihov spor oko toga koja bi trebala uređivati ​​TypeScript datoteke, ali to nije velika stvar.

Alati CodeMix naplaćuju se kao dodavanje pametnih programa Visual Studio Code u Eclipse. Za razliku od većine dodataka Eclipse, Angular IDE by CodeMix nije besplatan, ali ima 45-dnevno besplatno probno razdoblje. S obzirom na to da je Visual Studio Code besplatan, razmislio bih o tome prije plaćanja za Angular IDE.

Trošak: Besplatno; Kutni IDE po CodeMixu, 29 USD (osobni) ili 48 USD (komercijalni) godišnje. Platforma: Windows, MacOS i Linux.

ActiveState Komodo IDE

Korisnik sam i obožavatelj Komodo IDE-a od njegovog prvog uvođenja 2001. Iako su ga noviji proizvodi poput Visual Studio Code i WebStorm u nekim područjima nadmašili, i dalje je dobar urednik i IDE.

Komodo IDE nudi napredno uređivanje JavaScript-a, isticanje sintakse, navigaciju i ispravljanje pogrešaka, ali ne uključuje provjeru JavaScript koda. Za to uvijek možete pokrenuti JSHint u ljusci.

Komodo podržava desetke programskih i markup jezika. Sa svojim širokim rasponom programske podrške i podrške za označni jezik, uključujući refaktoriranje, uklanjanje pogrešaka i profiliranje, Komodo IDE je vrlo dobar izbor za end-to-end razvoj na jezicima otvorenog koda.

Komodo ima modul za refaktoriranje koda za sve jezike za koje pruža inteligenciju koda: PHP, Perl, Python, Ruby, Tcl, JavaScript i Node.js. Nažalost, priroda „najmanje zajedničkog nazivnika“ ovog pristupa ograničava mogućnosti preimenovanja varijabli i članova klase te izdvajanja koda u metodu. Ipak, ovo su neki od najkorisnijih slučajeva.

Komodo IDE ima i uređivanje stupaca i višestruki odabir. Ovo pruža gotovo paritet uzvišenom tekstu i TextMateu što se masovnih uređivanja tiče. Sve dok radimo usporedbu, Komodo je više IDE, dok je Sublime Text puno brži. I dok razgovaramo o performansama, Komodova brzina znatno se poboljšala u usporedbi sa starijim verzijama, u crtanju zaslona, ​​pretraživanju i provjeri sintakse.

Komodo IDE ima nekoliko značajki koje nedostaju većini konkurentskih proizvoda. Jedan je njegov HTTP inspektor, koji je izvrstan za ispravljanje pogrešaka Ajaxovih povratnih poziva. Drugi je njegov Rx (regularni izraz ili regularni izraz) alat koji je izvrstan način za izgradnju i testiranje regularnih izraza za JavaScript, Perl, PHP, Python i Ruby.

Suradnja je još jedan Komodo IDE-ov diferencijator - shvatite to kao Google dokumente za kôd. Možete stvoriti sesije za grupe datoteka, dodavati kontakte sesijama kao suradnici, a zatim istovremeno raditi na istim datotekama uz sinkronizaciju gotovo u stvarnom vremenu.

Suradnja nije zamjena za kontrolu izvornog koda, ali je koristan dodatak. Komodo IDE integrira kontrolu izvornog koda koristeći CVS, Subversion, Perforce, Git, Mercurial i Bazaar. Podržane su samo osnovne operacije kontrole verzija. Napredne operacije, poput grananja, moraju se izvoditi pomoću zasebnog klijenta za kontrolu izvornog koda.

Iako Komodo nema vlastiti program za oblikovanje JavaScript dokumenata, u tu svrhu koristi najbolji besplatni otvoreni izvor. Izvan okvira, zadani je formativač za JavaScript datoteke JS Beautifier, ali još je devet opcija dostupno kroz padajući izbornik.

Komodo IDE podržava otklanjanje pogrešaka na strani klijenta u Chromeu, a može ispraviti pogreške na Node.js-u i lokalno i udaljeno. Također otklanja pogreške u programu Perl, Python, PHP, Ruby, Tcl i XSLT.

Komodo IDE ima DOM preglednik koji vam omogućuje pregled XML i HTML dokumenata kao sklopivih stabala. Omogućuje vam i XPath pretraživanja za filtriranje stabla.

Komodo-ovi moduli za profiliranje koda i jedinično testiranje ne podržavaju JavaScript. Međutim, JavaScript i Node.js podržavaju Komodov modul Code Intelligence, koji implementira pregledavanje koda, automatsko dovršavanje i pozive.

Komodo IDE može objavljivati ​​grupe datoteka putem FTP-a, SFTP-a, FTPS-a ili SCP-a. Komodo također može sinkronizirati datoteke i otkriti potencijalne sukobe u objavljivanju koji bi mogli uzrokovati prepisivanje tuđih promjena.

Sve u svemu, Komodo je dobar, ali ne i izvrstan JavaScript IDE, i dobar, ali ne i izvrstan JavaScript urednik. Međutim, može dobro služiti vašim potrebama, pogotovo ako radite i s Perlom, Pythonom, PHP-om, Rubyjem, Tcl-om ili XSLT-om.

Cijena: 295 USD, plus 87 USD godišnje za nadogradnje i podršku. Platforma: Windows (7 ili noviji), MacOS (10,9 ili noviji), Linux.

Apache NetBeans

NetBeans ima vrlo dobru podršku za JavaScript, HTML5 i CSS3 u web projektima, a podržava Cordova / PhoneGap okvir za izgradnju mobilnih aplikacija temeljenih na JavaScriptu. NetBeans nije najbrži IDE u bloku, ali jedan je od cjelovitijih. I, naravno, cijena je točna: NetBeans je dostupan besplatno pod licencom otvorenog koda.

JavaScript uređivač NetBeans nudi isticanje sintakse, automatsko dovršavanje i presavijanje koda, prilično kao što biste očekivali. Značajke uređivanja JavaScript također rade za JavaScript kôd ugrađen u PHP, JSP i HTML datoteke. Podrška za jQuery ubačena je u uređivač. NetBeans 8.2 ima novu ili poboljšanu podršku za Node.js i Express, Gulp, Grunt, AngularJS, Knockout.js, Jade, Mocha i Selenium.

Analiza koda radi u pozadini dok uređujete, pružajući upozorenja i savjete. Otklanjanje pogrešaka funkcionira u ugrađenom pregledniku WebKit i u Chromeu s instaliranim NetBeans Connector. Program za ispravljanje pogrešaka može postaviti DOM, liniju, događaj i XMLHttpRequest točke prijelaza, a prikazat će varijable, satove i niz poziva. Integrirani prozor dnevnika preglednika prikazuje iznimke, pogreške i upozorenja u pregledniku.

NetBeans može konfigurirati i izvesti jedinstveno testiranje pomoću JsTestDriver, JAR (Java arhiva) datoteke koju možete besplatno preuzeti. Otklanjanje pogrešaka u jedinstvenim testovima automatski se omogućuje ako navedete Chrome s NetBeans Connector-om kao jedan od preglednika JsTestDriver kada konfigurirate JsTestDriver u prozoru Usluge.

Kada otklanjate pogreške u web aplikaciji u Chromeu pomoću NetBeans Connector-a i uređujete CSS iz Chrome Developer Tools, promjene će biti zabilježene od strane NetBeans-a i spremljene u CSS datoteke. Međutim, ako su vaše CSS datoteke generirane iz tabela stilova Less ili Sass, morat ćete ručno ažurirati izvorni list jer su CSS datoteke samo kompilirani izlaz.

U ugrađenom pregledniku WebKit i u Chromeu s instaliranim konektorom NetBeans možete koristiti mrežni monitor NetBeans za pregled zaglavlja zahtjeva, odgovora i snopova poziva za REST komunikacije. Za WebSocket komunikaciju prikazuju se i zaglavlja i okviri teksta. Sve u svemu, NetBeans pruža malo bolje iskustvo otklanjanja pogrešaka s Chromeom nego što ga imate u Firefoxu s Firebugom.

NetBeans integrira kontrolu izvornog koda s Git, Subversion, Mercurial i CVS. Podrška za Git proširena je grafičkim preglednikom Diff i sustavom polica unutar IDE-a. NetBeans kodira Git status datoteka, omogućuje vam pregled povijesti revizija za svaku datoteku i prikazuje vam podatke o reviziji i autoru za svaki redak datoteka kontroliranih verzijom. NetBeans ima slične integracije sa Subverzijom, Mercurialom i CVS-om, ali testirao sam samo Git.

NetBeans integrira praćenje problema s Jirom i Bugzillom. U prozoru zadataka NetBeans možete pretraživati ​​zadatke, spremati pretraživanja, ažurirati zadatke i rješavati zadatke u svojem registriranom spremištu zadataka. NetBeans također ima integraciju timskog poslužitelja za web mjesta koja koriste Kenai infrastrukturu.

Koliko mogu utvrditi, NetBeansu nedostaje bilo kakvo JavaScript profiliranje, iako može profilirati Java programe i EJB module. I dok NetBeans može refaktorirati Javu i PHP, ne može refaktorirati JavaScript.

Sveukupno gledajući, NetBeans je pristojan kandidat za klijentski razvoj JavaScript-a, HTML5-a i CSS3-a, pogotovo ako na poslužitelju razvijate i Java, PHP ili C ++. Ako nemate proračun za WebStorm i ne volite Microsoft, vidjet ćete da NetBeans radi svoj posao, sve dok vam se ne žuri.

Trošak: Besplatno. Platforma: Windows, Solaris, MacOS, Linux. 

Microsoft Visual Studio 2017

U svom cjelovitom pregledu Visual Studija 2017 raspravljao sam o proizvodu u cjelini, sa samo nekoliko referenci na JavaScript. Ovdje ću preokrenuti naglasak.

Sve u svemu, Visual Studio 2017 vrlo dobro služi kao JavaScript IDE, iako je bolji .Net IDE i nije toliko dobar kao WebStorm za JavaScript. Iako također vrlo dobro služi kao JavaScript uređivač, bolji je C # editor i nije tako dobar niti brz kao Sublime Text za JavaScript.

Kao što možete vidjeti na snimci zaslona u nastavku, Visual Studio 2017 dobro radi s bojanjem sintakse JavaScript i presavijanjem koda. Također dobro radi s navigacijom JavaScript koda: Desnom tipkom miša kliknite funkciju ili ime člana i lako možete prijeći na definiciju ili pronaći sve reference. Kad završite s gledanjem definicije, možete pritisnuti strelicu za povratak na vrhu sučelja da biste se vratili tamo gdje ste bili.

Možete jednostavno umetnuti isječke i okružiti svoj odabir odgovarajućim kodom, kao što je HTML ili URL kodiranje varijabli niza. Osim JavaScript-a, HTML-a i CSS-a, možete uređivati ​​Markdown datoteke i vidjeti prikazani Markdown, a možete raditi i s TypeScriptom.

Osim toga, naravno možete kodirati na bilo kojem .Net jeziku, na C ++ i na Pythonu. I kao što je već dugo bio slučaj s Visual Studiom, s bazama podataka možete raditi izravno iz IDE-a. Visual Studio posebno je jak u radu s bazama podataka SQL Server. Možete se izvući pomoću Visual Studija umjesto SQL Server Management Studia za većinu operacija baze podataka koje biste željeli raditi kao programer.

Visual Studio 2017 podržava otklanjanje pogrešaka u gotovo svakom pregledniku koji vam je potreban, uključujući preglednike na mobilnim uređajima i u emulatorima. Također ima dva vlastita preglednika: obični interni web preglednik, koji je (iznenađenje!) Inačica Internet Explorera, i Page Inspector koji vam prikazuje prikazanu stranicu zajedno sa svim izvorima i stilovima. Iako Page Inspector radi puno potencijalno dugotrajnih, obrnuto-inženjerskih stvari da bi se postavio za stranicu, jednom kad se nađete na njoj, možete ostati tamo bez žongliranja Visual Studioom, preglednikom i razvojnim alatima preglednika .

Izvedba Visual Studija 2017 obično je prilično dobra ako mu date dovoljno memorije i procesorske snage, ali obično zahtijeva značajna sredstva. Visual Studio 2017 ima izvrsnu dijagnostiku performansi aplikacija, ali u velikoj mjeri nisu sve toliko korisne za obični JavaScript kôd koji se obično izvodi duboko u pregledniku. Visual Studio ima određeno vrijeme za JavaScript funkcije, odziv HTML sučelja i JavaScript memorijske alate, ali oni se primjenjuju samo na projekte Universal Windows Platform utemeljene na JavaScriptu, a ne na web projekte koji slučajno koriste JavaScript.

Visual Studio 2017 uključuje izvrsno uređivanje aplikacija Node.js, IntelliSense, profiliranje, integraciju NPM-a, podršku za TypeScript, lokalno i daljinsko ispravljanje pogrešaka (Windows, MacOS, Linux) i otklanjanje pogrešaka na Azure Web Apps i Azure Cloud Services. Također ima podršku za CSS, HTML, JavaScript, TypeScript, CoffeeScript i manje. To uključuje pokretanje JSHinta dok upisujete, omogućujući vam umanjivanje JavaScript datoteka iz kontekstnog izbornika i automatsko sastavljanje CoffeeScript datoteka prilikom spremanja, prikazujući uporedni pregled generiranog JavaScript-a.