Recenzja: 10 najlepszych edytorów JavaScript

Programiści JavaScript mają do wyboru wiele dobrych narzędzi - prawie zbyt wiele, aby je śledzić. W tym artykule omówię 10 edytorów tekstu z dobrą obsługą programowania w JavaScript, HTML5 i CSS oraz dokumentowania za pomocą Markdown. Po co używać edytora do programowania JavaScript zamiast IDE? Jednym słowem: prędkość.

Zasadnicza różnica między edytorami a IDE polega na tym, że środowiska IDE mogą debugować i czasami profilować kod, a środowiska IDE obsługują systemy zarządzania cyklem życia aplikacji (ALM). Wielu redaktorów, o których tu mówimy, obsługuje co najmniej jeden system kontroli wersji, często Git, więc kryterium to mniej odróżnia IDE od edytorów niż kiedyś.

Sublime Text i Visual Studio Code zajmują czołowe miejsca wśród edytorów JavaScript - Sublime Text ze względu na swoją szybkość i wygodne funkcje edycji oraz Visual Studio Code dla jeszcze lepszych funkcji i prawie równie dobrej szybkości. Wsporniki zajmują trzecie miejsce. Chociaż TextMate zajmowało wysokie miejsce na mojej liście kilka lat temu, jego możliwości nie nadążają za nowymi osiągnięciami.

Najprawdopodobniej znajdziesz wybrany edytor JavaScript w Sublime Text, Visual Studio Code lub Brackets. Ale kilka innych narzędzi - Atom, BBEdit, Komodo Edit, Notepad ++, Emacs i Vim - wszystkie mają coś do polecania. W zależności od wykonywanego zadania, może się okazać, że któryś z nich przyda się.

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.

Przejrzyjmy opcje i porównajmy je na końcu.

Wysublimowany tekst

Jeśli potrzebujesz elastycznego, wydajnego, rozszerzalnego edytora tekstu do programowania, który działa błyskawicznie i nie masz nic przeciwko przełączaniu się na inne okna w celu sprawdzania kodu, debugowania i wdrażania, nie szukaj dalej niż Sublime Text.

Oprócz szybkości, wiele godnych uwagi zalet Sublime Text obejmuje obsługę ponad 70 typów plików, w tym JavaScript, HTML i CSS; niemal natychmiastowa nawigacja i natychmiastowe przełączanie projektów; zaznaczenia wielokrotne (dokonaj wielu zmian jednocześnie), w tym wybory kolumnowe (zaznacz prostokątny obszar pliku); wiele okien (użyj wszystkich swoich monitorów) i podzielone okna (wykorzystaj przestrzeń ekranu); pełna personalizacja za pomocą prostych plików JSON; oparty na Pythonie interfejs API wtyczki; i ujednoliconą paletę poleceń z możliwością wyszukiwania.

Dla programistów pochodzących z innych edytorów, Sublime Text obsługuje pakiety TextMate (z wyłączeniem poleceń) i emulację Vi / Vim. Nieoficjalna dokumentacja Sublime Text zawiera dyskredytujące (i niepoprawne) uwagi na temat użytkowników Emacsa ( na przykład moi ), ale ja je przeoczę. Dlaczego w ogóle istnieje nieoficjalna dokumentacja Sublime Text? Cóż, po pierwsze, oficjalna dokumentacja jest mniej niż kompletna - znacznie mniej.

Kiedy powiedziałem wcześniej „prawie natychmiastowa nawigacja”, miałem to na myśli. Na przykład, aby przejść z bieżącej lokalizacji na ekranie do definicji getResponseHeaderw ajax.js, mogę wpisać Command-P na komputerze Mac lub Ctrl-P na komputerze PC, a następnie ajotworzyć przejściowy widok w ajax.js, a następnie @grhi Enter, aby otworzyć kartę z getResponseHeaderwybranymi. Sublime Text jest w stanie nadążyć za moim pisaniem. Czuje się tak samo responsywny, jak niektóre z najlepszych starych edytorów DOS, takich jak Brief i Kedit.

Po wybraniu  getResponseHeadermogę znaleźć wszystkie zastosowania funkcji w kontekście, wpisując Shift-Command-F na komputerze Mac lub Shift-Ctrl-F na komputerze PC, a następnie Enter. Nowa karta pokaże mi wyniki wyszukiwania z wyszukiwanym hasłem w każdym pięciowierszowym fragmencie. Dwukrotne kliknięcie tekstu w ramce powoduje wyświetlenie pełnego kontekstu pliku w nowej karcie.

Kliknięcie nazwy pliku na pasku bocznym Foldery po lewej stronie powoduje wyświetlenie przejściowej zakładki pokazującej zawartość pliku. Kliknięcie innego pliku zastępuje tę kartę. Tutaj znowu Sublime Text jest w stanie nadążyć za moim pisaniem i klikaniem. Podobnie, zmniejszona nawigacja w prawym górnym rogu strony pozwala mi niemal natychmiast poruszać się w obrębie pliku, bez konieczności przewijania. Chciałbym, żeby Microsoft Word był tak responsywny.

Wielokrotne zaznaczenia i zaznaczenia kolumn umożliwiają szybką pracę irytujących zmian, które wymagały wcześniej wyrażeń regularnych. Czy musisz przekształcić listę słów w strukturę JSON, w której każde słowo jest otoczone podwójnymi cudzysłowami, a każde słowo w cudzysłowie jest oddzielone od następnego przecinkiem? W Sublime Text potrzeba około ośmiu naciśnięć klawiszy, bez względu na to, ile słów masz na liście.

Na moim pudełku programistycznym Windows używam dwóch szerokich monitorów. Na moim MacBooku używam wyświetlacza Retina oraz wyświetlacza Thunderbolt. O ile nie edytuję na jednym ekranie, a debuguję na drugim, zwykle chcę widzieć jednocześnie wiele różnych plików źródłowych i różnych widoków w plikach źródłowych. Sublime Text obsługuje wiele okien, podzielone okna, wiele obszarów roboczych na projekt, wiele widoków i wiele okienek zawierających widoki. Dość łatwo jest korzystać z całej powierzchni ekranu, kiedy chcę, i konsolidować, gdy potrzebuję zrobić miejsce na debugowanie i testowanie.

Możesz dostosować wszystko, co dotyczy Sublime Text: schemat kolorów, czcionkę tekstu, globalne powiązania klawiszy, tabulatory, przypisania klawiszy i fragmenty specyficzne dla plików, a nawet reguły podświetlania składni. Preferencje są kodowane jako pliki JSON. Definicje specyficzne dla języka to pliki preferencji XML. Wokół Sublime Text istnieje aktywna społeczność, która tworzy i utrzymuje pakiety i wtyczki Sublime Text. Wiele funkcji, o których początkowo myślałem, że brakuje Sublime Text - w tym interfejsy JSLint i JSHint, obsługa JsFormat, JsMinify, PrettyJSON i Git - jest dostępnych przez społeczność za pomocą Instalatora pakietów.

Jednym z powodów doskonałej wydajności Sublime Text jest ścisłe zakodowanie. Innym powodem jest to, że Sublime Text nie jest IDE i nie wymaga narzutu księgowego IDE.

Z punktu widzenia programisty jest to trudny kompromis. Jeśli jesteś w ciasnej pętli programistycznej opartej na testach „czerwony, zielony, refaktoryzacja”, to IDE skonfigurowane do edycji, testowania, refaktoryzacji i śledzenia pokrycia kodu pomoże Ci najbardziej. Z drugiej strony, jeśli robisz recenzje kodu lub główne zmiany, potrzebujesz najszybszego i najbardziej wydajnego edytora, jaki możesz znaleźć. Tym edytorem może być Sublime Text.

Koszt: nieograniczony bezpłatny okres próbny; 70 USD na użytkownika w przypadku licencji biznesowej lub osobistej. Platformy: Windows, MacOS i Linux.

Visual Studio Code

Visual Studio Code to darmowy lekki edytor i IDE firmy Microsoft. Zawiera komponenty Visual Studio, zmieszane z otwartą powłoką Atom Electron, zapewniając doskonałe wsparcie dla programowania ASP.Net Core w C # oraz dla programowania Node.js z TypeScript i JavaScript. Zrywając z historycznym wzorcem firmy Microsoft dotyczącym obsługi tylko programu Visual Studio w systemie Windows, Visual Studio Code działa również w systemach MacOS i Linux. Poniższy zrzut ekranu został wykonany na MacOS.

Visual Studio Code ma zadziwiająco dobre uzupełnianie kodu JavaScript, dzięki włączeniu kompilatora TypeScript i silnika Salsa. Visual Studio Code wysyła kod JavaScript do kompilatora TypeScript w tle, aby wywnioskować typy i utworzyć tabelę symboli. Możesz zobaczyć wyniki w polu u dołu obrazu ekranu, który pokazuje informacje o  hasOwnProperty metodzie.

Ta sama tabela symboli umożliwia technologii IntelliSense zapewnianie doskonałych list opcji wyskakujących do uzupełniania kodu podczas wpisywania wyrażenia. Otrzymujesz automatyczne zamykanie nawiasów, opcje automatycznego uzupełniania słów, automatyczne listy metod po wpisaniu .i automatyczne listy parametrów w metodzie. Możesz ulepszyć technologię IntelliSense, dodając odwołania do plików d.ts z  DefinitelyTyped, a program Visual Studio Code zaoferuje to za Ciebie, gdy rozpozna typowe problemy, takie jak użycie  __dirnamezmiennej wbudowanej Node.js.

Obsługa Git jest bardzo dobra i dość prosta w użyciu. Debuger Visual Studio Code zapewnia doskonałe środowisko debugowania na potrzeby programowania Node.js (i programowania ASP.Net). Visual Studio Code ma bardzo dobre narzędzia dla HTML, CSS, Less, Sass i JSON, które jest oparte na tej samej technologii, która obsługuje narzędzia programistyczne Internet Explorer F12. Ponadto ma konfigurowalną integrację z zewnętrznymi programami do uruchamiania zadań, takimi jak  gulp i  jake.

Visual Studio Code przyciągnął solidny ekosystem wtyczek - na przykład do obsługi Angular i React. Jest to teraz edytor, który polecam, gdy piszę samouczki na temat tworzenia aplikacji za pomocą frameworków i bibliotek JavaScript i TypeScript.

Koszt: bezpłatne oprogramowanie typu open source. Platforma: Windows, MacOS i Linux.

Wsporniki

Brackets to darmowy edytor open source, pochodzący od Adobe, stworzony w celu zapewnienia lepszych narzędzi dla JavaScript, HTML i CSS, a także powiązanych otwartych technologii internetowych. Sam Brackets jest napisany w JavaScript, HTML i CSS, a programiści używają Brackets do tworzenia Brackets. Oprócz wbudowanych możliwości, Brackets ma menedżera rozszerzeń, a rozszerzenia są dostępne dla wielu języków i narzędzi używanych przez programistów front-end. Nawiasy nie są tak szybkie jak Sublime Text lub TextMate, ale nadal są dość szybkie, z wyjątkiem przerw w ładowaniu lub aktualizowaniu zawartości programu z sieci.

Nawiasy dobrze obsługują JavaScript, CSS, HTML i Node.js. Posiada również fajne funkcje, takie jak edycja bezpośrednia CSS związana z identyfikatorem HTML (szybka edycja). Ponadto Brackets oferuje przejrzysty interfejs użytkownika i podgląd na żywo edytowanych stron internetowych. To bardzo dobry wybór dla darmowego edytora kodu.

Autouzupełnianie JavaScript w nawiasach jest bardzo dobre, z automatycznym zamykaniem nawiasów, nawiasów ostrych i kwadratowych, a także automatycznie rozwijanymi menu dla słów kluczowych, zmiennych i metod, w tym metod jQuery po wpisaniu $. Nawiasy mogą kontrolować debuger Node.js i ponownie uruchamiać Node z pozycji menu. Łatwo jest dodać rozszerzenia dla dodatkowych funkcji, takich jak obsługa TypeScript i JSX, integracja Bower i integracja z Git.

Szybka edycja, Szybkie dokumenty, Szybkie otwieranie i Podgląd na żywo pomagają usprawnić edycję aplikacji internetowych i pozwalają skupić się na tym, co kodujesz lub projektujesz. Z drugiej strony, niektóre rozszerzenia Brackets mogą być trudne do skonfigurowania, ale nie tak skomplikowane jak pakiety Emacsa lub wtyczki Vima.

Koszt: bezpłatne oprogramowanie typu open source. Platformy: Windows, MacOS, Linux. 

Atom

Atom to darmowy, otwarty, hakowalny edytor programowania z GitHub dla systemów Windows, MacOS i Linux, który integruje się z aplikacją GitHub i ma tysiące dostępnych pakietów i motywów. Mam kilka pakietów społeczności, a także podstawowe pakiety i motywy.

Nic dziwnego, biorąc pod uwagę jego pochodzenie, źródło Atom jest hostowane na GitHub. Jest napisany w CoffeeScript i zintegrowany z Node.js. Atom to wyspecjalizowana odmiana Chromium, zaprojektowana jako edytor tekstu, a nie przeglądarka internetowa; każde okno Atom jest w zasadzie lokalnie renderowaną stroną internetową. Zespół Atom tworzy Atom w Atom.

Wydajność Atom jest całkiem dobra, gdy sam się nie aktualizuje. Jest w pełni funkcjonalny po wyjęciu z pudełka, z rozmytą wyszukiwarką, szybkim wyszukiwaniem i zamianą w całym projekcie, wieloma kursorami i zaznaczeniami, wieloma okienkami, fragmentami, składaniem kodu oraz możliwością importowania gramatyki i motywów TextMate. Atom może zainstalować dwa narzędzia wiersza poleceń: Atom do uruchamiania edytora z powłoki i APM do zarządzania pakietami Atom, w duchu NPM dla Node.js. Często używam Atom podczas przeglądania repozytoriów, które sklonowałem z GitHub, ponieważ aplikacja GitHub zawiera element menu kontekstowego do tego.

Koszt: bezpłatne oprogramowanie typu open source. Platformy: Windows, MacOS, Linux.

Komodo Edytuj

Komodo Edit, bezpłatna wersja Komodo IDE o zmniejszonej funkcjonalności ActiveState, to całkiem niezły edytor wielojęzyczny. Wszystko, co miałem do powiedzenia na temat Komodo IDE jako edytora (zobacz „Recenzja: 6 najlepszych IDE JavaScript”) odnosi się do Komodo Edit.