Настройка Sublime Text
Инструкция рассчитана на пользователей Sublime Text 3.
Автор рекомендует использовать Sublime Text из-за малого размера и достойного быстродействия. Если у вас уже есть любимый редактор, используйте его.
Sublime Text позволяет работать со множеством дополнительных модулей, сохраняя при этом свое быстродействие. Об этих модулях и пойдет речь. В данном разделе описан процесс установки необходимых модулей, которые могут значительно ускорить и упростить процесс разработки.
Содержание:
- Package Control (обязательный шаг)
- Подсветка синтаксиса
- Линтер
- Интеграция с Git
Package Control
Package Control — это установщик модулей. По умолчанию его нет, его нужно установить.
Нажмите Ctrl + P. Появится среда исполнения команд Sublime Text. Нужно начать набирать ’package control’, после чего нажать Enter:
После установки Package Control, у нас появится возможность устанавливать пакеты:
Подсветка синтаксиса
Sublime Text поддерживает подсветку синтаксиса различных языков программирования и разметки. По умолчанию поддерживаются очень многие языки, однако ни Handlebars, ни SCSS не поддерживаются. Пакеты для них нужно установить.
Handlebars
После установки подсветки можно открыть любой из файлов .hbs, чтобы увидеть, что синтаксис языка теперь подсвечивается, а в правом нижнем углу отображается надпись ’Handlebars’:
SCSS
Аналогично устанавливаем подсветку SCSS:
Линтер
По умолчанию, линтер Baumeister настроен довольно агрессивно: в «неположенных местах» запрещены пустые строки, вложенность отступов требуется соблюдать крайне строго. Любая ошибка линтинга останавливает процесс живой перезагрузки или сборки, поэтому ошибок лучше избегать сразу.
К счастью, Sublime Text поддерживает интеграцию с линтерами SCSS- и JavaScript-кода. Установка линтера прямо в Sublime Text позволит выявить ошибки еще на этапе написания кода, а не на этапе сборки.
Sublimelint
Sublimelint — среда для работы всевозможных линтеров. Мы будем использовать его, чтобы работать с линтерами SCSS и JavaScript. Установим Sublimelint:
Линтер SCSS (Stylelint)
Для работы Stylelint, нужно установить некоторые пакеты в Node.
npm i -g postcss stylelint
После чего можно установить сам линтер:
Теперь нужно настроить Sublimelint. Мы хотим, чтобы ошибки отображались сразу же как только мы набрали ошибочный код. Для этого нужно зайти в Tools -> SublimeLinter -> Lint mode и выбрать Background.
Теперь ошибки в коде будут видны еще до сохранения:
Линтер JavaScript (eslint)
Аналогично устанавливаем Eslint:
npm i -g eslint
Ошибки в JavaScript будут видны сразу же:
Интеграция с Git
При работе в режиме живой перезагрузки, консоль оказывается занята, и чтобы сохранить изменения в системе контроля версий (сделать коммит), придется открыть новую консоль.
Мы пойдем другим путём. Можно установить в Sublime Text особый пакет, упрощающий работу с Git. С ним можно будет сохранять изменения прямо из Sublime Text, не переключаясь в консоль и обратно.
После установки, можно будет выполнять команды Git прямо в Sublime Text:
Добавление файлов к коммиту (git add)
Это действие обязательно нужно сделать перед коммитом.
Сохранение изменений (git commit)
После выполнения этой команды, откроется окно, в которое нужно будет ввести сообщение коммита. После этого, нужно просто закрыть его, кликнув на крестик или нажав Ctrl + W. После закрытия, коммит будет создан.
Отправка изменений на сервер (git push)
Не забывайте отправлять изменения на сервер в конце работы.