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 это препроцессор для CSS. Он один из самых простых его представителей и тем самым является по большей части стартовой технологией для многих начинающих веб мастеров. Если Вам не хватает в CSS вложенности стилей, переменных, условий, циклов, функций и миксинов, то Вы просто обязаны попробовать Less. На официальном сайте Вы найдете подробную документацию по использованию, а на ютубе кучу роликов по использованию. Так же есть очень удобное руководство (на русском языке кстати).
Принцип работы Less в одной картинке:
Stylus
Очень продвинутый препроцессор для CSS. На ряду с LESS и Sass(SCSS). От конкурентов отличается довольно удобным и интуитивно понятным сайтом, а так же нестогим синтаксисом (можно как писать в стандартной нотации CSS, так и в нотации Sass, тоесть без лишних символов, что является предпочтительным стилем) + его полной поддержкой Emmet (за исключением некоторых неудобных моментов, но не смертельно).