Обзор: 6 лучших IDE для JavaScript

Сегодня JavaScript используется для множества различных приложений. Чаще всего JavaScript работает с HTML5 и CSS для создания веб-интерфейсов. Но JavaScript также помогает создавать мобильные приложения, и он нашел важное место в серверной части в виде серверов Node.js. К счастью, инструменты разработки JavaScript - как редакторы, так и IDE - становятся все более актуальными для решения новых задач.

Зачем использовать IDE вместо редактора? Основная причина в том, что IDE может отлаживать и иногда профилировать ваш код. IDE также поддерживают системы ALM, интегрируясь с Git, GitHub, Mercurial, Subversion и Perforce для контроля версий. Но по мере того, как все больше редакторов добавляют в эти системы ловушки, поддержка ALM становится все менее важным фактором.

Eclipse 2018 с инструментами разработки JavaScript

В те давние времена, когда Java Swing была новой и захватывающей, мне нравилось использовать Eclipse для разработки Java, но вскоре я перешел на другие Java IDE. Пять с лишним лет назад, когда я занимался разработкой Android с помощью Eclipse, я обнаружил, что все в порядке, но плохо. Когда я пытался использовать Eclipse Luna с JSDT для разработки JavaScript в 2014 году, он постоянно отображал ложноположительные ошибки для действительного кода, который прошел JSHint.

Видео по теме: Что такое JavaScript? Создатель Брендан Эйх объясняет

Брендан Эйх, создатель языка программирования JavaScript, объясняет, как этот язык используется, и почему он по-прежнему пользуется популярностью среди программистов за простоту использования.

К счастью, с тех пор несколько поставщиков и проектов с открытым исходным кодом подошли к этому уровню. Eclipse 2018 с инструментами разработки JavaScript имеет приличный редактор JavaScript и отладчик на основе Chrome, но он не знает о TypeScript, который используется Angular, или о файлах ES6 и JSX, которые используются React.

Eclipse всегда пользовался огромным рынком плагинов. Для TypeScript рассмотрите бесплатный плагин TypeScript 1.0.0. Для Angular, TypeScript и ES6 рассмотрите коммерческую Angular IDE (от CodeMix, ранее Webclipse), а для проектов React с файлами JSX попробуйте IDE TypeScript с открытым исходным кодом. Если вы добавите более одного, вам нужно будет разрешить их спор о том, какой из них следует редактировать файлы TypeScript, но это не имеет большого значения.

Инструменты CodeMix оплачиваются как добавляющие умные элементы Visual Studio Code в Eclipse. В отличие от большинства плагинов Eclipse, Angular IDE от CodeMix не бесплатен, но имеет 45-дневную бесплатную пробную версию. Учитывая, что Visual Studio Code бесплатен, я бы подумал об этом, прежде чем платить за Angular IDE.

Стоимость: бесплатно; Angular IDE от CodeMix, 29 долларов (персональный) или 48 долларов (коммерческий) в год. Платформа: Windows, MacOS и Linux.

ActiveState Komodo IDE

Я был пользователем и поклонником Komodo IDE с тех пор, как она была впервые представлена ​​в 2001 году. Хотя новые продукты, такие как Visual Studio Code и WebStorm, превзошли ее в некоторых областях, она все еще является хорошим редактором и IDE.

Komodo IDE обеспечивает расширенное редактирование JavaScript, подсветку синтаксиса, навигацию и отладку, но не включает проверку кода JavaScript. Для этого вы всегда можете запустить JSHint в оболочке.

Komodo поддерживает десятки языков программирования и разметки. Благодаря широкому спектру поддержки языков программирования и разметки, включая рефакторинг, отладку и профилирование, Komodo IDE является очень хорошим выбором для сквозной разработки на языках с открытым исходным кодом.

Komodo имеет модуль рефакторинга кода для всех языков, для которых он обеспечивает аналитику кода: PHP, Perl, Python, Ruby, Tcl, JavaScript и Node.js. К сожалению, характер этого подхода с «наименьшим общим знаменателем» ограничивает возможности переименования переменных и членов класса и извлечения кода в метод. Тем не менее, это одни из самых полезных случаев.

Komodo IDE имеет как редактирование столбцов, так и множественный выбор. Это обеспечивает почти равенство с Sublime Text и TextMate в том, что касается массового редактирования. Пока мы проводим сравнение, Komodo - это скорее IDE, а Sublime Text намного быстрее. И пока мы обсуждаем производительность, скорость Komodo заметно улучшилась по сравнению со старыми версиями при рисовании экрана, поиске и проверке синтаксиса.

Komodo IDE имеет несколько функций, которых не хватает большинству конкурирующих продуктов. Одним из них является его HTTP Inspector, который отлично подходит для отладки обратных вызовов Ajax. Другой - это набор инструментов Rx (регулярное выражение или регулярное выражение), который является отличным способом создания и тестирования регулярных выражений для JavaScript, Perl, PHP, Python и Ruby.

Сотрудничество - еще одно отличие Komodo IDE - воспринимайте это как Документы Google для кода. Вы можете создавать сеансы для групп файлов, добавлять контакты к сеансам в качестве соавторов, а затем работать вместе с одними и теми же файлами одновременно с синхронизацией почти в реальном времени.

Сотрудничество - это не замена контроля исходного кода, но полезное дополнение. Komodo IDE интегрирует управление исходным кодом с использованием CVS, Subversion, Perforce, Git, Mercurial и Bazaar. Поддерживаются только основные операции контроля версий. Расширенные операции, такие как ветвление, должны выполняться с использованием отдельного клиента управления исходным кодом.

Хотя Komodo не имеет собственного средства форматирования документов JavaScript, для этой цели он использует лучший бесплатный открытый исходный код. По умолчанию для файлов JavaScript используется программа форматирования JS Beautifier, но в раскрывающемся меню доступны еще девять параметров.

Komodo IDE поддерживает отладку клиентского JavaScript в Chrome и может отлаживать Node.js как локально, так и удаленно. Он также отлаживает Perl, Python, PHP, Ruby, Tcl и XSLT.

Komodo IDE имеет средство просмотра DOM, которое позволяет просматривать документы XML и HTML как сворачиваемые деревья. Он также позволяет выполнять поиск XPath для фильтрации дерева.

Модули профилирования кода и модульного тестирования Komodo не поддерживают JavaScript. Однако как JavaScript, так и Node.js поддерживаются модулем Code Intelligence Komodo, который реализует просмотр кода, автозаполнение и подсказки.

Komodo IDE может публиковать группы файлов по FTP, SFTP, FTPS или SCP. Komodo также может синхронизировать файлы и обнаруживать потенциальные конфликты публикации, которые могут привести к перезаписи чужих изменений.

В целом Komodo - хорошая, но не отличная среда разработки для JavaScript и хороший, но не отличный редактор JavaScript. Однако он вполне может удовлетворить ваши потребности, особенно если вы также работаете с Perl, Python, PHP, Ruby, Tcl или XSLT.

Стоимость: 295 долларов плюс 87 долларов в год на обновления и поддержку. Платформа: Windows (7 или выше), MacOS (10.9 или выше), Linux.

Apache NetBeans

NetBeans имеет очень хорошую поддержку JavaScript, HTML5 и CSS3 в веб-проектах, а также поддерживает структуру Cordova / PhoneGap для создания мобильных приложений на основе JavaScript. NetBeans - не самая быстрая IDE на рынке, но одна из наиболее полных. И, конечно же, цена подходящая: NetBeans доступен бесплатно по лицензии с открытым исходным кодом.

Редактор JavaScript NetBeans обеспечивает выделение синтаксиса, автозаполнение и сворачивание кода, как и следовало ожидать. Функции редактирования JavaScript также работают с кодом JavaScript, встроенным в файлы PHP, JSP и HTML. Поддержка jQuery встроена в редактор. NetBeans 8.2 имеет новую или улучшенную поддержку Node.js и Express, Gulp, Grunt, AngularJS, Knockout.js, Jade, Mocha и Selenium.

Анализ кода выполняется в фоновом режиме по мере редактирования, предоставляя предупреждения и подсказки. Отладка работает во встроенном браузере WebKit и в Chrome с установленным соединителем NetBeans. Отладчик может устанавливать точки останова DOM, строки, события и XMLHttpRequest, и он будет отображать переменные, часы и стек вызовов. Окно встроенного журнала браузера отображает исключения, ошибки и предупреждения браузера.

NetBeans может настраивать и выполнять модульное тестирование с помощью JsTestDriver, файла JAR (архив Java), который можно загрузить бесплатно. Отладка модульных тестов включается автоматически, если вы указываете Chrome с NetBeans Connector в качестве одного из браузеров JsTestDriver при настройке JsTestDriver в окне «Службы».

Когда вы отлаживаете веб-приложение в Chrome с помощью коннектора NetBeans и редактируете CSS из инструментов разработчика Chrome, изменения будут зафиксированы NetBeans и сохранены в файлах CSS. Однако, если ваши файлы CSS были созданы из таблиц стилей Less или Sass, вам придется вручную обновить исходную таблицу, потому что файлы CSS представляют собой просто скомпилированный вывод.

Во встроенном браузере WebKit и в Chrome с установленным соединителем NetBeans можно использовать сетевой монитор NetBeans для просмотра заголовков запросов, ответов и стеков вызовов для связи REST. Для связи через WebSocket отображаются как заголовки, так и текстовые фреймы. В целом NetBeans обеспечивает немного лучший опыт отладки в Chrome, чем в Firefox с Firebug.

NetBeans интегрирует управление исходным кодом с Git, Subversion, Mercurial и CVS. Поддержка Git дополняется графическим средством просмотра Diff и системой полок в среде IDE. NetBeans выделяет цветом статус файлов в Git, позволяет просматривать историю изменений для каждого файла и показывает информацию о редакции и авторе для каждой строки файлов с контролем версий. NetBeans имеет аналогичную интеграцию с Subversion, Mercurial и CVS, но я тестировал только Git.

NetBeans интегрирует отслеживание проблем с Jira и Bugzilla. В окне задач NetBeans вы можете искать задачи, сохранять результаты поиска, обновлять задачи и решать задачи в зарегистрированном репозитории задач. NetBeans также имеет интеграцию командного сервера для сайтов, использующих инфраструктуру Kenai.

Насколько я могу судить, в NetBeans отсутствует профилирование JavaScript, хотя он может профилировать приложения Java и модули EJB. И хотя NetBeans может реорганизовать Java и PHP, он не может рефакторинг JavaScript.

В целом NetBeans является достойным соперником для разработки на стороне клиента JavaScript, HTML5 и CSS3, особенно если вы также занимаетесь разработкой Java, PHP или C ++ на сервере. Если у вас нет бюджета на WebStorm и вы не любите Microsoft, вы обнаружите, что NetBeans выполняет свою работу, если вы не особо торопитесь.

Стоимость: бесплатно. Платформа: Windows, Solaris, MacOS, Linux. 

Microsoft Visual Studio 2017

В моем полном обзоре Visual Studio 2017 я обсуждал продукт в целом, за исключением нескольких ссылок на JavaScript. Я поменяю здесь акцент.

В целом Visual Studio 2017 очень хорошо работает в качестве IDE JavaScript, хотя это лучше .Net IDE и не так хорошо, как WebStorm для JavaScript. Хотя он также очень хорошо работает в качестве редактора JavaScript, это лучший редактор C #, и он не так хорош и не так быстр, как Sublime Text для JavaScript.

Как видно на скриншоте ниже, Visual Studio 2017 хорошо справляется с раскраской синтаксиса JavaScript и сворачиванием кода. Он также хорошо справляется с навигацией по коду JavaScript: щелкните правой кнопкой мыши имя функции или члена, и вы можете легко перейти к определению или найти все ссылки. Когда вы закончите смотреть определение, вы можете нажать стрелку назад в верхней части интерфейса, чтобы вернуться туда, где вы были.

Вы можете легко вставлять фрагменты и окружать свой выбор соответствующим кодом, например кодировкой строковых переменных HTML или URL. Помимо JavaScript, HTML и CSS, вы можете редактировать файлы Markdown и видеть обработанный Markdown, а также работать с TypeScript.

Кроме того, вы, конечно, можете писать код на любом языке .Net, на C ++ и Python. Как и в случае с Visual Studio долгое время, вы можете работать с базами данных прямо из IDE. Visual Studio особенно эффективен при работе с базами данных SQL Server. Вы можете обойтись без использования Visual Studio вместо SQL Server Management Studio для большинства операций с базой данных, которые вы хотели бы выполнять как разработчик.

Visual Studio 2017 поддерживает отладку практически в любом браузере, который вы хотите использовать, включая браузеры на мобильных устройствах и в эмуляторах. У него также есть два собственных браузера: простой внутренний веб-браузер, который (сюрприз!) Является версией Internet Explorer, и Инспектор страниц, который показывает отрисованную страницу вместе со всеми источниками и стилями. Хотя Инспектор страниц выполняет много потенциально трудоемких операций по обратному проектированию, чтобы настроить себя для страницы, как только вы в нем, вы можете оставаться там, не манипулируя Visual Studio, браузером и инструментами разработчика браузера. .

Производительность Visual Studio 2017 обычно довольно высока, если вы даете ей достаточно памяти и мощности процессора, но она обычно требует значительных ресурсов. Visual Studio 2017 имеет отличные средства диагностики производительности для приложений, но в целом они не так полезны для обычного кода JavaScript, который обычно выполняется глубоко внутри браузера. В Visual Studio есть определенные средства синхронизации функций JavaScript, отзывчивость пользовательского интерфейса HTML и инструменты памяти JavaScript, но они применяются только к проектам универсальной платформы Windows на основе JavaScript, а не к веб-проектам, которые используют JavaScript.

Visual Studio 2017 включает отличное редактирование приложений Node.js, IntelliSense, профилирование, интеграцию NPM, поддержку TypeScript, локальную и удаленную отладку (Windows, MacOS, Linux), а также отладку в веб-приложениях Azure и облачных службах Azure. Он также поддерживает CSS, HTML, JavaScript, TypeScript, CoffeeScript и Less. Это включает в себя запуск JSHint по мере ввода, позволяющий минимизировать файлы JavaScript из контекстного меню и автоматическую компиляцию файлов CoffeeScript при сохранении с одновременным предварительным просмотром сгенерированного JavaScript.