JavaScript se dnes používá pro mnoho různých druhů aplikací. JavaScript při vytváření webových frontend nejčastěji pracuje s HTML5 a CSS. JavaScript však také pomáhá vytvářet mobilní aplikace a našel si důležité místo na zadní straně v podobě serverů Node.js. Naštěstí vývojové nástroje JavaScriptu - editoři i IDE - rostou, aby vyhověly novým výzvám.
Proč používat IDE místo editoru? Hlavním důvodem je, že IDE může ladit a někdy profilovat váš kód. IDE mají také podporu pro ALM systémy, integrující se jako Git, GitHub, Mercurial, Subversion a Perforce pro správu verzí. Ale jak více editorů přidává do těchto systémů háčky, podpora ALM se stává méně odlišujícím.
Eclipse 2018 s vývojovými nástroji JavaScriptu
V dávných dobách, kdy byl Java Swing nový a vzrušující, jsem si užíval používání Eclipse pro vývoj Java, ale brzy jsem přešel k jiným Java IDE. Před pěti a více lety, když jsem s Eclipse vyvíjel nějaký Android, jsem zjistil, že je to v pořádku, ale opatrné. Když jsem se v roce 2014 pokusil použít Eclipse Luna s JSDT pro vývoj JavaScriptu, neustále zobrazoval falešně pozitivní chyby platného kódu, který prošel JSHint.
Související video: Co je JavaScript? Tvůrce Brendan Eich vysvětluje
Brendan Eich, tvůrce programovacího jazyka JavaScript, vysvětluje, jak se tento jazyk používá a proč je stále oblíbený mezi programátory kvůli jeho snadnému použití.
Naštěstí od té doby vstoupilo na talíř několik dodavatelů a projektů open source. Eclipse 2018 s nástroji pro vývoj JavaScriptu má slušný editor JavaScriptu a ladicí program založený na prohlížeči Chrome, ale neví o TypeScript, který používá Angular, ani o souborech ES6 a JSX, které používá React.
Eclipse se vždy těšilo obrovskému trhu pluginů. U TypeScript zvažte bezplatný plugin TypeScript 1.0.0. U Angular, TypeScript a ES6 zvažte komerční Angular IDE (od CodeMix, dříve Webclipse) a u projektů React se soubory JSX vyzkoušejte open source TypeScript IDE. Pokud přidáte více než jeden, budete muset vyřešit jejich spor ohledně toho, který z nich by měl upravovat soubory TypeScript, ale to není velký problém.
Nástroje CodeMix jsou účtovány jako přidání inteligentních kódů Visual Studio Code do Eclipse. Na rozdíl od většiny pluginů Eclipse není Angular IDE od CodeMix zdarma, ale má 45denní bezplatnou zkušební verzi. Vzhledem k tomu, že Visual Studio Code je zdarma, zvážil bych to před platbou za Angular IDE.
Cena: Zdarma; Úhlové IDE od CodeMix, 29 $ (osobní) nebo 48 $ (komerční) za rok. Platforma: Windows, MacOS a Linux.
ActiveState Komodo IDE
Jsem uživatelem a fanouškem Komodo IDE od jeho prvního představení v roce 2001. Ačkoli novější produkty, jako je Visual Studio Code a WebStorm, ho v některých oblastech předčily, stále je to dobrý editor a IDE.
Komodo IDE poskytuje pokročilé úpravy JavaScriptu, zvýrazňování syntaxe, navigaci a ladění, ale nezahrnuje kontrolu kódu JavaScript. Za tímto účelem můžete vždy spustit JSHint v shellu.
Komodo podporuje desítky programovacích a značkovacích jazyků. Díky své široké škále podpory programovacího a značkovacího jazyka, včetně refaktoringu, ladění a profilování, je Komodo IDE velmi dobrou volbou pro end-to-end vývoj v otevřených zdrojových jazycích.
Komodo má modul refaktoringu kódu pro všechny jazyky, pro které poskytuje inteligenci kódu: PHP, Perl, Python, Ruby, Tcl, JavaScript a Node.js. Bohužel „nejmenší společný jmenovatel“ povaha tohoto přístupu omezuje možnosti přejmenování proměnných a členů třídy a extrahování kódu do metody. Toto jsou nicméně některé z nejužitečnějších případů.
Komodo IDE má jak úpravy sloupců, tak několik výběrů. To poskytuje téměř paritu se Sublime Text a TextMate, pokud jde o hromadné úpravy. Pokud provádíme srovnání, Komodo je spíše IDE, zatímco Sublime Text je mnohem rychlejší. A pokud budeme diskutovat o výkonu, rychlost Komodo se znatelně zlepšila ve srovnání se staršími verzemi, a to při kreslení obrazovky, vyhledávání a kontrole syntaxe.
Komodo IDE má několik funkcí, které většině konkurenčních produktů chybí. Jedním z nich je jeho inspektor HTTP, který je vynikající pro ladění zpětných volání Ajaxu. Další je jeho sada nástrojů Rx (regulární výraz nebo regulární výraz), což je skvělý způsob, jak vytvářet a testovat regulární výrazy pro JavaScript, Perl, PHP, Python a Ruby.
Spolupráce je dalším diferenciačním nástrojem IDE Komodo - považujte to za dokument Google pro kód. Můžete vytvářet relace pro skupiny souborů, přidávat kontakty do relací jako spolupracovníci a poté společně pracovat na stejných souborech se synchronizací téměř v reálném čase.
Spolupráce nenahrazuje řízení zdrojového kódu, ale je užitečným doplňkem. Komodo IDE integruje řízení zdrojového kódu pomocí CVS, Subversion, Perforce, Git, Mercurial a Bazaar. Podporovány jsou pouze základní operace správy verzí. Pokročilé operace, jako je větvení, je nutné provést pomocí samostatného klienta pro řízení zdrojového kódu.
Ačkoli Komodo nemá vlastní formátovač dokumentů JavaScript, využívá pro tento účel nejlepší bezplatný otevřený zdroj. Po vybalení z krabice je výchozím formátovačem souborů JavaScriptu JS Beautifier, ale dalších devět možností je k dispozici prostřednictvím rozevírací nabídky.
Komodo IDE podporuje ladění JavaScriptu na straně klienta v prohlížeči Chrome a může ladit Node.js lokálně i vzdáleně. Také ladí Perl, Python, PHP, Ruby, Tcl a XSLT.
Komodo IDE má prohlížeč DOM, který vám umožňuje prohlížet dokumenty XML a HTML jako skládací stromy. Umožňuje vám také prohledávat XPath a filtrovat strom.
Moduly profilování kódu a testování jednotek společnosti Komodo nepodporují JavaScript. JavaScript a Node.js jsou však podporovány modulem Code Intelligence společnosti Komodo, který implementuje procházení kódu, automatické doplňování a výzvy.
Komodo IDE může publikovat skupiny souborů přes FTP, SFTP, FTPS nebo SCP. Komodo může také synchronizovat soubory a detekovat potenciální konflikty publikování, které by mohly způsobit přepsání změn jiných lidí.
Celkově je Komodo dobrý, ale ne skvělý JavaScript IDE a dobrý, ale ne skvělý editor JavaScriptu. Může však dobře sloužit vašim potřebám, zvláště pokud také pracujete s Perl, Python, PHP, Ruby, Tcl nebo XSLT.
Cena: 295 $ plus 87 $ ročně za upgrady a podporu. Platforma: Windows (7 nebo vyšší), MacOS (10.9 nebo vyšší), Linux.
Apache NetBeans
NetBeans má velmi dobrou podporu pro JavaScript, HTML5 a CSS3 ve webových projektech a podporuje rámec Cordova / PhoneGap pro vytváření mobilních aplikací založených na JavaScriptu. NetBeans není nejrychlejší IDE v bloku, ale je jedním z nejúplnějších. A cena je samozřejmě správná: NetBeans je k dispozici zdarma pod licencí open source.
Editor NetBeans JavaScript poskytuje zvýraznění syntaxe, automatické doplňování a skládání kódu, přesně tak, jak byste čekali. Funkce pro úpravy JavaScriptu fungují také pro kód JavaScript vložený do souborů PHP, JSP a HTML. Podpora jQuery je vložena do editoru. NetBeans 8.2 má novou nebo vylepšenou podporu pro Node.js a Express, Gulp, Grunt, AngularJS, Knockout.js, Jade, Mocha a Selenium.
Analýza kódu probíhá při úpravách na pozadí a poskytuje varování a rady. Ladění funguje ve vestavěném prohlížeči WebKit a v prohlížeči Chrome s nainstalovaným konektorem NetBeans. Debugger může nastavit hraniční body DOM, line, event a XMLHttpRequest a bude zobrazovat proměnné, hodinky a zásobník volání. Integrované okno protokolu prohlížeče zobrazuje výjimky prohlížeče, chyby a varování.
NetBeans může konfigurovat a provádět testování jednotek pomocí JsTestDriver, souboru JAR (archiv Java), který si můžete zdarma stáhnout. Ladění testů jednotek je automaticky povoleno, pokud při konfiguraci JsTestDriver v okně Služby zadáte Chrome s NetBeans Connector jako jeden z prohlížečů JsTestDriver.
Když ladíte webovou aplikaci v prohlížeči Chrome pomocí NetBeans Connector a upravujete CSS z vývojářských nástrojů Chrome, změny budou NetBeans zachyceny a uloženy do souborů CSS. Pokud však byly vaše soubory CSS vygenerovány ze seznamů stylů Less nebo Sass, budete muset ručně aktualizovat zdrojový list, protože soubory CSS jsou pouze kompilovaným výstupem.
Ve vestavěném prohlížeči WebKit a v prohlížeči Chrome s nainstalovaným konektorem NetBeans můžete pomocí síťového monitoru NetBeans zobrazit záhlaví požadavků, odpovědi a hromádky volání pro komunikaci REST. U komunikace WebSocket se zobrazují záhlaví i textové rámečky. Celkově poskytuje NetBeans o něco lepší ladění s Chrome, než ve Firefoxu s Firebugem.
NetBeans integruje řízení zdrojového kódu s Git, Subversion, Mercurial a CVS. Podpora Git je rozšířena o grafický prohlížeč Diff a o regálový systém v IDE. NetBeans barevně kóduje stav souborů Git, umožňuje vám zobrazit historii revizí pro každý soubor a zobrazuje informace o revizi a autorovi pro každý řádek souborů řízených verzí. NetBeans má podobnou integraci se Subversion, Mercurial a CVS, ale testoval jsem pouze Git.
NetBeans integruje sledování problémů s Jira a Bugzilla. V okně úloh NetBeans můžete hledat úkoly, ukládat hledání, aktualizovat úkoly a řešit úkoly v registrovaném úložišti úloh. NetBeans má také integraci týmového serveru pro weby, které používají infrastrukturu Kenai.
Pokud mohu určit, NetBeans postrádá jakékoli profilování JavaScriptu, i když dokáže profilovat Java aplikace a moduly EJB. A zatímco NetBeans dokáže refaktorovat prostředí Java a PHP, nemůže refaktorovat JavaScript.
Celkově je NetBeans slušným uchazečem o vývoj JavaScriptu, HTML5 a CSS3 na straně klienta, zvláště pokud na serveru provádíte také vývoj Java, PHP nebo C ++. Pokud nemáte rozpočet na WebStorm a nelíbí se vám Microsoft, zjistíte, že NetBeans tuto práci dělá, pokud nebudete ve spěchu.
Cena: Zdarma. Platforma: Windows, Solaris, MacOS, Linux.
Microsoft Visual Studio 2017
Ve své úplné recenzi Visual Studio 2017 jsem diskutoval o produktu jako celku, jen s několika odkazy na JavaScript. Zde obrátím důraz.
Celkově lze říci, že Visual Studio 2017 slouží velmi dobře jako IDE JavaScriptu, i když je to lepší .Net IDE a není to tak dobré jako WebStorm pro JavaScript. I když také velmi dobře slouží jako editor JavaScriptu, je to lepší editor C # a není tak dobrý ani rychlý jako Sublime Text pro JavaScript.
Jak můžete vidět na následujícím obrázku, Visual Studio 2017 dělá dobrou práci s barvením syntaxe JavaScriptu a skládáním kódu. Dobře to funguje i při navigaci v kódu JavaScript: Klikněte pravým tlačítkem na funkci nebo název člena a můžete snadno přejít na definici nebo najít všechny odkazy. Až definici dokončíte, můžete se stisknutím šipky zpět v horní části rozhraní vrátit zpět na původní místo.
Můžete snadno vložit úryvky a obklopit svůj výběr vhodným kódem, například kódováním HTML nebo URL řetězcových proměnných. Kromě JavaScriptu, HTML a CSS můžete upravovat soubory Markdown a zobrazit vykreslený Markdown a můžete pracovat s TypeScriptem.
Kromě toho můžete samozřejmě kódovat v jakémkoli jazyce .Net, v C ++ a v Pythonu. A jako tomu bylo v případě Visual Studio po dlouhou dobu, můžete pracovat s databázemi přímo z IDE. Visual Studio je obzvláště silné při práci s databázemi serveru SQL Server. U většiny databázových operací, které byste chtěli dělat jako vývojář, se můžete zbavit používání sady Visual Studio namísto SQL Server Management Studio.
Visual Studio 2017 podporuje ladění v téměř každém prohlížeči, na který se chcete pokusit, včetně prohlížečů na mobilních zařízeních a v emulátorech. Má také dva vlastní prohlížeče: obyčejný interní webový prohlížeč, který je (překvapením!) Verzí aplikace Internet Explorer, a Page Inspector, který zobrazuje vykreslenou stránku spolu se všemi zdroji a styly. Ačkoli Page Inspector dělá spoustu potenciálně časově náročných věcí, reverzního inženýrství, aby se nastavil pro stránku, jakmile jste na ní, můžete tam zůstat, aniž byste museli žonglovat s Visual Studio, prohlížečem a vývojářskými nástroji prohlížeče .
Výkon Visual Studio 2017 je obvykle docela dobrý, pokud mu poskytnete dostatek paměti a výkonu procesoru, ale má tendenci vyžadovat značné prostředky. Visual Studio 2017 má skvělou diagnostiku výkonu pro aplikace, ale obecně nejsou tak užitečné pro běžný kód JavaScript, který obvykle běží hluboko uvnitř prohlížeče. Visual Studio má konkrétní časování funkcí JavaScriptu, odezvu uživatelského rozhraní HTML a paměťové nástroje JavaScriptu, ale vztahují se pouze na projekty Universal Windows Platform založené na JavaScriptu, nikoli na webové projekty, které používají JavaScript.
Visual Studio 2017 zahrnuje vynikající úpravy aplikací Node.js, IntelliSense, profilování, integraci NPM, podporu TypeScript, lokální a vzdálené ladění (Windows, MacOS, Linux) a ladění v Azure Web Apps a Azure Cloud Services. Má také podporu pro CSS, HTML, JavaScript, TypeScript, CoffeeScript a méně. To zahrnuje spuštění JSHint při psaní, umožnění minifikace souborů JavaScriptu z kontextové nabídky a automatické kompilace souborů CoffeeScript při ukládání, což ukazuje souběžný náhled vygenerovaného JavaScriptu.
