Recenzja: 6 najlepszych IDE JavaScript

Obecnie JavaScript jest używany w wielu różnych rodzajach aplikacji. Najczęściej JavaScript współpracuje z HTML5 i CSS do tworzenia interfejsów WWW. Ale JavaScript pomaga również w tworzeniu aplikacji mobilnych i znalazł ważne miejsce na zapleczu w postaci serwerów Node.js. Na szczęście narzędzia programistyczne JavaScript - zarówno edytory, jak i IDE - rosną, aby sprostać nowym wyzwaniom.

Po co używać IDE zamiast edytora? Głównym powodem jest to, że IDE może debugować i czasami profilować kod. IDE obsługują również systemy ALM, integrując się z takimi rozwiązaniami jak Git, GitHub, Mercurial, Subversion i Perforce w celu kontroli wersji. Jednak w miarę jak coraz więcej redaktorów dodaje haczyki do tych systemów, obsługa ALM staje się coraz mniejszym wyróżnikiem.

Eclipse 2018 z narzędziami programistycznymi JavaScript

W dawnych czasach, kiedy Java Swing była nowa i ekscytująca, podobało mi się używanie Eclipse do programowania w Javie, ale wkrótce przeniosłem się na inne środowiska Java IDE. Ponad pięć lat temu, kiedy tworzyłem program na Androida w Eclipse, okazało się, że to jest OK, ale kiepskie. Kiedy próbowałem używać Eclipse Luna z JSDT do programowania JavaScript w 2014 roku, stale wyświetlał błędy fałszywie dodatnie dla prawidłowego kodu, który przekazał JSHint.

Powiązane wideo: Co to jest JavaScript? Twórca Brendan Eich wyjaśnia

Brendan Eich, twórca języka programowania JavaScript, wyjaśnia, w jaki sposób jest używany i dlaczego jest nadal ulubionym językiem programistów ze względu na łatwość użycia.

Na szczęście od tego czasu kilku dostawców i projekty open source stanęło na wysokości zadania. Eclipse 2018 z JavaScript Development Tools ma przyzwoity edytor JavaScript i debugger oparty na Chrome, ale nie wie o TypeScript, z którego korzysta Angular, ani o plikach ES6 i JSX, z których korzysta React.

Eclipse zawsze cieszył się ogromnym rynkiem wtyczek. W przypadku języka TypeScript rozważ darmową wtyczkę TypeScript 1.0.0. W przypadku Angular, TypeScript i ES6 rozważ komercyjne środowisko Angular IDE (autorstwa CodeMix, dawniej Webclipse), a w przypadku projektów React z plikami JSX wypróbuj open source TypeScript IDE. Jeśli dodasz więcej niż jeden, będziesz musiał rozwiązać spór dotyczący tego, który z nich powinien edytować pliki TypeScript, ale to nie jest wielka sprawa.

Narzędzia CodeMix są rozliczane jako dodanie Visual Studio Code smarts do Eclipse. W przeciwieństwie do większości wtyczek Eclipse, Angular IDE firmy CodeMix nie jest darmowe, ale ma 45-dniowy bezpłatny okres próbny. Biorąc pod uwagę, że Visual Studio Code jest darmowy, rozważę to przed zapłaceniem za Angular IDE.

Koszt: bezpłatny; Angular IDE firmy CodeMix, 29 USD (osobiste) lub 48 USD (komercyjne) rocznie. Platforma: Windows, MacOS i Linux.

ActiveState Komodo IDE

Jestem użytkownikiem i fanem Komodo IDE od czasu jego wprowadzenia w 2001 roku. Chociaż nowsze produkty, takie jak Visual Studio Code i WebStorm, w niektórych obszarach przewyższały go, nadal jest dobrym edytorem i IDE.

Komodo IDE zapewnia zaawansowaną edycję JavaScript, podświetlanie składni, nawigację i debugowanie, ale nie obejmuje sprawdzania kodu JavaScript. W tym celu zawsze możesz uruchomić JSHint w powłoce.

Komodo obsługuje dziesiątki języków programowania i znaczników. Dzięki szerokiemu zakresowi obsługi języków programowania i znaczników, w tym refaktoryzacji, debugowania i profilowania, środowisko Komodo IDE jest bardzo dobrym wyborem do kompleksowego programowania w językach open source.

Komodo ma moduł refaktoryzacji kodu dla wszystkich języków, dla których zapewnia inteligencję kodu: PHP, Perl, Python, Ruby, Tcl, JavaScript i Node.js. Niestety, „najmniej wspólny mianownik” tego podejścia ogranicza możliwości do zmiany nazw zmiennych i składowych klas oraz do wyodrębnienia kodu do metody. Niemniej są to jedne z najbardziej przydatnych przypadków.

Komodo IDE ma zarówno edycję kolumn, jak i wiele wyborów. Zapewnia to zgodność z Sublime Text i TextMate, jeśli chodzi o edycję masową. Dopóki robimy porównanie, Komodo jest bardziej IDE, podczas gdy Sublime Text jest znacznie szybszy. Dopóki dyskutujemy o wydajności, prędkość Komodo znacznie się poprawiła w porównaniu ze starszymi wersjami, jeśli chodzi o rysowanie ekranu, wyszukiwanie i sprawdzanie składni.

Komodo IDE ma kilka funkcji, których brakuje większości konkurencyjnych produktów. Jednym z nich jest Inspektor HTTP, który doskonale nadaje się do debugowania wywołań zwrotnych Ajax. Innym jest jego zestaw narzędzi Rx (wyrażenia regularne lub regex), który jest świetnym sposobem na tworzenie i testowanie wyrażeń regularnych dla JavaScript, Perl, PHP, Python i Ruby.

Współpraca to kolejny wyróżnik Komodo IDE - potraktuj to jako Dokumenty Google dla kodu. Możesz tworzyć sesje dla grup plików, dodawać kontakty do sesji jako współpracownicy, a następnie pracować razem nad tymi samymi plikami w tym samym czasie, z synchronizacją niemal w czasie rzeczywistym.

Współpraca nie zastępuje kontroli kodu źródłowego, ale stanowi przydatne uzupełnienie. Komodo IDE integruje kontrolę kodu źródłowego za pomocą CVS, Subversion, Perforce, Git, Mercurial i Bazaar. Obsługiwane są tylko podstawowe operacje kontroli wersji. Zaawansowane operacje, takie jak rozgałęzianie, muszą być wykonywane przy użyciu oddzielnego klienta kontroli kodu źródłowego.

Chociaż Komodo nie ma własnego programu do formatowania dokumentów JavaScript, w tym celu wykorzystuje najlepsze darmowe oprogramowanie typu open source. Po wyjęciu z pudełka domyślnym programem formatującym dla plików JavaScript jest JS Beautifier, ale kolejnych dziewięć opcji jest dostępnych za pośrednictwem menu rozwijanego.

Komodo IDE obsługuje debugowanie JavaScript po stronie klienta w przeglądarce Chrome i może debugować Node.js zarówno lokalnie, jak i zdalnie. Debuguje również Perl, Python, PHP, Ruby, Tcl i XSLT.

Komodo IDE ma przeglądarkę DOM, która umożliwia przeglądanie dokumentów XML i HTML jako rozwijanych drzew. Umożliwia także wyszukiwanie XPath w celu filtrowania drzewa.

Moduły profilowania kodu i testów jednostkowych Komodo nie obsługują JavaScript. Jednak zarówno JavaScript, jak i Node.js są obsługiwane przez moduł Code Intelligence firmy Komodo, który implementuje przeglądanie kodu, autouzupełnianie i podpowiedzi.

Komodo IDE może publikować grupy plików przez FTP, SFTP, FTPS lub SCP. Komodo może również synchronizować pliki i wykrywać potencjalne konflikty publikowania, które mogą spowodować nadpisanie zmian innych osób.

Ogólnie rzecz biorąc, Komodo jest dobrym, ale nie świetnym IDE JavaScript oraz dobrym, ale nie świetnym edytorem JavaScript. Jednak może dobrze służyć Twoim potrzebom, zwłaszcza jeśli pracujesz również z Perlem, Pythonem, PHP, Ruby, Tcl lub XSLT.

Koszt: 295 USD plus 87 USD rocznie na aktualizacje i wsparcie. Platforma: Windows (7 lub nowszy), MacOS (10.9 lub nowszy), Linux.

Apache NetBeans

NetBeans ma bardzo dobre wsparcie dla JavaScript, HTML5 i CSS3 w projektach internetowych, a także obsługuje strukturę Cordova / PhoneGap do tworzenia aplikacji mobilnych opartych na JavaScript. NetBeans nie jest najszybszym IDE w tym bloku, ale jest jednym z bardziej kompletnych. I oczywiście cena jest odpowiednia: NetBeans jest dostępny bezpłatnie na licencji open source.

Edytor JavaScript NetBeans zapewnia podświetlanie składni, autouzupełnianie i zwijanie kodu, prawie tak, jak można się spodziewać. Funkcje edycji JavaScript działają również dla kodu JavaScript osadzonego w plikach PHP, JSP i HTML. Obsługa jQuery jest wbudowana w edytor. NetBeans 8.2 ma nowe lub ulepszone wsparcie dla Node.js i Express, Gulp, Grunt, AngularJS, Knockout.js, Jade, Mocha i Selenium.

Analiza kodu przebiega w tle podczas edycji, zapewniając ostrzeżenia i wskazówki. Debugowanie działa we wbudowanej przeglądarce WebKit oraz w przeglądarce Chrome z zainstalowanym łącznikiem NetBeans. Debugger może ustawić punkty przerwania DOM, wiersz, zdarzenie i XMLHttpRequest, a także wyświetli zmienne, zegarki i stos wywołań. Zintegrowane okno dziennika przeglądarki wyświetla wyjątki, błędy i ostrzeżenia przeglądarki.

NetBeans może konfigurować i przeprowadzać testy jednostkowe za pomocą JsTestDriver, pliku JAR (archiwum Java), który można pobrać bezpłatnie. Debugowanie testów jednostkowych jest automatycznie włączane, jeśli określisz Chrome z łącznikiem NetBeans jako jedną z przeglądarek JsTestDriver podczas konfigurowania JsTestDriver w oknie Usługi.

Podczas debugowania aplikacji internetowej w przeglądarce Chrome za pomocą łącznika NetBeans i edycji CSS z poziomu narzędzi deweloperskich Chrome zmiany zostaną przechwycone przez NetBeans i zapisane w plikach CSS. Jeśli jednak twoje pliki CSS zostały wygenerowane z arkuszy stylów Less lub Sass, będziesz musiał ręcznie zaktualizować arkusz źródłowy, ponieważ pliki CSS są jedynie skompilowanymi danymi wyjściowymi.

We wbudowanej przeglądarce WebKit i przeglądarce Chrome z zainstalowanym łącznikiem NetBeans można używać monitora sieci NetBeans do przeglądania nagłówków żądań, odpowiedzi i stosów wywołań do komunikacji REST. W przypadku komunikacji WebSocket wyświetlane są zarówno nagłówki, jak i ramki tekstowe. Ogólnie rzecz biorąc, NetBeans zapewnia nieco lepsze wrażenia z debugowania w Chrome niż w Firefoksie z Firebug.

NetBeans integruje kontrolę kodu źródłowego z Git, Subversion, Mercurial i CVS. Wsparcie dla Git jest wzmocnione przez graficzną przeglądarkę Diff i system półek w IDE. NetBeans koduje kolorami stan plików Git, umożliwia przeglądanie historii zmian dla każdego pliku i wyświetla informacje o wersji i autorze dla każdego wiersza plików z kontrolą wersji. NetBeans ma podobne integracje z Subversion, Mercurial i CVS, ale testowałem tylko Git.

NetBeans integruje śledzenie problemów z Jira i Bugzillą. W oknie zadań NetBeans można wyszukiwać zadania, zapisywać wyszukiwania, aktualizować zadania i rozwiązywać zadania w zarejestrowanym repozytorium zadań. NetBeans zapewnia również integrację z serwerem zespołu dla witryn korzystających z infrastruktury Kenai.

O ile mogę stwierdzić, NetBeans nie ma żadnego profilowania JavaScript, chociaż może profilować aplikacje Java i moduły EJB. I chociaż NetBeans może refaktoryzować Java i PHP, nie może refaktoryzować JavaScript.

Ogólnie rzecz biorąc, NetBeans jest przyzwoitym kandydatem do programowania po stronie klienta w JavaScript, HTML5 i CSS3, zwłaszcza jeśli tworzysz na serwerze również Java, PHP lub C ++. Jeśli nie masz budżetu na WebStorm i nie lubisz Microsoftu, przekonasz się, że NetBeans wykona pracę, o ile nie będziesz się bardzo spieszyć.

Koszt: bezpłatnie. Platforma: Windows, Solaris, MacOS, Linux. 

Microsoft Visual Studio 2017

W mojej pełnej recenzji programu Visual Studio 2017 omówiłem produkt jako całość, z kilkoma odniesieniami do JavaScript. Odwrócę tutaj nacisk.

Ogólnie rzecz biorąc, Visual Studio 2017 bardzo dobrze służy jako JavaScript IDE, chociaż jest lepszym .Net IDE i nie jest tak dobry jak WebStorm dla JavaScript. Chociaż służy również bardzo dobrze jako edytor JavaScript, jest lepszym edytorem C # i nie jest tak dobry ani tak szybki jak Sublime Text for JavaScript.

Jak widać na poniższym zrzucie ekranu, program Visual Studio 2017 radzi sobie dobrze z kolorowaniem składni JavaScript i składaniem kodu. Dobrze radzi sobie również z nawigacją po kodzie JavaScript: kliknij prawym przyciskiem myszy nazwę funkcji lub elementu członkowskiego, aby łatwo przejść do definicji lub znaleźć wszystkie odniesienia. Kiedy skończysz przeglądać definicję, możesz nacisnąć strzałkę wstecz u góry interfejsu, aby wrócić do miejsca, w którym byłeś.

Możesz łatwo wstawiać fragmenty i otaczać swój wybór odpowiednim kodem, takim jak kodowanie HTML lub URL zmiennych ciągów. Oprócz JavaScript, HTML i CSS możesz edytować pliki Markdown i wyświetlać wyrenderowany Markdown, a także możesz pracować z TypeScript.

Ponadto możesz oczywiście programować w dowolnym języku .Net, w C ++ i Pythonie. Podobnie jak w przypadku programu Visual Studio przez długi czas, możesz pracować z bazami danych bezpośrednio z IDE. Program Visual Studio jest szczególnie wydajny podczas pracy z bazami danych SQL Server. W przypadku większości operacji na bazie danych, które chcesz wykonywać jako programista, możesz uciec od używania programu Visual Studio zamiast SQL Server Management Studio.

Visual Studio 2017 obsługuje debugowanie w prawie każdej przeglądarce, którą chcesz do niego rzucić, w tym w przeglądarkach na urządzeniach mobilnych i emulatorach. Posiada również dwie własne przeglądarki: zwykłą wewnętrzną przeglądarkę internetową, która jest (niespodzianka!) Wersją Internet Explorera oraz Inspektor stron, który pokazuje wyrenderowaną stronę wraz ze wszystkimi źródłami i stylami. Chociaż Inspektor stron wykonuje wiele potencjalnie czasochłonnych czynności związanych z inżynierią wsteczną, aby skonfigurować się dla strony, gdy już jesteś na niej, możesz tam pozostać bez konieczności łączenia Visual Studio, przeglądarki i narzędzi programistycznych przeglądarki .

Wydajność programu Visual Studio 2017 jest zwykle całkiem dobra, jeśli zapewnisz mu wystarczającą ilość pamięci i mocy procesora, ale zwykle wymaga znacznych zasobów. Program Visual Studio 2017 oferuje doskonałą diagnostykę wydajności aplikacji, ale w zasadzie nie są one tak przydatne w przypadku zwykłego kodu JavaScript, który zwykle działa głęboko w przeglądarce. Program Visual Studio ma określone czasy funkcji JavaScript, responsywność interfejsu użytkownika HTML i narzędzia pamięci JavaScript, ale mają one zastosowanie tylko do projektów platformy Universal Windows opartych na języku JavaScript, a nie do projektów internetowych, które używają języka JavaScript.

Program Visual Studio 2017 obejmuje doskonałą edycję aplikacji Node.js, technologię IntelliSense, profilowanie, integrację NPM, obsługę języka TypeScript, debugowanie lokalnie i zdalnie (Windows, MacOS, Linux) oraz debugowanie w Azure Web Apps i Azure Cloud Services. Obsługuje również CSS, HTML, JavaScript, TypeScript, CoffeeScript i Less. Obejmuje to uruchamianie JSHint podczas pisania, co pozwala na zminimalizowanie plików JavaScript z poziomu menu kontekstowego i automatyczne kompilowanie plików CoffeeScript przy zapisywaniu, pokazując podgląd wygenerowanego kodu JavaScript obok siebie.