JavaScript sa dnes používa pre rôzne druhy aplikácií. JavaScript pri vytváraní webových rozhraní frontend pracuje najčastejšie s formátmi HTML5 a CSS. JavaScript však pomáha aj pri vytváraní mobilných aplikácií a našiel si dôležité miesto na zadnom konci v podobe serverov Node.js. Našťastie vývojové nástroje JavaScriptu - editori aj IDE - pribúdajú, aby vyhoveli novým výzvam.
Prečo používať IDE namiesto editora? Hlavným dôvodom je, že IDE môže ladiť a niekedy profilovať váš kód. IDE majú tiež podporu pre systémy ALM a integrujú sa s nimi napríklad Git, GitHub, Mercurial, Subversion a Perforce pre riadenie verzií. Ale ako viac redaktorov pridáva týmto systémom háčiky, podpora ALM sa stáva čoraz menším rozdielom.
Eclipse 2018 s nástrojmi na vývoj JavaScriptu
V dávnych dobách, keď bol Java Swing nový a vzrušujúci, som rád používal Eclipse na vývoj Java, ale čoskoro som prešiel na iné Java IDE. Pred piatimi a viac rokmi, keď som s Eclipse vyvíjal určitý systém Android, sa mi táto skúsenosť zdala v poriadku, ale múdra. Keď som sa v roku 2014 pokúsil použiť Eclipse Luna s JSDT na vývoj JavaScriptu, neustále zobrazoval falošné pozitívne chyby pre platný kód, ktorý prešiel JSHint.
Súvisiace video: Čo je to JavaScript? Vysvetľuje tvorca Brendan Eich
Brendan Eich, tvorca programovacieho jazyka JavaScript, vysvetľuje, ako sa tento jazyk používa a prečo je stále obľúbený medzi programátormi pre jeho jednoduché použitie.
Našťastie odvtedy pristúpilo k úspechu niekoľko dodávateľov a projekty open source. Eclipse 2018 s nástrojmi na vývoj JavaScriptu má slušný editor JavaScriptu a debugger založený na prehliadači Chrome, ale nevie o TypeScript, ktorý používa Angular, ani o súboroch ES6 a JSX, ktoré používa React.
Eclipse sa vždy tešil obrovskému trhu zásuvných modulov. Pre TypeScript zvážte bezplatný doplnok TypeScript 1.0.0. V prípade Angular, TypeScript a ES6 zvážte komerčné Angular IDE (od spoločnosti CodeMix, predtým Webclipse) a v prípade projektov React so súbormi JSX vyskúšajte open source TypeScript IDE. Ak pridáte viac ako jeden, budete musieť vyriešiť ich spor, ktorý z nich má upravovať súbory TypeScript, ale nejde o nič veľké.
Za nástroje CodeMix sa účtuje pridanie inteligentných kódov Visual Studio Code do Eclipse. Na rozdiel od väčšiny doplnkov Eclipse nie je Angular IDE od CodeMix zadarmo, ale má 45-dňovú bezplatnú skúšobnú verziu. Vzhľadom na to, že kód Visual Studio je zadarmo, zvážil by som to pred platbou za Angular IDE.
Náklady: zadarmo; Uhlové IDE od spoločnosti CodeMix, 29 dolárov (osobné) alebo 48 dolárov (komerčné) ročne. Platforma: Windows, MacOS a Linux.
ActiveState Komodo IDE
Som používateľom a fanúšikom IDE Komodo od jeho prvého uvedenia v roku 2001. Aj keď novšie produkty ako Visual Studio Code a WebStorm ho v niektorých oblastiach prekonali, stále je to dobrý editor a IDE.
Komodo IDE poskytuje pokročilé úpravy JavaScriptu, zvýrazňovanie syntaxe, navigáciu a ladenie, nezahŕňa však kontrolu kódu JavaScript. Za týmto účelom môžete kedykoľvek spustiť JSHint v shelli.
Komodo podporuje desiatky programovacích a značkovacích jazykov. Vďaka širokej škále podpory programovacieho a značkovacieho jazyka, vrátane refaktoringu, ladenia a profilovania, je Komodo IDE veľmi dobrou voľbou pre komplexný vývoj v otvorených jazykoch.
Komodo má modul refaktoringu kódu pre všetky jazyky, pre ktoré poskytuje inteligenciu kódu: PHP, Perl, Python, Ruby, Tcl, JavaScript a Node.js. Bohužiaľ, povaha „najmenej spoločného menovateľa“ tohto prístupu obmedzuje možnosti premenovania premenných a členov triedy a extrahovania kódu do metódy. Napriek tomu sú to niektoré z najužitočnejších prípadov.
Komodo IDE umožňuje úpravy stĺpcov aj viacnásobný výber. Toto poskytuje takmer paritu s programami Sublime Text a TextMate, pokiaľ ide o hromadné úpravy. Pokiaľ robíme porovnanie, Komodo je skôr IDE, zatiaľ čo Sublime Text je oveľa rýchlejší. A pokiaľ hovoríme o výkone, rýchlosť Komodo sa v porovnaní so staršími verziami, pri kreslení na obrazovke, vyhľadávaní a kontrole syntaxe, výrazne zlepšila.
Komodo IDE má niekoľko funkcií, ktoré väčšine konkurenčných produktov chýbajú. Jedným z nich je jeho HTTP Inspector, ktorý je vynikajúci na ladenie spätných volaní Ajaxu. Ďalším je jeho sada nástrojov Rx (regulárny výraz alebo regulárny výraz), ktorá je skvelým spôsobom na vytváranie a testovanie regulárnych výrazov pre JavaScript, Perl, PHP, Python a Ruby.
Spolupráca je ďalším diferenciátorom IDE Komodo - myslite na to ako na Dokumenty Google pre kód. Môžete vytvárať relácie pre skupiny súborov, pridávať kontakty do relácií ako spolupracovníci a potom spolupracovať na rovnakých súboroch súčasne so synchronizáciou takmer v reálnom čase.
Spolupráca nenahrádza kontrolu nad zdrojovým kódom, ale je to užitočný doplnok. Komodo IDE integruje riadenie zdrojového kódu pomocou CVS, Subversion, Perforce, Git, Mercurial a Bazaar. Podporované sú iba základné operácie riadenia verzií. Pokročilé operácie, ako napríklad rozvetvenie, je potrebné vykonať pomocou samostatného klienta na riadenie zdrojového kódu.
Aj keď Komodo nemá vlastný formátovač dokumentov v jazyku JavaScript, využíva na tento účel najlepší bezplatný otvorený zdroj. Po vybalení z krabice je predvoleným formátovacím programom pre súbory JavaScript JS Beautifier, ale ďalších deväť možností je k dispozícii prostredníctvom rozbaľovacej ponuky.
Komodo IDE podporuje ladenie JavaScriptu na strane klienta v prehliadači Chrome a dokáže ladiť Node.js lokálne aj vzdialene. Tiež ladí Perl, Python, PHP, Ruby, Tcl a XSLT.
Komodo IDE má prehliadač DOM, ktorý vám umožňuje prezerať dokumenty XML a HTML ako zbaliteľné stromy. Umožňuje vám tiež filtrovať strom pomocou vyhľadávania XPath.
Moduly profilovania kódu a testovanie jednotiek spoločnosti Komodo nepodporujú JavaScript. JavaScript a Node.js však podporuje modul Code Intelligence od spoločnosti Komodo, ktorý implementuje prehliadanie kódu, automatické dopĺňanie a výzvy.
Komodo IDE môže publikovať skupiny súborov cez FTP, SFTP, FTPS alebo SCP. Komodo môže tiež synchronizovať súbory a zisťovať potenciálne konflikty pri publikovaní, ktoré by mohli spôsobiť prepísanie zmien iných ľudí.
Celkovo je Komodo dobrý, ale nie vynikajúci IDE JavaScriptu, a dobrý, ale nie vynikajúci editor JavaScriptu. Môže to však dobre slúžiť vašim potrebám, najmä ak tiež pracujete s Perl, Python, PHP, Ruby, Tcl alebo XSLT.
Cena: 295 dolárov, plus 87 dolárov ročne za inovácie a podporu. Platforma: Windows (7 alebo vyššia), MacOS (10,9 alebo vyššia), Linux.
Apache NetBeans
NetBeans má vo webových projektoch veľmi dobrú podporu pre JavaScript, HTML5 a CSS3 a podporuje rámec Cordova / PhoneGap pre vytváranie mobilných aplikácií založených na JavaScripte. NetBeans nie je najrýchlejším IDE v bloku, ale je jedným z úplnejších. A samozrejme, cena je správna: NetBeans je k dispozícii zadarmo na základe licencie open source.
Editor NetBeans JavaScript poskytuje zvýraznenie syntaxe, automatické dopĺňanie a skladanie kódu, takmer podľa očakávania. Funkcie úprav JavaScriptu fungujú aj pre kód JavaScript zabudovaný do súborov PHP, JSP a HTML. Podpora jQuery je vložená do editora. NetBeans 8.2 má novú alebo vylepšenú podporu pre Node.js a Express, Gulp, Grunt, AngularJS, Knockout.js, Jade, Mocha a Selenium.
Analýza kódu sa pri úpravách spúšťa na pozadí a poskytuje varovania a rady. Ladenie funguje vo vstavanom prehliadači WebKit a v prehliadači Chrome s nainštalovaným konektorom NetBeans. Debugger môže nastaviť hraničné body DOM, line, event a XMLHttpRequest a bude zobrazovať premenné, hodinky a zásobník hovorov. Integrované okno protokolu prehliadača zobrazuje výnimky, chyby a varovania prehliadača.
NetBeans môže konfigurovať a vykonávať testovanie jednotiek pomocou JsTestDriver, súboru JAR (archív Java), ktorý si môžete zadarmo stiahnuť. Ladenie testov jednotiek je automaticky povolené, ak pri konfigurácii prehliadača JsTestDriver v okne Služby nastavíte prehliadač NetBeans Connector ako jeden z prehľadávačov JsTestDriver.
Keď ladíte webovú aplikáciu v prehliadači Chrome pomocou nástroja NetBeans Connector a upravujete CSS z Nástrojov pre vývojárov prehliadača Chrome, zmeny sa zachytia v aplikácii NetBeans a uložia sa do súborov CSS. Ak však boli vaše súbory CSS vygenerované z hárkov štýlov Less alebo Sass, budete musieť zdrojový hárok aktualizovať manuálne, pretože súbory CSS sú iba kompilovaným výstupom.
Vo vstavanom prehliadači WebKit a v prehliadači Chrome s nainštalovaným konektorom NetBeans Connector môžete pomocou sieťového monitora NetBeans zobraziť hlavičky, odpovede a súbory hovorov pre komunikáciu REST. Pre komunikáciu WebSocket sa zobrazujú hlavičky aj textové rámce. Celkovo poskytuje NetBeans o niečo lepšie ladenie v prehliadači Chrome, ako je to vo Firefoxe s Firebug.
NetBeans integruje kontrolu zdrojového kódu s Git, Subversion, Mercurial a CVS. Podpora Gitu je rozšírená o grafický prehliadač Diff a o policový systém v rámci IDE. NetBeans farebne kóduje stav súborov Git, umožňuje vám zobraziť históriu revízií pre každý súbor a zobrazuje informácie o revízii a autorovi pre každý riadok súborov riadených verziami. NetBeans má podobné integrácie so systémami Subversion, Mercurial a CVS, ale testoval som iba Git.
NetBeans integruje sledovanie problémov s Jira a Bugzilla. V okne úloh NetBeans môžete vyhľadávať úlohy, ukladať vyhľadávania, aktualizovať úlohy a riešiť úlohy v registrovanom úložisku úloh. NetBeans má tiež integráciu tímového servera pre stránky, ktoré používajú infraštruktúru Kenai.
Pokiaľ viem, NetBeans postráda akékoľvek profilovanie JavaScriptu, aj keď dokáže profilovať Java aplikácie a EJB moduly. Aj keď NetBeans dokáže refaktorovať Java a PHP, nedokáže refaktorovať JavaScript.
Celkovo je NetBeans slušným uchádzačom o vývoj JavaScriptu, HTML5 a CSS3 na strane klienta, najmä ak na serveri vyvíjate aj Java, PHP alebo C ++. Ak nemáte rozpočet na WebStorm a nemáte radi spoločnosť Microsoft, zistíte, že program NetBeans túto prácu plní, pokiaľ sa veľmi neponáhľate.
Cena: zadarmo. Platforma: Windows, Solaris, MacOS, Linux.
Microsoft Visual Studio 2017
V mojej úplnej recenzii na Visual Studio 2017 som diskutoval o produkte ako o celku, len s niekoľkými odkazmi na JavaScript. Tu obrátim dôraz.
Celkovo možno povedať, Visual Studio 2017 slúži veľmi dobre ako IDE JavaScriptu, aj keď je to lepšie .Net IDE a nie je také dobré ako WebStorm pre JavaScript. Aj keď veľmi dobre slúži aj ako editor JavaScriptu, je to lepší editor C # a nie je tak dobrý ani rýchly ako Sublime Text pre JavaScript.
Ako môžete vidieť na snímke obrazovky nižšie, Visual Studio 2017 odvádza dobrú prácu so zafarbením syntaxe JavaScriptu a skladaním kódu. Dobrú prácu robí aj pri navigácii v kóde JavaScript: Kliknite pravým tlačidlom myši na funkciu alebo názov člena a môžete ľahko prejsť na definíciu alebo vyhľadať všetky odkazy. Po dokončení definície sa môžete stlačením šípky späť v hornej časti rozhrania vrátiť späť na pôvodné miesto.
Môžete ľahko vložiť úryvky a obklopiť svoj výber vhodným kódom, napríklad kódovaním HTML alebo URL reťazcových premenných. Okrem JavaScriptu, HTML a CSS môžete upravovať súbory Markdown a vidieť vykreslený Markdown a môžete pracovať s TypeScript.
Okrem toho môžete samozrejme kódovať v ľubovoľnom jazyku .Net, v C ++ a v Pythone. A ako to už v prípade Visual Studio býva, s databázami môžete pracovať priamo z IDE. Visual Studio je obzvlášť silné pri práci s databázami servera SQL Server. Pri väčšine databázových operácií, ktoré by ste chceli robiť ako vývojár, sa môžete vyhnúť používaniu Visual Studio namiesto SQL Server Management Studio.
Visual Studio 2017 podporuje ladenie v takmer akomkoľvek prehliadači, na ktorý sa chystáte, vrátane prehľadávačov na mobilných zariadeniach a v emulátoroch. Má tiež dva vlastné prehľadávače: obyčajný interný webový prehliadač, ktorý je (prekvapením!) Verziou prehliadača Internet Explorer, a Page Inspector, ktorý zobrazuje vykreslenú stránku spolu so všetkými zdrojmi a štýlmi. Aj keď program Page Inspector pripravuje pre stránku veľa potenciálne časovo náročných a reverzných mechanizmov, hneď ako na nich budete, môžete tam zostať bez toho, aby ste museli manipulovať s Visual Studio, prehliadačom a vývojárskymi nástrojmi prehliadača .
Výkon programu Visual Studio 2017 je zvyčajne celkom dobrý, ak mu poskytnete dostatok pamäte a výkonu procesora, ale zvyčajne vyžaduje značné zdroje. Visual Studio 2017 má vynikajúcu diagnostiku výkonu pre aplikácie, ale vo všeobecnosti nie sú také užitočné pre bežný kód JavaScript, ktorý zvyčajne beží hlboko v prehliadači. Visual Studio má konkrétne načasovanie funkcií JavaScriptu, citlivosť používateľského rozhrania HTML a pamäťové nástroje JavaScriptu, ale vzťahujú sa iba na projekty Universal Windows Platform založené na JavaScripte, nie na webové projekty, ktoré používajú JavaScript.
Visual Studio 2017 obsahuje vynikajúce úpravy aplikácií Node.js, IntelliSense, profilovanie, integráciu NPM, podporu TypeScript, lokálne a vzdialené ladenie (Windows, MacOS, Linux) a ladenie v Azure Web Apps a Azure Cloud Services. Má tiež podporu pre CSS, HTML, JavaScript, TypeScript, CoffeeScript a menej. Patrí sem spustenie JSHintu počas zadávania textu, ktoré vám umožní minifikovať súbory JavaScriptu z kontextovej ponuky a automatická kompilácia súborov CoffeeScript pri ukladaní, pričom sa zobrazí ukážka generovaného kódu JavaScript vedľa seba.
