Блог начинающего фронтендера

Прокачиваем Sublime 3 для эффективной верстки

Быстро настраиваем Sublime text 3 для верстки.

Установка Package Control

Package Control - это менеджер дополнений, который позволяет легко и быстро установить необходимые плагины. Процесс установки:

  • копируем код со страницы Package Control. Внимательно выбираем код соответствующий версии Sublime;

  • заходим в Sublime;
  • нажимаем ctrl + `(на маке тоже ctrl) или в меню переходим View > Show Console;
  • вставляем текст и ждем когда закончится установка.

Установка плагинов

Для установки плагинов необходимо нажать shift + cmd + p, набрать install и выбрать пункт "Package Control: Install Package".

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

Плагины для верстки

  • AutoFileName - предлагает пути для файлов и изображений;
  • Emmet - целый набор плагинов для быстрого написания кода. Подробнее;
  • SideBarEnhancements - расширение сайдбара;
  • SASS - подсветка синтаксиса sass. Забавно, но долгое время я спокойно справлялся подсветкой синтаксиса less при работе с sass файлами;
  • LESS - подсветка синтаксиса less. На данный момент почти не использую. так как по работе все больше использую sass;
  • SublimeOnSaveBuild - компилирует файлы из less или sass в css сразу после сохранения. В последнее время тоже почти не используется, так это делает Gulp.

Emmet

Emmet сам по себе заслуживает отдельной статьи, это очень мощный инструмент для быстрой верстки и работы с HTML/CSS. Пара быстрых трюков, которые пригодятся почти каждому:

Шаблон html

Создание элементов

Создание вложенных элементов. Тут можно увидеть работу плагина AutoFileName при выборе ссылки

Работа с большим списком. Шорткат shift + cmd + l позволяет выбрать похожие элементы и работать одновременно со всеми

По ссылке можно посомтреть полный перечень трюков для Emmet.

Настройки Sublime

Для внесения изменений в настройки Sublime необходимо перейти Preferences > Settings. Все измнения лучше вносить в User settings

{
	"open_files_in_new_window": false, //при открытии любого файла из папки открывает его в текущем окне
	"translate_tabs_to_spaces": true, //преобразование табов в пробелы
	"tab_size": 2, //количество пробелов в одном табе
	"filename_filter": ".(sass|scss)$", //эта и нижняя строка для компиляции css из scss файлов при сохранении
  	"build_on_save": 1,
	"createCssSourceMaps": true //создавать sourcemap
}

Почитать про настройку и работу с Sublime

Поделиться
Отправить
Отправить