Уфа

ул. Лесной проезд 6/5,

Офис 6.

+7 (906) 102-95-68

ул. Лесной проезд 6/5, Офис 6.

tel
Главная Стрелка вправо Блог Стрелка вправо Sublime Text 3 для web разработки

Sublime Text 3 для web разработки

Sublime Text 3 - это "продвинутый" блокнот для написания кода. Sublime Text имеет много плюсов, которые выделяют его среди других "продвинутых" блокнотов (например Notepad++). Он прост в использовании, выглядит очень стильно, имеет минималистичный интерфейс (минимум визуального шума) и кучу плагинов, расширяющих его функционал.

В этой стать будет подборка плагинов для Sublime Text 3, которые помогают нам в работе. Так же будут представлены некоторые настройки самого редактора и плагинов. Для начала скачиваем редактор с официального сайта. Желательно скачивать портабельную версию.

Как же настроить данный редактор под себя? А все очень просто, настройки sublime хранит в обычных текстовых файлах в меню "Preferences". Обычно файл "Settings - Default" хранит настройки по умолчанию, а "Settings - User" содержит пользовательские настройки. Механизм очень простой, просто настройки "User" перебивают настройки "Default", вот и вся магия. Сам же файл "Default" даже не пробуйте править, все равно редактор этого не позволит. За то он позволит скопировать какие-либо настройки, для того чтобы не заниматься рутинным перепечатыванием из одного файла в другой.

Ниже представлен листинг моего файла настроек.

{
	"afn_insert_dimensions": false,
	"always_show_minimap_viewport": true,
	"auto_close_tags": false,
	"auto_match_enabled": true,
	"bold_folder_labels": true,
	"enable_tab_scrolling": false,
	"fade_fold_buttons": false,
	"font_size": 11,
	"highlight_line": true,
	"highlight_modified_tabs": true,
	"open_files_in_new_window": false,
	"overlay_scroll_bars": "enabled",
	"save_on_focus_lost": false,
	"trim_automatic_white_space": false,
	"word_wrap": true
}

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

Стандартные горячие клавиши меня не сильно устроили и поэтому я решил их немного подкорректировать под себя. Ниже представлен листинг моих горячих клавиш. Доступ к файлу можно получить из меню "Preferences -> Key Binding - User"

[
	// Скрывает панель навигации по файлам
	{"keys": ["ctrl+shift+s"], "command": "toggle_side_bar" },
	// Скрывает миникарту
	{"keys": ["alt+ctrl+shift+s"], "command": "toggle_minimap" },
	// Форматирует отступы в выделенном коде
	{"keys": ["alt+shift+f"], "command": "reindent" },
	// Дублирует строку
	{ "keys": ["ctrl+d"], "command": "duplicate_line" },
	// Выделяет одинаковые слова 
	{ "keys": ["ctrl+shift+d"], "command": "find_under_expand" },
	// Быстрое создание нового файла
	{ "keys": ["ctrl+shift+n"], "command": "advanced_new_file_new"},
	// Выделение целой строки
	{ "keys": ["ctrl+l"], "command": "expand_selection", "args": {"to": "line"} },
	// Удалить целую строку
	{ "keys": ["ctrl+shift+l"], "command": "run_macro_file", "args": {"file": "res://Packages/Default/Delete Line.sublime-macro"} },
	// Добавить пустую строку под курсором
	{ "keys": ["ctrl+enter"], "command": "run_macro_file", "args": {"file": "res://Packages/Default/Add Line.sublime-macro"} },
	// Добавить пустую строку над курсором
	{ "keys": ["ctrl+shift+enter"], "command": "run_macro_file", "args": {"file": "res://Packages/Default/Add Line Before.sublime-macro"} },
	// Меню замены
	{ "keys": ["ctrl+r"], "command": "show_panel", "args": {"panel": "replace", "reverse": false} },
	// Панель нечеткого поиска @
	{ "keys": ["ctrl+h"], "command": "show_overlay", "args": {"overlay": "goto", "text": "@"} },
	// Сохранение всех файлов
	{ "keys": ["ctrl+s"], "command": "save_all" },
	// Сохранение только текущего файла
	{ "keys": ["alt+s"], "command": "save" },
]

И этот файл мы немного допишем, а именно в этой статье мы сделаем 2 очень удобных макроса для console.log() и повесим их на сотетания клавишь alt+c и alt+v. А все горячие клавиши можно посмотреть тут "Preferences -> Key Binding - Default"

Важное замечание: Чтобы заработали хоткеи для навигации по файлам и миникарте, нужно сперва включить их в меню "View -> Side Bar -> Hide Side Bar" и "View -> Hide Minimap" соответственно.

Так же меня не устроила тема по умолчанию. Сильно выраженный красный цвет в коде резал мне глаза. И я решил её немгного перекрасить) В это мне помог сервис. Можно настроить любую из стандартных тем под свои вкусы. Мой вариант можно скачать по ссылке - моя тема. Далее этот файл можно сохранить и поместить в "...Sublime Text 3\Data\Packages\User", зайти в эту папку можно выбрав в меню "Preferences" первый пункт "Browse Packages", откроется проводник и в нем нужно зайти в папку "User". Потом нужно активировать нашу новую тему. Для этого в меню "Preferences -> Color scheme -> User -> /Наша новая схема/". Так же можно зайти в настройки "Preferences -> Settings - User" и прописать там вот такую настройку:

{
    "color_scheme": "Packages/User/SublimeLinter/Наша схема",
}

Далее нужно установить самый главный плагин в "Sublime - Package Control". Вот инструкция для его установки. Он делает установку и удаление плагинов очень удобным. Так же на этом сайте можно найти много справочной информации и кучу плагинов. Нам же нужно находясь в редакторе нажать сочетание клавиш ctrl+shift+p, что вызовет контекстное меню, в поле ввода которого нужно набрать "pac" и получить примерно такой результат.

В этом списке нас интересует пункт "Package Control: Install Package". Выбираем его и перед нами откроется список плагинов доступных для установки.

 

Emmet

Официальная документация

Наверное один из самых популярных плагинов для текстовых редакторов кода. Он позволяет по нажатию клавиши "TAB" (можно изменить в настройках) превращать простые сокращения в блоки html и css кода. Что очень способствует увеличению продуктивности веб-разработчика.

 

BracketHighlighter

Официальная страница.

Незаменимый плагин при работе с кодом, если конечно Вас не устраивает стандартная подсветка. Он повышает удобство работы с кодом, что наглятно продемонстрировано на картинке ниже.

Так же у этого плагина есть одна интересная настройка, которая регулирует в пределах какого количества символов (моя теория) он осуществляет поиск парного знака. Если Вы столкнулись в большом файле примерно со следующей картиной:

и если это Вам доставляет некоторое неудобство (как например мне), то Вы можете поправить ситуацию лишь изменив одну настройку. Отправляемся в "Preferences -> Package Settings -> BracketHighlighter -> Bracket Settings User" и прописываем там следующее (число можете ставить по вкусу) и проблема будет решена :

{
	"search_threshold": 50000,
}

 

AutoFileName

Официальная страница.

 Добавляет автозаполнение путей к файлам. Теперь не нужно запоминать длинные названия картинок. Очень удобно.

 

AllAutocomplete

Официальная страница.

Стандартное автодополнение в редакторе работает только с текущим файлом. Данный плагин осуществляет поск по всем файлам открытым в редакторе в данный момент. Это так же значительно ускоряет написания кода.

 

ASCII-Decorator

Официальная страница.

Данный плагин по сочетанию клавиш ctrl+shift+k превращает выделенный текст из обычного в декоративный. Шрифт можно настроить с помощью файла настроек. Доступ к которому можно получить из меню "Preferences -> Package Settings -> ASCII-Decorator -> Settings - User". Вот содержимое моего файла настроек:

{
	"favorite_fonts": [
        {
            "name": "Default Font",   // (required) Friendly name for font configuration
            "font": "banner3",          // (required) Font
            "comment": true,          // Override default setting
            "comment_style": "block", // Override default comment style
            "width": 80,              // Override default width
            "direction": "auto",      // Override default direction
            "justify": "auto",        // Override default justification
            "indent": true,           // Override default additional indentation setting
            "flip": false,            // Flip output
            "reverse": false          // Reverse output
        }
    ]
}

Им я пользуюсь по большей части для быстрому поиску по файлу с помощью minimap.

 

JavaScript Next

Официальный сайт.

Плагин обеспечивает улучшенную подсветку синтаксиса, так же поддерживает стандарт EcmaScript 2015. Для того чтобы изменить подсветку синтаксиса, необходимо открыть файл с расширением .js и выбрать новый синтаксис: "View -> Syntax -> Open all with current extension as... -> JavascriptNext". Также в "Preferences -> Settings - User" и дописать в настройки :

"ignored_packages":
	[
		"JavaScript",
	],

 

CSS3

Официальный сайт.

Так же как и предыдущий плагин он улучшает подсветку, только уже стилей. И опять же нужно в настройках выбрать CSS3 в качестве подсветки по умолчанию, а стандартную подсветку отключить.

"ignored_packages":
	[
		"CSS",
		"JavaScript"
	],

 

Less

Официальный сайт плагина.

Официальный сайт less.

Руководство для начинающих.

Less это препроцессор для CSS. Он один из самых простых его представителей и тем самым является по большей части стартовой технологией для многих начинающих веб мастеров. Если Вам не хватает в CSS вложенности стилей, переменных, условий, циклов, функций и миксинов, то Вы просто обязаны попробовать Less. На официальном сайте Вы найдете подробную документацию по использованию, а на ютубе кучу роликов по использованию. Так же есть очень удобное руководство (на русском языке кстати).

Принцип работы Less в одной картинке:

 

 

Stylus

Официальный сайт плагина.

Официальный сайт stylus.

Очень продвинутый препроцессор для CSS. На ряду с LESS и Sass(SCSS). От конкурентов отличается довольно удобным и интуитивно понятным сайтом, а так же нестогим синтаксисом (можно как писать в стандартной нотации CSS, так и в нотации Sass, тоесть без лишних символов, что является предпочтительным стилем)  + его полной поддержкой Emmet (за исключением некоторых неудобных моментов, но не смертельно).

 

Несколько полезных ссылок

Официальный сайт.

Бесплатный видео курс по редактору.

Горячие клавиши для WINDOWS