Война текстовых редакторов: редактор кода vs IDE

Александра Шинкевич (@neesoglasnaja)

Кто я?

Глава отдела фронтенда, LOVATA
Full-stack Node.js разработчик
Пользователь Sublime Text 6+ лет

Оценки, приведенные в докладе, во многом субъективны.

Автор работает с определенным набором технологий, и обращает внимание на моменты, которые могуть быть незначительны для кого-то другого

Данный доклад не охватывает особенности программирования в языках, которые не относятся ко фронтенду (почти)

Редактор кода

Редактирование кода
Подсветка синтаксиса
Проверка синтаксиса
Форматирование
Автодополнение
Контекстная помощь по коду

IDE

Редактор кода

+

«Умная» работа с синтаксисом
Средства автоматизации
Отладчик

Я допускаю некоторую небрежность в именовании, называя «текстовый редактор», «редактор кода», «редактор исходного кода» и «IDE» общим словом «редактор»

Технологии фронтенда

НЕТ
(или да, если вы живете в 2008)

Эксперимент

4 редактора
Использование «в бою» минимум неделю
Разные по величине и технологиям проекты
Сравнить возможности
«Синтетические» тесты производительности

Sublime Text	Atom	VS Code	WebStorm
2008	2014	2015	2010
Очень редко	~1-3/мес	~3/мес	~1.5/мес
Python	Electron	Electron	Java
Английский	Английский	Мультиязычный	Английский
Proprietary	Open Source	Open Source	Proprietary
Условно-бесплатный	Бесплатный	Бесплатный	Платный

Что общего

Мультиплатформенность
Поддерживают HTML/CSS/JS «из коробки»
Имеют системы плагинов
Хорошо кастомизируются:
горячие клавиши, внешний вид, настройки

Отброчный тур: все против всех

Sublime Text 3

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

Всего лишь «блокнот»
Нет встроенного менеджера пакетов
Условно-бесплатный

Atom
==
Sublime Text 3

Atom

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

Всего лишь блокнот
Нет встроенного менеджера пакетов → Есть
Условно-бесплатный → Бесплатный
Проблемы с производительностью

Visual Studio Code

Подойдет под проекты практически любой сложности;
для некоторых технологий есть много встроенных бонусов
Встроенная отладка Node.js, терминал и git
Поддержка IntelliSence
По ощущениям более производительный, чем Atom

Многие функции только через плагины
Все еще есть баги → Очень много фиксов к каждом релизе

WebStorm

Может (почти) все «из коробки»
А что не может, есть еще доп. плагины
Быстрый производительный поиск по большим проектам

Интерфейс кажется слишком сложным
Для простых проектов кажется overhead
Проблемы производительности на не очень мощных компьютерах
Цена

Visual Studio Code vs WebStorm

Запуск и производительность

	VS Code	WebStorm
Первый запуск	~15s	~40s
Базовый проект	~15s	~40s
C зависимостями (~6000 файлов)	~10s / ~8s	~60s / ~40s
Мультиязычный (~22 000 файлов)	~5s	~7min / ~45s
Поиск	~10s	~0s
Открытие файла извне	~6s	~40s
	+

Базовый проект

	VS Code	WebStorm
HTML	+	+
CSS	+	+
JS	+	+
Emmet	+	нет HTML
Formatter	нет CSS	+
	++	+

Разметка

	VS Code	WebStorm
Pug/Jade	+	+
Pug/Jade автокомплит	+	-
Markdown синтаксис	+	Просит плагин
	+++	+

Препроцессоры

	VS Code	WebStorm
SASS	+	+
Less	+	+
Stylus	-	+
Форматирование	-	+
	+++	++

Angular

	VS Code	WebStorm
Angular (TypeScript)	+	+
Автоимпорт	+	+
Переход по компонентам	+	+
	++++	+++

React

	VS Code	WebStorm
JSX	+	+
Автоимпорт	+	+
Переход по компонентам	+	+
	+++++	++++

Vue

	VS Code	WebStorm
.vue	Просит плагин	+
Автоимпорт	+	+
Переход по компонентам	+	+
	+++++	+++++

Линтинг

	VS Code	WebStorm
Stylelint	Есть плагин	+
ESLint	Есть плагин	+
TSLint	Есть плагин	+
.editorconfig	+	+
	+++++	++++++

Терминал, таски, дебаггинг

	VS Code	WebStorm
Интеграция с консолью	+	+
Просит установить зависимости	-	+
Таск-раннер	+	+
Инструменты для дебага	+	+
Live Share	+	Есть плагин
	++++++	+++++++

Git

	VS Code	WebStorm
Базовая интеграция	+	+
Diff	+	+
Проверка Git в системе	+	+
	+++++++	++++++++

Разное

	VS Code	WebStorm
Цена	+	-
Работа редактора без багов	-	+
Правописание	Есть плагин	+
Простота интерфейса	+	-
Частота обновления	+	-
	++++++++ / 8	++++++++ / 8

А если по-другому считать?

	VS Code	WebStorm
Абсолютные значения	++++++++++ ++++++++++ ++++++++++ ++++++++++ ++ / 32	++++++++++ ++++++++++ ++++++++++ ++++++++++ / 30

Редакторы кода в браузере

Как выйти из Vim

Выводы

Каждый из редакторов хорош для своих задач
Для написания HTML/CSS/JS не должен быть нужен
ни один из современных редакторов кода
Отбросьте предрассудки в выборе инструментов
Не бойтесь пробовать новое и искать лучшее

Ссылки на тему

Вопросы?

bit.ly/wsd-editors
Александра Шинкевич (@neesoglasnaja)