Обзор: 10 лучших редакторов JavaScript

Программисты на JavaScript могут выбирать из множества хороших инструментов - их слишком много, чтобы их отслеживать. В этой статье я обсуждаю 10 текстовых редакторов с хорошей поддержкой для разработки с использованием JavaScript, HTML5 и CSS, а также для документирования с помощью Markdown. Зачем использовать редактор для программирования на JavaScript вместо IDE? Одним словом: скорость.

Существенное различие между редакторами и IDE заключается в том, что IDE могут отлаживать и иногда профилировать ваш код, а IDE поддерживают системы управления жизненным циклом приложений (ALM). Многие из редакторов, которые мы обсуждаем здесь, поддерживают по крайней мере одну систему контроля версий, часто Git, так что критерий меньше различает между IDE и редакторами, чем раньше.

Sublime Text и Visual Studio Code являются лучшими среди редакторов JavaScript: Sublime Text за его скорость и удобные функции редактирования, а Visual Studio Code - за еще лучшие функции и почти такую ​​же скорость. Скобки занимает третье место. Хотя TextMate занимал одно из первых мест в моем списке несколько лет назад, его возможности не успевали за новыми разработками.

Скорее всего, вы найдете предпочтительный редактор JavaScript в Sublime Text, Visual Studio Code или Brackets. Но у нескольких других инструментов - Atom, BBEdit, Komodo Edit, Notepad ++, Emacs и Vim - есть что порекомендовать. В зависимости от поставленной задачи вам может пригодиться любой из них.

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

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

Давайте рассмотрим варианты и сравним их в конце.

Возвышенный текст

Если вам нужен гибкий, мощный, расширяемый текстовый редактор для программирования, который работает молниеносно, и вы не против переключиться на другие окна для проверки кода, отладки и развертывания, тогда не ищите ничего, кроме Sublime Text.

Помимо скорости, многие заслуживающие внимания сильные стороны Sublime Text включают поддержку более 70 типов файлов, в том числе JavaScript, HTML и CSS; практически мгновенная навигация и мгновенное переключение проектов; множественный выбор (внесите сразу несколько изменений), включая выбор столбцов (выделите прямоугольную область файла); несколько окон (используйте все ваши мониторы) и разделенные окна (используйте пространство экрана); полная настройка с помощью простых файлов JSON; API плагинов на основе Python; и единая палитра команд с возможностью поиска.

Для программистов, пришедших из других редакторов, Sublime Text поддерживает пакеты TextMate (за исключением команд) и эмуляцию Vi / Vim. Неофициальная документация по Sublime Text содержит пренебрежительные (и неправильные) замечания о пользователях Emacs ( например, moi ), но я их пропущу. Почему вообще существует неофициальная документация по Sublime Text? Ну, во-первых, официальная документация неполна - гораздо меньше.

Когда я раньше сказал «почти мгновенная навигация», я имел в виду именно это. Например, чтобы перейти от текущего местоположения на экране к определению getResponseHeaderв ajax.js, я могу набрать Command-P на Mac или Ctrl-P на ПК, затем ajоткрыть временное представление в ajax.js, затем @grhи Enter, чтобы открыть вкладку с getResponseHeaderвыбранным. Sublime Text не отстает от моего набора текста. Он чувствует себя таким же отзывчивым, как некоторые из лучших старых редакторов DOS, такие как Brief и Kedit.

Выбрав  getResponseHeader, я могу найти все варианты использования функции в контексте, набрав Shift-Command-F на Mac или Shift-Ctrl-F на ПК, а затем Enter. Новая вкладка покажет мне результаты поиска с поисковым запросом, заключенным в каждый пятистрочный фрагмент. Двойной щелчок по тексту в рамке вызывает полный контекст файла в новой вкладке.

Щелчок по имени файла на левой боковой панели «Папки» вызывает переходную вкладку, показывающую содержимое файла. Щелчок по другому файлу заменяет эту вкладку. Здесь снова Sublime Text не отстает от моего набора текста и нажатия. Точно так же навигация уменьшенного размера в правом верхнем углу страницы позволяет мне перемещаться по файлу почти мгновенно, без накладных расходов на прокрутку. Я бы хотел, чтобы Microsoft Word был таким же отзывчивым.

Множественный выбор и выбор столбцов позволяют быстро избавиться от раздражающих изменений, которые раньше требовали регулярных выражений. Вам нужно превратить список слов в структуру JSON, где каждое слово заключено в двойные кавычки, а каждое процитированное слово отделяется от следующего запятой? В Sublime Text требуется около восьми нажатий клавиш, независимо от того, сколько слов у вас есть в списке.

В моем окне разработки для Windows я использую два широких монитора. На моем MacBook я использую дисплей Retina и дисплей Thunderbolt. Если я не редактирую на одном дисплее и не отлаживаю на другом, я обычно хочу одновременно видеть много разных исходных файлов и разные представления исходных файлов. Sublime Text поддерживает несколько окон, разделенных окон, несколько рабочих пространств для каждого проекта, несколько представлений и несколько панелей, содержащих представления. Довольно просто использовать всю площадь экрана, когда я хочу, и консолидировать, когда мне нужно освободить место для отладки и тестирования.

Вы можете настроить все в Sublime Text: цветовую схему, шрифт текста, глобальные привязки клавиш, позиции табуляции, привязки клавиш и фрагменты для конкретных файлов и даже правила выделения синтаксиса. Настройки кодируются как файлы JSON. Определения для конкретного языка представляют собой файлы настроек XML. Вокруг Sublime Text существует активное сообщество, которое создает и поддерживает пакеты и плагины Sublime Text. Многие функции, которые, как я изначально думал, отсутствуют в Sublime Text, в том числе интерфейсы JSLint и JSHint, поддержка JsFormat, JsMinify, PrettyJSON и Git, оказались доступными через сообщество с помощью установщика пакетов.

Одна из причин высокой производительности Sublime Text заключается в том, что он жестко запрограммирован. Другая причина в том, что Sublime Text не является IDE и не требует накладных расходов на бухгалтерский учет в IDE.

С точки зрения разработчика, это непростой компромисс. Если вы находитесь в жестком цикле разработки, основанного на тестировании, «красный, зеленый, рефакторинг», то среда IDE, настроенная для редактирования, тестирования, рефакторинга и отслеживания покрытия кода, поможет вам больше всего. С другой стороны, если вы проводите рецензирование кода или серьезное редактирование, вам понадобится самый быстрый и эффективный редактор, который вы можете найти. Этим редактором вполне может быть Sublime Text.

Стоимость: Неограниченная бесплатная пробная версия; 70 долларов США за пользователя для деловой или личной лицензии. Платформы: Windows, MacOS и Linux.

Код Visual Studio

Visual Studio Code - это бесплатный легкий редактор и IDE от Microsoft. В него входят компоненты Visual Studio, смешанные с оболочкой Atom Electron с открытым исходным кодом, что обеспечивает отличную поддержку разработки ASP.Net Core на C # и разработки Node.js с помощью TypeScript и JavaScript. В отличие от исторической модели Microsoft, предусматривающей поддержку только Visual Studio в Windows, Visual Studio Code также работает в MacOS и Linux. Снимок экрана ниже был сделан на MacOS.

Visual Studio Code имеет удивительно хорошее автозавершение кода JavaScript благодаря включению компилятора TypeScript и движка Salsa. Visual Studio Code отправляет код JavaScript компилятору TypeScript в фоновом режиме для определения типов и построения таблицы символов. Вы можете увидеть результаты в поле в нижней части изображения экрана, которое показывает информацию о  hasOwnProperty методе.

Одна и та же таблица символов позволяет IntelliSense предоставлять вам великолепные всплывающие списки параметров для завершения кода на протяжении всего набора выражения. Вы получаете автоматическое закрытие круглых скобок, параметры автоматического завершения слов, автоматические списки методов после ввода .и автоматические списки параметров внутри метода. Вы можете улучшить IntelliSense, добавив ссылки на файлы d.ts из  DefinitelyTyped, и Visual Studio Code предложит сделать это за вас, когда обнаружит типичные проблемы, такие как использование  __dirnameвстроенной переменной Node.js.

Поддержка Git очень хороша и довольно проста в использовании. Отладчик Visual Studio Code обеспечивает отличные возможности отладки для разработки Node.js (и разработки ASP.Net). Visual Studio Code имеет очень хороший инструментарий для HTML, CSS, Less, Sass и JSON, который основан на той же технологии, что и инструменты разработчика Internet Explorer F12. Кроме того, он имеет настраиваемую интеграцию с внешними средствами запуска задач, такими как  gulp и  jake.

Visual Studio Code привлек обширную экосистему плагинов, например, для поддержки Angular и React. Теперь это редактор, который я рекомендую, когда пишу учебники по созданию приложений с помощью фреймворков и библиотек JavaScript и TypeScript.

Стоимость: бесплатный открытый исходный код. Платформа: Windows, MacOS и Linux.

Скобки

Brackets - это бесплатный редактор с открытым исходным кодом, изначально созданный Adobe, созданный для обеспечения лучшего инструментария для JavaScript, HTML и CSS, а также связанных с ними открытых веб-технологий. Сами скобки написаны на JavaScript, HTML и CSS, и разработчики используют скобки для создания скобок. Помимо встроенных возможностей, Brackets имеет диспетчер расширений, а расширения доступны для многих языков и инструментов, которые используют разработчики интерфейса. Brackets не так быстр, как Sublime Text или TextMate, но все же довольно быстро, за исключением пауз для загрузки или обновления содержимого программы из Интернета.

Brackets хорошо поддерживает JavaScript, CSS, HTML и Node.js. Он также имеет приятные функции, такие как встроенное редактирование CSS, связанного с идентификатором HTML (быстрое редактирование). Кроме того, Brackets имеет чистый пользовательский интерфейс и предварительный просмотр веб-страниц, которые вы редактируете. Это очень хороший выбор для бесплатного редактора кода.

Автозаполнение JavaScript в скобках очень хорошее, с автоматическим закрытием круглых скобок, угловых скобок и квадратных скобок, а также автоматические раскрывающиеся меню для ключевых слов, переменных и методов, включая методы jQuery после ввода $. Скобки могут управлять отладчиком Node.js и перезапускать Node из пункта меню. Легко добавлять расширения для дополнительных функций, таких как поддержка TypeScript и JSX, интеграция с Bower и интеграция с Git.

Quick Edit, Quick Docs, Quick Open и Live Preview - все это помогает упростить редактирование веб-приложений и позволяет вам сосредоточиться на том, что вы кодируете или разрабатываете. С другой стороны, некоторые расширения Brackets может быть сложно настроить, но не так сложно, как пакеты Emacs или плагины Vim.

Стоимость: бесплатный открытый исходный код. Платформы: Windows, MacOS, Linux. 

Атом

Atom - это бесплатный редактор программирования с открытым исходным кодом, который можно взломать, от GitHub для Windows, MacOS и Linux, который интегрируется с приложением GitHub и имеет тысячи доступных пакетов и тем. Я обхожусь с несколькими пакетами сообщества, а также с основными пакетами и темами.

Неудивительно, что исходный код Atom размещен на GitHub. Он написан на CoffeeScript и интегрирован с Node.js. Atom - это специализированный вариант Chromium, предназначенный для работы в качестве текстового редактора, а не веб-браузера; каждое окно Atom - это, по сути, локально отображаемая веб-страница. Команда Atom разрабатывает Atom в Atom.

Производительность Atom довольно хороша, когда он не обновляется. Он полностью готов из коробки, с нечетким поиском, быстрым поиском и заменой в масштабе проекта, несколькими курсорами и выделениями, несколькими панелями, фрагментами, сворачиванием кода и возможностью импорта грамматик и тем TextMate. Atom может установить две утилиты командной строки: Atom для запуска редактора из оболочки и APM для управления пакетами Atom в духе NPM для Node.js. Я часто использую Atom при просмотре репозиториев, клонированных из GitHub, потому что приложение GitHub включает для этого пункт контекстного меню.

Стоимость: бесплатный открытый исходный код. Платформы: Windows, MacOS, Linux.

Комодо Править

Komodo Edit, бесплатная версия Komodo IDE для ActiveState с ограниченной функциональностью, представляет собой довольно хороший многоязычный редактор. Все, что я сказал о Komodo IDE как редакторе (см. «Обзор: 6 лучших JavaScript IDE»), относится и к Komodo Edit.