Какую IDE выбрать frontend-разработчику: VS Code, WebStorm или Sublime Text

24 декабря 2020

Академия разработки MediaSoft

/* Статья обновлена 7 апреля 2022 */

 

IDE (Integrated Development Environment) — это интегрированная, единая среда разработки, которая используется разработчиками для создания различного программного обеспечения.

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

Поэтому перед начинающими разработчиками встает вопрос: какой редактор выбрать? В этой части материала мы расскажем про редакторы, которыми пользуются frontend-разработчики MediaSoft.

Другие статьи серии: «Какую IDE выбрать — backend» и «Какую IDE выбрать — mobile».

VISUAL STUDIO CODE

Даниил, JS-разработчик

Почему именно эта IDE

VS Code — это редактор кода с необходимыми возможностями для разработки web-приложений. IDE разрабатывается и поддерживается компанией Microsoft и пользуется большой популярностью среди web-разработчиков из-за своей простоты, возможностей по расширению функционала и кастомизации.

Основные факторы, которые повлияли на мой выбор:

  • Простота. Благодаря своей расширяемой архитектуре VS Code может конкурировать с другими более продвинутыми IDE, при этом оставаясь компактной и удобной средой разработки. Также обладает хорошей производительностью и быстро запускается;
  • Встроенная интеграция с Git, которая автоматически подцепляет конфигурацию вашего проекта и позволяет работать с системой контроля версий через удобный графический интерфейс без ввода команд в терминале. Есть возможность сравнивать изменения в файлах, просматривать историю и т.д.;
  • Большая библиотека плагинов для расширения функционала и кастомизации: продвинутая отладка, форматирование кода, поддержка языков программирования, множество тем оформления интерфейса;
  • Возможность синхронизации настроек среды для работы на другом компьютере.

Минусы

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

Альтернативы

В качестве альтернативы рассматривал WebStorm. Этот редактор обладает более продвинутыми возможностями для анализа кода, рефакторинга и отладки и подходит для разработки с более сложным окружением.

Советы

При разработке очень помогают:

  • Git Lens — расширение для визуализации кода в Git;
  • ESLint — линтер для JS, который выявляет проблемные места в коде;
  • Prettier — расширение для автоматического форматирования кода;
  • ES7 React / Redux / GraphQL / React-Native snippets — набор сниппетов. При вводе ключевых слов создают фрагменты кода, которые часто используются при разработке;

  • VS Code Great Icons — 100+ иконок для файлов, которые отображаются в панели проводника.

Сергей, JS-разработчик

Почему именно эта IDE

В работе пользуюсь VS Code. Эта IDE становится всё более популярной, комьюнити растет, что дает хорошую техническую поддержку, развитие программы и появление новых полезных плагинов. При выборе IDE больше всего обращал внимание на удобство использования, возможность расширения функционала и общего ощущения от работы. 

VS Code можно легко и быстро установить на любой ОС из-за его компактности и легкости. А еще в нем удобное и наглядное дерево файлов.

Минусы

Не весь функционал, который нужен для frontend-разработки, идет «из коробки», например, функция форматирование кода. Это создает сложности для начинающих разработчиков, так как IDE необходимо настраивать вручную.

Альтернативы

Для frontend-разработки основной выбор — это Atom, Sublime Text, Brackets и VS Code. У каждого есть сильные и слабые стороны, но в целом отличия не такие критичные. 

Sublime Text лучше всего работает с большими объемами текста, в отличие, например, от Atom, в котором объемные файлы могут загружаться более 10-20 секунд и при просмотре нещадно лагать. Во всех остальных редакторах, включая VS Code, файлы обрабатываются довольно быстро.

Советы

Изучите горячие клавиши редактора, они очень хорошо ускоряет разработку — вот удобный список. Полный список сокращений можно также посмотреть в самом IDE: «Код» -> «Настройки» -> «Сочетания клавиш» («File» -> «Preferences» -> «Keyboard Shortcuts»).

WEBSTORM

Ксения, верстальщик

Почему именно эта IDE

В работе пользуюсь WebStorm от JetBrains. По началу интерфейс казался довольно сложным, но освоилась быстро. За счёт своей функциональности IDE покрывает большинство потребностей в разработке простых и довольно объёмных проектов.

При выборе IDE для меня были важны параметры:

  • Встроенный терминал;
  • Автодополнение (HTML, JS, LESS / Sass);
  • Проверка кода на ошибки (ESLint, Stylelint);
  • Поддержка систем контроля версий.

 

Парочка фишек WebStorm:

  • Удобная навигация по коду, которая сильно экономит время. Например, достаточно нажать Ctrl+Click, чтобы перейти к определению любого метода, функции или переменной;
  • Локальная история изменений. Поможет вернуть ту часть кода, которая не успела попасть под историю изменений VCS. Такие случаи бывают, даже если на проекте используется система контроля версий;
  • Индивидуальная настройка рабочей среды — темы, сочетания клавиш, расположение элементов;
  • Автоматическое заданное форматирование. Помогает соблюдать единый стиль кода.

Минусы

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

Альтернативы

Для простых задач периодически возвращаюсь к текстовому редактору Atom — подходит для небольших проектов без сборщиков и всяких дополнительных инструментов для разработки. Он подойдет для новичков, в то время как WebStorm я бы рекомендовала для более опытных разработчиков.

Советы

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

На этом сайте можно ознакомиться с самой IDE. И рекомендую изучить горячие клавиши.

SUBLIME TEXT

Максим, верстальщик

Почему именно эта IDE

Работаю в Sublime Text — он довольно быстрый, легко настраивается под себя, нравится визуально и подходит под мои задачи (верстка и написание JS-кода). При выборе редактора обращал внимание на то, какими возможностями он обладает по настройке, насколько удобен в работе и можно ли ставить плагины. 

Минусы

Главный минус в том, что в редакторе не все идет «из коробки», так что в начале работы приходится ставить много плагинов (например, AutoFileName, ColorHighliter, Emmet и TerminalView).

Альтернативы

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

Советы

Первое, что надо поставить, — это пакетный менеджер Package Control, а дальше настроить редактор под свои задачи. Еще рекомендую зайти на Habr, там есть много материала по настройке.

Антон, верстальщик

Почему именно эта IDE

При выборе IDE больше всего обращал внимание на легковесность и пользовательский интерфейс. Для верстки не требуется большого объема функционала, так что устанавливать что-то сложное и прожорливое не видел смысла.

Остановился на Sublime Text — это легкий удобный редактор с большим количеством плагинов, которые облегчают работу и ускоряют процесс написания кода.

Минусы

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

Альтернативы

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

Советы

Из полезных плагинов:

  • Emmet — добавляет возможность создания большого количества блоков с помощью написания короткой команды и нажатия на кнопку Tab;
  • AutoFileName — добавляет подсказки при заполнении пути к файлам;
  • ColorHighliter — подсвечивает коды цветов.

Кроме этих есть огромное множество других, начиная от плагинов для подсветки синтаксиса Pug, SCSS и заканчивая плагинами для работы с Git.

Рекомендую изучить гайд для начинающих — в нем описывают процесс установки.

В ИТОГЕ

Если вы: 

  • JS-разработчик, для работы рекомендуем использовать VS Code. Из альтернатив посмотрите Atom, Sublime Text, Brackets.
  • JS-разработчик и ищите IDE для работы со сложным окружением, используйте WebStorm. Альтернатива — тот же VS Code.
  • Верстальщик, рассмотрите редактор Sublime Text. 

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

Хорошей работы и учебы и до встречи!