Programiranje

Pregled: 6 najboljših IDE-jev za JavaScript

JavaScript se danes uporablja za različne vrste aplikacij. JavaScript najpogosteje deluje s HTML5 in CSS za izdelavo spletnih strani. Toda JavaScript pomaga tudi pri izdelavi mobilnih aplikacij in je našel pomembno mesto na zadnji strani v obliki strežnikov Node.js. Na srečo se orodja za razvoj JavaScript - tako urejevalniki kot IDE - povečujejo, da se spoprimejo z novimi izzivi.

Zakaj namesto urejevalnika uporabljati IDE? Glavni razlog je v tem, da lahko IDE razhrosti in včasih profilira vašo kodo. IDE imajo tudi podporo za sisteme ALM, ki se za nadzor različic integrirajo s podobnimi Git, GitHub, Mercurial, Subversion in Perforce. Ker pa več urednikov dodaja kljuke tem sistemom, podpora za ALM postaja vse manj razločna.

Eclipse 2018 z orodji za razvoj JavaScript

V starih časih, ko je bil Java Swing nov in vznemirljiv, sem z veseljem uporabljal Eclipse za razvoj Jave, vendar sem kmalu prešel na druge Java IDE. Pred petimi in več leti, ko sem s sistemom Eclipse nekaj razvil Android, sem ugotovil, da je izkušnja v redu, a močna. Ko sem leta 2014 poskušal uporabiti Eclipse Luna z JSDT za razvoj JavaScript, je stalno prikazoval napačno pozitivne napake za veljavno kodo, ki je prenesla JSHint.

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.

Na srečo se je od takrat povečalo število prodajalcev in odprtokodnih projektov. Eclipse 2018 z orodji za razvoj JavaScript ima spodoben urejevalnik JavaScript in razhroščevalnik na osnovi Chroma, vendar ne ve za TypeScript, ki ga uporablja Angular, niti za datoteke ES6 in JSX, ki jih uporablja React.

Eclipse je že od nekdaj užival na velikem trgu vtičnikov. Za TypeScript razmislite o brezplačnem vtičniku TypeScript 1.0.0. Za Angular, TypeScript in ES6 upoštevajte komercialni Angular IDE (od CodeMix, prej Webclipse), za projekte React z datotekami JSX pa poskusite z odprtokodno TypeScript IDE. Če dodate več kot eno, boste morali razrešiti spor, kateri naj ureja datoteke TypeScript, vendar to ni veliko.

Orodja CodeMix se zaračunavajo kot dodajanje pametnih kod Visual Studio k programu Eclipse. Za razliko od večine vtičnikov Eclipse, Angular IDE by CodeMix ni brezplačen, ima pa 45-dnevno brezplačno preskusno različico. Glede na to, da je Visual Studio Code brezplačna, bi to upošteval pred plačilom za Angular IDE.

Cena: Brezplačno; Kotni IDE s CodeMix, 29 USD (osebno) ali 48 USD (komercialno) na leto. Platforma: Windows, MacOS in Linux.

ActiveState Komodo IDE

Komodo IDE sem uporabnik in oboževalec od njegove prve predstavitve leta 2001. Čeprav so ga novejši izdelki, kot sta Visual Studio Code in WebStorm, na nekaterih področjih presegli, je še vedno dober urejevalnik in IDE.

Komodo IDE ponuja napredno urejanje JavaScript, poudarjanje sintakse, navigacijo in odpravljanje napak, vendar ne vključuje preverjanja kode JavaScript. Za to lahko JSHint vedno zaženete v lupini.

Komodo podpira na desetine programskih in označevalnih jezikov. Komodo IDE je s široko paleto podpore za programski jezik in označevalni jezik, vključno s preoblikovanjem, odpravljanjem napak in profiliranjem, zelo dobra izbira za celovit razvoj v odprtokodnih jezikih.

Komodo ima modul za preoblikovanje kode za vse jezike, za katere zagotavlja inteligenco kode: PHP, Perl, Python, Ruby, Tcl, JavaScript in Node.js. Na žalost narava »najmanj skupnega imenovalca« tega pristopa omejuje zmožnosti preimenovanja spremenljivk in članov razreda ter pridobivanja kode v metodi. Kljub temu je to nekaj najbolj uporabnih primerov.

Komodo IDE ima tako urejanje stolpcev kot več izbir. To zagotavlja skoraj enakost s Sublime Text in TextMate, kar zadeva množična urejanja. Dokler delamo primerjavo, je Komodo bolj IDE, medtem ko je Sublime Text veliko hitrejši. In dokler se pogovarjamo o zmogljivosti, se je Komodova hitrost v primerjavi s starejšimi različicami občutno izboljšala pri risanju zaslona, ​​iskanju in preverjanju skladnje.

Komodo IDE ima več funkcij, ki jih večina konkurenčnih izdelkov nima. Eden je njegov HTTP Inspector, ki je odličen za odpravljanje napak pri povratnih klicih Ajaxa. Druga je njegova zbirka orodij Rx (regularni izraz ali regularni izraz), ki je odličen način za izdelavo in preizkus regularnih izrazov za JavaScript, Perl, PHP, Python in Ruby.

Sodelovanje je še en razlikovalec Komodo IDE - pomislite na to kot Google Dokumente za kodo. Ustvarite lahko seje za skupine datotek, dodate stike sejam kot sodelavci, nato pa hkrati delate na istih datotekah s skoraj sprotno sinhronizacijo.

Sodelovanje ni nadomestilo za nadzor izvorne kode, je pa koristen dodatek. Komodo IDE vključuje nadzor izvorne kode z uporabo CVS, Subversion, Perforce, Git, Mercurial in Bazaar. Podprte so samo osnovne operacije nadzora različic. Napredne operacije, kot je razvejanje, je treba izvesti z ločenim odjemalcem za nadzor izvorne kode.

Čeprav Komodo nima svojega oblikovalnika dokumentov JavaScript, v ta namen izkorišča najboljši brezplačni odprtokodni program. Kot privzeto je privzeto oblikovalnik datotek JavaScript JS Beautifier, vendar je v spustnem meniju na voljo še devet možnosti.

Komodo IDE podpira odpravljanje napak na strani odjemalca v Chromu in lahko odstrani Node.js tako lokalno kot oddaljeno. Odpravlja tudi napake Perl, Python, PHP, Ruby, Tcl in XSLT.

Komodo IDE ima pregledovalnik DOM, ki vam omogoča ogled dokumentov XML in HTML kot zložljivih dreves. Omogoča tudi iskanje XPath za filtriranje drevesa.

Komodovi moduli za profiliranje kode in enotno testiranje ne podpirajo JavaScript. Vendar JavaScript in Node.js podpira Komodov modul Code Intelligence, ki izvaja brskanje po kodi, samodokončanje in klice.

Komodo IDE lahko objavlja skupine datotek prek FTP, SFTP, FTPS ali SCP. Komodo lahko tudi sinhronizira datoteke in zazna morebitne konflikte pri objavljanju, zaradi katerih lahko prepišete spremembe drugih.

Na splošno je Komodo dober, vendar ne odličen IDE za JavaScript in dober, a ne odličen urejevalnik JavaScript. Vendar pa lahko zadovolji vaše potrebe, še posebej, če delate tudi s Perl, Python, PHP, Ruby, Tcl ali XSLT.

Cena: 295 USD, plus 87 USD na leto za nadgradnje in podporo. Platforma: Windows (7 ali novejši), MacOS (10.9 ali novejši), Linux.

Apache NetBeans

NetBeans ima zelo dobro podporo za JavaScript, HTML5 in CSS3 v spletnih projektih in podpira okvir Cordova / PhoneGap za izdelavo mobilnih aplikacij, ki temeljijo na JavaScript. NetBeans ni najhitrejši IDE v bloku, je pa eden bolj popolnih. In seveda cena je prava: NetBeans je na voljo brezplačno pod odprtokodno licenco.

Urejevalnik JavaScript NetBeans ponuja poudarjanje sintakse, samodokončanje in zlaganje kode, skoraj tako, kot bi pričakovali. Funkcije urejanja JavaScript delujejo tudi za kodo JavaScript, vdelano v datoteke PHP, JSP in HTML. Podpora za jQuery je urejena v urejevalniku. NetBeans 8.2 ima novo ali izboljšano podporo za Node.js in Express, Gulp, Grunt, AngularJS, Knockout.js, Jade, Mocha in Selenium.

Analiza kode teče v ozadju med urejanjem in nudi opozorila in namige. Odpravljanje napak deluje v vdelanem brskalniku WebKit in v Chromu z nameščenim priključkom NetBeans. Razhroščevalnik lahko nastavi DOM, vrstico, dogodek in prekinitvene točke XMLHttpRequest ter prikaže spremenljivke, ure in sklad klicev. Integrirano okno dnevnika brskalnika prikazuje izjeme, napake in opozorila brskalnika.

NetBeans lahko konfigurira in izvaja enotno preskušanje z datoteko JsTestDriver, datoteko JAR (Java arhiv), ki jo lahko brezplačno prenesete. Odpravljanje napak preskusov enot je samodejno omogočeno, če kot konfiguracijo JsTestDriver v oknu Storitve kot enega od brskalnikov JsTestDriver določite Chrome s priključkom NetBeans.

Ko v Chromu odpravljate napake s spletnim programom s priključkom NetBeans in urejate CSS v Chromovih orodjih za razvijalce, jih bo NetBeans zajel in shranil v datoteke CSS. Če pa so bile vaše datoteke CSS ustvarjene iz slogovnih listov Less ali Sass, boste morali ročno posodobiti izvorni list, ker so datoteke CSS zgolj sestavljeni izhodni podatki.

V vdelanem brskalniku WebKit in v Chromu z nameščenim priključkom NetBeans lahko z nadzornikom omrežja NetBeans vidite glave zahtev, odzive in sklade klicev za komunikacijo REST. Pri komunikaciji WebSocket so prikazani glave in okviri besedila. Na splošno NetBeans ponuja nekoliko boljšo izkušnjo odpravljanja napak s Chromom, kot jo dobite v Firefoxu s Firebugom.

NetBeans integrira nadzor izvorne kode z Git, Subversion, Mercurial in CVS. Podpora za Git je dopolnjena z grafičnim pregledovalnikom Diff in sistemom polic v IDE. NetBeans barvno kodira stanje datotek Git, omogoča ogled zgodovine revizij za vsako datoteko in prikazuje informacije o revizijah in avtorjih za vsako vrstico datotek z nadzorom različice. NetBeans ima podobne integracije s Subversion, Mercurial in CVS, vendar sem preizkusil le Git.

NetBeans integrira sledenje težavam z Jira in Bugzilla. V oknu opravil NetBeans lahko iščete opravila, shranjujete iskanja, posodabljate opravila in rešujete naloge v svojem registriranem repozitoriju opravil. NetBeans ima tudi integracijo skupinskega strežnika za spletna mesta, ki uporabljajo infrastrukturo Kenai.

Kolikor lahko ugotovim, NetBeans nima nobenega profiliranja JavaScript, čeprav lahko profilira programe Java in EJB module. In medtem ko lahko NetBeans refaktorira Javo in PHP, ne more refaktorirati JavaScript.

Na splošno je NetBeans spodoben kandidat za odjemalski razvoj JavaScript, HTML5 in CSS3, še posebej, če v strežniku razvijate tudi Java, PHP ali C ++. Če nimate proračuna za WebStorm in ne marate Microsofta, boste ugotovili, da NetBeans opravi svoje delo, če se vam zelo ne mudi.

Cena: brezplačno. Platforma: Windows, Solaris, MacOS, Linux.

Microsoft Visual Studio 2017

V celotnem pregledu Visual Studio 2017 sem razpravljal o izdelku kot celoti, z le nekaj sklici na JavaScript. Tu bom obrnil poudarek.

Na splošno Visual Studio 2017 zelo dobro služi kot IDE JavaScript, čeprav je boljši .Net IDE in ni tako dober kot WebStorm za JavaScript. Čeprav služi tudi kot urejevalnik JavaScript, je boljši urejevalnik C # in ni tako dober ali hiter kot Sublime Text za JavaScript.

Kot lahko vidite na spodnjem posnetku zaslona, ​​Visual Studio 2017 dobro opravi barvanje sintakse JavaScript in zlaganje kode. Dobro se obnese tudi z navigacijo po kodi JavaScript: z desno miškino tipko kliknite funkcijo ali ime člana in lahko preprosto skočite na definicijo ali poiščete vse reference. Ko končate z ogledom definicije, lahko pritisnete puščico nazaj na vrhu vmesnika, da se vrnete nazaj, kjer ste bili.

Preprosto lahko vstavite delčke in svojo izbiro obkrožite z ustrezno kodo, kot je kodiranje nizov spremenljivk HTML ali URL. Poleg JavaScript, HTML in CSS lahko urejate datoteke Markdown in si ogledate upodobljeno Markdown ter lahko delate s TypeScriptom.

Poleg tega lahko seveda kodirate v katerem koli jeziku .Net, v C ++ in v Pythonu. In kot že dolgo velja za Visual Studio, lahko z bazami podatkov delate neposredno iz IDE. Visual Studio je še posebej močan pri delu z bazami podatkov SQL Server. Za večino operacij z bazami podatkov, ki bi jih želeli izvesti kot razvijalec, se lahko izognete uporabi Visual Studio namesto SQL Server Management Studio.

Visual Studio 2017 podpira odpravljanje napak v skoraj vseh brskalnikih, za katere želite, na primer v brskalnikih na mobilnih napravah in v emulatorjih. Ima tudi dva lastna brskalnika: navadni notranji spletni brskalnik, ki je (presenečenje!) Različica Internet Explorerja, in Page Inspector, ki prikazuje upodobljeno stran skupaj z vsemi viri in slogi. Čeprav Page Inspector naredi veliko potencialno zamudnih, obratno inženirskih stvari, da se nastavi za stran, ko ste na njej, lahko tam ostanete, ne da bi morali žonglirati z Visual Studiom, brskalnikom in orodji za razvijalce brskalnika. .

Zmogljivost Visual Studio 2017 je ponavadi precej dobra, če mu daste dovolj pomnilnika in procesorske moči, vendar ponavadi zahteva znatna sredstva. Visual Studio 2017 ima odlične diagnostične podatke o delovanju programov, vendar na splošno niso tako uporabni za navadno kodo JavaScript, ki je običajno globoko v brskalniku. Visual Studio ima določeno časovno razporeditev funkcij JavaScript, odzivnost uporabniškega vmesnika HTML in pomnilniška orodja JavaScript, vendar veljajo samo za projekte Universal Windows Platform, ki temeljijo na JavaScript, in ne za spletne projekte, ki uporabljajo JavaScript.

Visual Studio 2017 vključuje izvrstno urejanje aplikacij Node.js, IntelliSense, profiliranje, integracijo NPM, podporo TypeScript, lokalno in oddaljeno odpravljanje napak (Windows, MacOS, Linux) ter odpravljanje napak v spletnih aplikacijah Azure in oblačnih storitvah Azure. Podpira tudi CSS, HTML, JavaScript, TypeScript, CoffeeScript in manj. To vključuje zagon JSHint med tipkanjem, kar vam omogoča, da datoteke iz JavaScript pomanjšate iz kontekstnega menija in samodejno sestavljanje datotek CoffeeScript ob shranjevanju, ki prikazuje vzporedni predogled ustvarjenega JavaScript-a.

$config[zx-auto] not found$config[zx-overlay] not found