Редакторы и инструменты

Писать JavaScript можно хоть в «Блокноте» — языку всё равно. Но хороший редактор подсвечивает синтаксис, подсказывает имена переменных, ловит опечатки на лету и запускает код, не выходя из окна. Разница — как между бумажной салфеткой и нормальным рабочим столом.

Выбор по умолчанию — VS Code: бесплатный, быстрый, с огромным каталогом расширений почти под любую задачу. Скачайте его с официального сайта code.visualstudio.com — установка занимает пару минут.

Главная альтернатива — WebStorm от JetBrains. Это комбайн: всё, что в VS Code ставится расширениями, здесь работает из коробки. Для коммерческой работы он платный, но для личных проектов JetBrains раздаёт лицензию бесплатно. Если сомневаетесь — начните с VS Code: с ним вы точно ничего не потеряете.

Расширения — суперсила VS Code, и два из них нужны каждому: Prettier и ESLint. Ставятся в один клик: иконка с квадратиками на левой панели, поиск по имени, кнопка «Install».

Prettier — форматировщик. Он не проверяет, работает ли код, — он делает его опрятным: выравнивает отступы, расставляет пробелы, следит за кавычками и длиной строк. Взгляните на код, написанный второпях:

const price=100;const   discount=20;
console.log(price-discount);

Код рабочий, но читать его неприятно. Prettier одним движением превращает такую кашу в аккуратные строки — и так с каждым файлом, всегда по одним и тем же правилам. О форматировании можно просто перестать думать.

ESLint — анализатор. Он читает код и подчёркивает подозрительные места: переменная объявлена, но не используется; функция ничего не возвращает, хотя должна; условие всегда истинно. Это не запуск программы, а вычитка текста редактором — многие ошибки ESLint находит раньше, чем вы нажмёте «выполнить».

Prettier — про внешний вид, ESLint — про смысл

Настройки открываются сочетанием Ctrl+, (на Mac — Cmd+,). Их сотни, но на старте хватает двух-трёх. Самая полезная — форматирование при сохранении: нажали Ctrl+S — и Prettier сам причесал файл.

Автосохранение — вопрос вкуса: с files.autoSave файл записывается сам через секунду после правки. Все настройки хранятся и в графическом виде, и в файле settings.json — второй вариант удобно копировать на другой компьютер целиком.

В коде полно сочетаний, которых нет в обычном тексте: ===, =>, !==. Программистские шрифты умеют лигатуры — несколько символов рисуются одним цельным знаком: три чёрточки равенства сливаются в одну широкую, а => превращается в настоящую стрелку.

Популярная тройка: Fira Code — бесплатный и самый известный; JetBrains Mono — тоже бесплатный, родной шрифт WebStorm; Victor Mono — с узнаваемым курсивом, похожим на рукописный. Шрифт устанавливается в систему как обычный, а затем прописывается в настройках: editor.fontFamily — имя шрифта, editor.fontLigatures — true.

Важно: лигатура — только картинка. В файле по-прежнему лежат три отдельных символа, и JavaScript видит именно их; меняется лишь то, как шрифт их рисует. Вот код, где лигатурам есть где развернуться:

const isEqual = (a, b) => a === b;
console.log(isEqual(2, 2));
console.log(3 !== "3");
console.log(7 >= 5);

Тема меняет цвета всего редактора: фон, подсветку синтаксиса, панели. Несколько встроено сразу — тёмные и светлые, — а в каталоге расширений их тысячи. Быстрый переключатель — Ctrl+K Ctrl+T: листайте список стрелками и смотрите, как редактор перекрашивается на лету.

Выбор темы — чистая вкусовщина, и это нормально: на этот экран вы будете смотреть часами, пусть он радует. Кому-то нужен строгий тёмный минимализм, а кто-то ставит Synthwave x Fluoromachine — неоновую тему в эстетике восьмидесятых, где код светится розовым и бирюзовым, как вывеска в ночном городе. Единственный практический критерий — контраст: если глаза устают за полчаса, тема не ваша, какой бы красивой она ни была.