S.Tominoff

Fullstack JavaScript разработчик

Готовим sublime text 3 к бою

В этой заметке я приведу небольшой список плагинов для sublime text и простых трюков, которые помогут Вам ускориться. В будущем я планирую выложить цикл статей для верстальщиков, которые хотят ускорить свой рабочий процесс.

Плагины


Для начала, рекомендую установить Package Control - это такой репозиторий с дополнениями для ST. Установка его достаточно проста и описана на офф.сайте - https://packagecontrol.io/installation, поэтому предполагаю что с этим Вы прекрасно справитесь и без меня.

 

 

Теперь посмотрим на плагины:

Bracket highlighter


Этот плагин подсвечивает границы разделителей, в том числе и html теги. В свежих версиях также содержит интересные экспериментальные возможности

 

Color hightlighter


Плагин для подсветки цвета. Поддерживает форматы - html named color, hex, rgb, rgba. У этого плагина есть еще одна приятная фишка - он поддерживает правильную подсветку переменных содержащих цвет (например в less)

 

 

Emmet


Бывший ZenCoding. При умелом использовании эта штука может сэкономить неимоверное количество времени и сил. Более подробно с основами работы с emmet вы можете ознакомиться в статье на хабре

 

Проекты


Sublime Text дает возможность группировать исходники в проекты. И это шикарно!

 

Во-первых держать все свои проекты в проектах (извините за каламбур) позволяет использовать быстрый поиск файлов.

Во-вторых каждый проект можно индивидуально настроить, в зависимости от требований.

 

Для создания нового проекта, в меню sublime выбираем Project -> Add Folder to Project...
С помощью этой кнопки мы добавляем папку в проект. Теперь нужно сохранить проект - Project -> Save Project As... в каком-либо удобном для вас месте.


Лично я предпочитаю хранить файлы Sublime Project в папке проекта, чтобы можно было свободно ими делиться с коллегами.


 

Настройка проекта


Чтобы настроить проект, выберем Project -> Edit Project, в итоге перед нами предстанет json файл с настройками проекта.

 

По умолчанию в проекте забиты такие настройки:

{
	"folders":
	[
		{
			"path": "."
		}
	]
}

folders содержит в себе набор путей к папкам, добавленным в проект. 

 

 

Исключение файлов и папок из проекта

В разделе folders, также имеется возможность исключения файлов и каталогов. К примеру, если мы хотим исключить все zip файлы из индекса проекта, воспользуемся настройкой file_exclude_patterns:

"file_exclude_patterns" : [
	"*.zip",
]

 

А для исключения целых директорий используется параметр folder_exclude_patterns:

"folder_exclude_patterns" : [ 
    "node_modules" 
]

Настройка этих параметров бывает очень важна в больших проектах, где есть множество файлов и каталогов. 

 

Кодировка проекта

Каждый проект можно настроить на определенную кодировку. Делается это с помощью настройки settings:

"settings" : {
	"default_encoding" : "Cyrillic (Windows 1251)",
	"fallback_encoding": "Cyrillic (Windows 1251)"
}

 

Размер отступов

В раздел settings также можно поместить настройки отступов. К примеру, чтобы задать отступ в 4 пробела, воспользуемся параметром tab_size:

"settings" : {
    "tab_size" : 4
}

 

Остальные настройки можно найти в документации

Системы сборки

Sublime Text предоставляет возможность интегрировать сборочные скрипты в проекты. Давайте, например, добавим сборочный скрипт для сборки проекта с помощью gulp

"build_systems" : [
    {
        "name" : "My Project builder",
        "cmd" : ["gulp", "build"]
    }
]

Выбираем свою систему сборки: нажимаем комбинацию <CTRL>+<SHIFT>+B, в списке выбираем нужный сборщик и нажимаем Enter. В sublime откроется консоль, где будет отображаться статус сборки. 

Пример сборки проекта

 

Ок, с самым простым разобрались, едем дальше - в инструментальный лес.