Преглед: 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 или скоби. Но няколко други инструмента - 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 поддръжка - се оказват достъпни чрез общността, използвайки Package Installer.

Една от причините за страхотното представяне на 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 предоставя отлично преживяване за отстраняване на грешки за разработка на 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 има мениджър на разширения и са налични разширения за много от езиците и инструментите, които използват разработчиците от предния край. Скобите не са толкова бързи като Sublime Text или TextMate, но все пак са доста бързи, с изключение на паузите за зареждане или актуализиране на програмното съдържание от мрежата.

Скобите имат добра поддръжка за JavaScript, CSS, HTML и Node.js. Той също така има хубави функции като редактиране на CSS в реда, свързано с HTML ID (Бързо редактиране). В допълнение, скобите разполагат с изчистен потребителски интерфейс и визуализация на живо за уеб страници, които редактирате. Това е много добър избор за безплатен редактор на код.

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

Бързо редактиране, Бързи документи, Бързо отваряне и Преглед на живо всички помагат за рационализиране на редактирането на уеб приложения и ви позволяват да се фокусирате върху това, което кодирате или проектирате. Недостатъкът е, че някои разширения за скоби могат да бъдат трудни за конфигуриране, но не толкова сложни като пакетите 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 Edit, безплатната версия на Komodo IDE на ActiveState с намалена функционалност, е доста добър многоезичен редактор. Всичко, което имах да кажа за Komodo IDE като редактор (вижте „Преглед: 6-те най-добри IDE на JavaScript“), се отнася за Komodo Edit.