Как выбрать редактор кода для JavaScript

2
5341
views
frontend logo

Хочешь проверить свои знания по фронтенду?

Подпишись на наш канал с тестами по HTML/CSS/JS в Telegram!

×

Перевод статьи «How to choose an editor for JavaScript».

Как выбрать редактор кода для JavaScript

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

Текстовый редактор это программа, которая помогает вам писать простой текст (без какого-либо форматирования) и сохранять его в файл. Хорошим примером является редактор Notepad в Windows.

Notepad

Начав свое путешествие в мир программирования, вы быстро поймете, что именно в текстовом редакторе вы будете проводить большую часть времени, поскольку написание и редактирование исходного кода это основное занятие любого программиста. Вот почему важно выбрать редактор, который подойдет вам лучше всего и послужит вам поддержкой в учебном процессе.

Не все текстовые редакторы хорошо подходят для программирования. Тот же Notepad ничем не облегчает и не автоматизирует процесс редактирования кода.

Есть текстовые редакторы, созданные специально для написания и редактирования исходного кода. Их называют редакторами кода. Редактор кода может быть отдельной программой или встроенным в Интегрированную среду разработки (IDE).

Также есть редакторы кода в браузере. Яркими примерами являются CodePen, Web Maker и Plunker. Возможно, вы уже знакомы с некоторыми из этих онлайн-редакторов, поскольку их использование рекомендуется многими ресурсами оналйн-обучения, например, freeCodeCamp.

Тем не менее, если вы хотите подняться на новый уровень в программировании, вам нужно подумать о десктопной версии редактора, которая бы превосходила по функционалу уровень большинства онлайн-инструментов.

Глядя на обилие вариантов редакторов легко растеряться. Спросите пять человек и скорее всего получите пять разных ответов.

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

Цель этой статьи – помочь вам решить, какой редактор использовать для изучения программирования, причем особый упор сделан на программирование на JavaScript.

Что должно быть в редакторе кода

Писать текст и сохранять его в файл можно в любом редакторе кода. Во всем остальном вид редактора, который вы выбираете, зависит только от ваших личных предпочтений. Но есть несколько вещей, которые должны быть в вашем редакторе, чтобы он считался подходящим для разработки на JavaScript.

Подсветка синтаксиса

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

Вот, к примеру, отрывок кода без подсветки синтаксиса:

Код без подсветки синтаксиса

и тот же отрывок с подсветкой:

Код с подсветкой синтаксиса

Автодополнение

Функция автодополнения кода предлагается многими редакторами. Она помогает ускорить процесс редактирования и уменьшить количество опечаток путем дополнения имен переменных, ключевых слов, классов и методов в рамках вашей программы.

Если вы новичок в программировании, я рекомендую отключить автодополнение в вашем редакторе и вместо этого печатать все вручную: так вы гораздо быстрее запомните синтаксис.

Но как только вы освоитесь со всеми основными ключевыми словами и встроенными методами, собственноручный набор всего текста уже не будет иметь такого значения. На этом этапе автодополнение становится бесценным.

Поддержка ES2015+ наряду с популярными фреймворками и библиотеками

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


Имея все это в виду, давайте рассмотрим несколько вариантов, которые вы можете использовать в начале изучения веб-разработки в целом и JavaScript в частности.

Чтобы облегчить выбор какого-нибудь одного, я построил их начиная с самого рекомендуемого и до наименее рекомендуемого. Такой «рейтинг» является чисто субъективным, поэтому я советую вам попробовать каждый и сделать собственные выводы.

Все перечисленные редакторы являются кросс-платформенными, то есть, подходят для Windows, macOS и Linux, так что вам не стоит беспокоиться о совместимости с вашей любимой операционной системой.

Visual Studio Code – бесплатный

Visual Studio Code (не путайте с Visual Studio) на данный момент является лучшим текстовым редактором для JavaScript-разработчиков. По сравнению с другими популярными редакторами он относительно молод. Будучи выпущенным в 2015 г., со временем он настолько стремительно усовершенствовался, что попал в списки самых популярных текстовых редакторов по мнению веб-разработчиков в последнем опросе Stack Overflow.

VS Code это нечто большее, чем просто базовый текстовый редактор. Кто-то говорит, что это скорее IDE, чем текстовый редактор, поскольку предоставляет много свойств, которые вы обычно можете найти в IDE. Некоторыми из основных таких свойств являются встроенные инструменты отладки, умное дополнение кода (IntelliSense), встроенный терминал и собственная поддержка многих распространенных операций Git. Вам как новичку этот функционал позволит произвести работающий код намного быстрее.

Настраиваемость это еще одна сфера, где VS Code показывает себя во всей красе. Он поддерживает тысячи плагинов и тем, которые вы можете установить для еще большего расширения его способностей.

Sublime Text 3 – $80

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

Хотя он и поддерживает JavaScript из коробки, по сравнению с VS Code этот функционал отстает. Вы можете его расширить с помощью плагинов. Sublime Text 3 также очень быстр и не занимает много памяти – вот почему я советую его людям, чьи компьютеры имеют RAM меньше 4GB.

Хотя Sublime стоит дорого – $80 за простую пользовательскую лицензию, его можно скачать и испытать бесплатно. Вы просто будете время от времени получать всплывающие окна, напоминающие купить лицензию для дальнейшего использования.

Atom – бесплатный

GitHub представил Atom в 2014 году в качестве бесплатной альтернативы платным инструментам вроде Sublime Text и Text Mate. Хотя он получил горячих сторонников, он так и не достиг уровня популярности Sublime, а теперь его обгоняет VS Code, выпущенный на год позже.

Это не значит, что Atom плохой текстовый редактор, вовсе нет. Он доступен для новичков и не требует какой-либо настройки для начала работы. Как и VS Code, он расширяется с помощью плагинов и поддерживает многие свойства, характерные для IDE, которые могут увеличить вашу скорость и эффективность при написании кода.

Vim – бесплатный

После разнообразных опытов с другими редакторами кода я остановился на Vim и в данное время пользуюсь именно этим редактором. Но хотя я сам пользуюсь и люблю Vim, я бы не рекомендовал его людям, только начинающим изучать программирование, потому что у него совершенно другой подход к редактированию текста по сравнению с другими популярными редакторами кода. Это означает, что вам придется потратить время на изучение того, как он работает, а это может отвлечь вас от изучения собственно программирования.

Текстовый редактор кода vim

Если вы заняты изучением программирования, лучше использовать уже знакомый вам интерфейс, чтобы сохранять сосредоточенность на написании кода. Кроме того, Vim не имеет многих прекрасных свойств, которые по умолчанию присутствуют в редакторах вроде VS Code или Atom. И хотя ему можно добавить функционала с помощью плагинов, этот процесс немного сложен.

Если вы уже достигли разумного уровня компетентности в изучаемом языке и вам интересно попробовать Vim, вы можете взять пример с Йехуды Катца, который смог перейти на Vim без потери продуктивности.

WebStorm – $129/год

WebStorm это еще один интересный вариант, на который многие разработчики JavaScript буквально молятся, хотя это полноценная IDE, а не просто текстовый редактор. Это также самый дорогой вариант из тех, что я знаю, но если вы студент, то можете получить его бесплатно наряду с другими продуктами JetBrains.

У меня нет личного опыта с WebStorm, но большинство рецензентов хвалят его глубокую поддержку JavaScript и его экосистему, чего и стоит ожидать от сложной IDE. С другой стороны, у него более крутая кривая обучения, чем у текстовых редакторов, и множество функций, которые вам как новичку не нужны.

Я думаю, что WebStorm может стать отличным инструментом для изучения, когда у вас будет немного больше опыта, но я не вижу причин начинать с него.

Неправильного выбора нет

Что бы вы ни выбрали из этих редакторов, вы не прогадаете. Все они создают хорошую среду для написания кода на JavaScript, так что не будет никаких проблем, если вы склонитесь не к фавориту, а к какому-нибудь другому варианту.

Единственное, я хочу предостеречь против слишком больших трат времени на изучение сложных инструментов вроде Vim или WebStorm. Если вы новичок, вам стоит сосредоточиться на самом программировании, потому я и отвел высшие места в своей рейтинге Visual Studio Code, Sublime Text и Atom как инструментам, дружественным к новичкам. Я советую вам попробовать все три и выбрать тот, который будет наиболее удобен для вас.



2 КОММЕНТАРИИ

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here