» » Sublime Text 2 - краткий обзор, примеры и плагины

Sublime Text 2 - краткий обзор, примеры и плагины

15.01
68
87 186
Sublime Text 2 - краткий обзор, примеры и плагины


Как и обещал - сегодня я расскажу о красивом и удобном текстовом редакторе Sublime Text 2.

Раньше для вёрстки я пользовался двумя отличными программами notepad++ и TopStyle 5 (TopStyle и сейчас иногда пользуюсь) и меня всё полностью устраивало.
И вот однажды я увидел видео с демонстрацией текстового редактора Sublime Text 2 и решил попробовать – не понравился т.к. немного непривычно было и времени разбираться в англоязычных конфигах не было. Потом я прочитал статью в блоге у Димы Dimox`a и поставил программу ещё раз, и снова "не пошло". И только с третьей попытки я понял что это за зверь и теперь вряд ли на что-то променяю Sublime Text. Так что сразу могу сказать, что вам придётся потратить на настройку и освоение редактора некоторое время, и чем дольше вы в нём работаете, тем больше для вас будет открываться приятных мелочей и не очевидных, но очень удобных и экономящих нервы и время фишек!
Но обо всё по порядку.

Особенности редактора


Быстрый и красивый

Просто взгляните на скриншоты – ничего лишнего, только нужное.

Sublime Text 2 - краткий обзор, примеры и плагины

Sublime Text 2 - краткий обзор, примеры и плагины


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

Крайне гибкий в настройках

Особенностью ST2 является хранение всех настроек в файлах.
Конечно можно настроить его и через UI, но в меню представлены лишь общие настройки, тонкости придётся настраивать самостоятельно в файлах, однако это не столь сложно, как кажется на первый взгляд, достаточно открыть файл пользовательских настроек, скопировать необходимые настройки из файла настроек по умолчанию и подправить под себя, а разобраться в них поможет документация на русском языке.

Sublime Text 2 - краткий обзор, примеры и плагины


Лёгкая расширяемость функционала

Для ST2 существует уже огромное количество плагинов, наборов готовых сниппетов, цветовых схем и прочих полезностей, существенно расширяющих его функционал.
О некоторых плагинах я кратко расскажу в конце статьи.

Собственные горячие клавиши

Хоткеи можно назначать для практически любого действия и не только.
Тут не совсем уместно понятие горячие клавиши, т.к. "горячей" может стать любая клавиша, по вашему желанию.
К примеру мой файл конфигурации пользовательских хоткеев выглядит так:

[
{ "keys": ["{"], "command": "insert_snippet", "args": {"contents": "{nt$0nt}"}, "context":
[
{ "key": "setting.auto_match_enabled", "operator": "equal", "operand": true },
{ "key": "selection_empty", "operator": "equal", "operand": true, "match_all": true },
{ "key": "selector", "operator": "equal", "operand": "source.css", "match_all": true },
{ "key": "following_text", "operator": "regex_contains", "operand": "^(?:t| |)|]|}|$)", "match_all": true }
]
},
{
"keys": ["shift+alt+w"],
"command": "wrap_as_you_type",
"context": [{
"operand": false,
"operator": "equal",
"key": "setting.is_widget"
}]
}
]

Первый большой кусок кода – определённая расстановка фигурных скобок в CSS-файлах, я люблю, когда код выглядит каскадно:

.class {
color: #000;
background: none;
}
.class p {
color: #fff;
background: #000;
}

В своё время были у нас некие разногласия относительно каскадного подхода к написанию CSS, но после того, как выяснилось, что такой код отлично сворачивается – разногласия пропали сами собой (просто попробуйте свернуть первую строку).

Второй кусок – переопределение сочетания клавиш shift+alt+w для удобного обёртывания кода в плагине emmet.
Но никто не мешает добавить/переназначить любую клавишу или сочетание клавиш радактора? достаточно проделать действия, аналогичные пользовательским настройкам.

Sublime Text 2 - краткий обзор, примеры и плагины


Удобнейшее мультивыделение и полноценное мультиредактироване

Мультивыделение отлично работает даже с Punto Switcher, в отличии от np++
К примеру из списка категорий
Sublime Text 2 - краткий обзор, примеры и плагины

нам нужно сверстать ненумерованный список, где ссылки будут иметь title соответствующий названию категории, занятие не из приятных, если нет мультивыделения, а ещё лучше вооружиться плагином emmet. Тогда последовательность действий будет примерно такая:
  1. Ctrl+A
  2. Ctrl+Shif+L
  3. Ctrl+C
  4. Shift+Alt+W
  5. Печатаем li>a[title] и жмём enter, печатаем #,
  6. Ctrl+Alt+→
  7. Ctrl+V
  8. Ctrl+A
  9. Shift+Alt+W
  10. Печатаем ul
  11. Всё
Sublime Text 2 - краткий обзор, примеры и плагины

Фокус в том, что если выделить количество строк, равным количеству скопированных строк - каждая строка вставится в своё место )
На первый взгляд сложно, но когда вам попадётся список из 200+ пунктов - подобный подход здорово сэкономит время )

Мгновенный, живой поиск по открытым файлам и проекту

(о проектах подробнее расскажу ниже)

Sublime Text 2 - краткий обзор, примеры и плагины

На скриншоте в проекте закинута папка с DLE. Открыт один файл, не имеющий отношения к DLE. Я нажал Ctrl+P и набрал слово show - моментально открылся для просмотра (без открытия отдельной вкладки) первый файл, название которого совпало с вводимыми символами, если перемещаться по списку стрелками на клавиатуре - будут открываться для просмотра другие файлы, если нажать Enter - файл откроется в отдельной вкладке. И всё это происходит мгновенно!

Проекты


Sublime Text 2 - краткий обзор, примеры и плагины

Проекты это крайне удобная фишка редактора.
Для добавления папки в проект достаточно просто перетащить нужную папку с файлами в левую колонку. Как видно на скриншоте проект представляет из себя подобие левой колонки проводника windows. Можно сохранять проект в виде специального файла и переключаться между проектами при необходимости - очень удобно, не нужно постоянно держать открытым TotalCommander с кучей вкладок и бегать туда-сюда в поисках нужного файла, достаточно открыть нужный проект и нажать Ctrl+P вписав часть имени файла.

Миникарта


Sublime Text 2 - краткий обзор, примеры и плагины

Миникарта располагается в правой колонке, отображает несколько экранов кода и её можно использовать в т.ч. как скроллбар. А так же можно написать комментарий "большими буквами" с помощью плагина ASCII-Decorator и вы не потеряете нужный кусок к примеру CSS-файла.

Сниппеты – архи полезная вещь!

По началу я не предавал значения сниппетам и не совсем понимал для чего они вообще нужны, ведь есть заготовки кода, которые удобно разложены по папкам.
Теперь я открываю эти папки лишь для того, чтобы скопировать оттуда код и вставить в новый сниппет, который потом буду вызывать либо хоткеем, либо выбирать в автокомплите.
К примеру, если я набираю текст bx и жму Ctrl+Space – я вижу меню автокомплита такого содержания:

Sublime Text 2 - краткий обзор, примеры и плагины

Это некоторые часто (и не очень) используемые сниппеты, которые я добавил для удобства создания шаблонов под bitrix, т.к. всё запомнить нереально, а лазить каждый раз в типовые шаблоны или документацию - лень.
При выборе нужного сниппета я получаю вот такой код:

Sublime Text 2 - краткий обзор, примеры и плагины

обратите внимание – часть текста уже выделена при вставке, его можно удалить, если он не нужен в данном шаблоне. Делается подобное выделение очень просто:

Sublime Text 2 - краткий обзор, примеры и плагины

Выбираем в меню Инструменты - > Новый сниппет и получаем заготовку для нового сниппета.

Sublime Text 2 - краткий обзор, примеры и плагины

Вместо
Hello, ${1:this} is a ${2:snippet}.

вставляем любой исходный код. И соблюдаем ряд правил, про которые хорошо написано на хабре. Если нужно вставить знак $ - то экранируем его обратным слешем \

Умные закладки

Просто попробуйте выделить некий кусок текста и нажмите Ctrl+F2 - поставится закладка, потом можно править код в другом месте, а если нужно вернуться к закладке – жмите F2 и будете приятно удивлены тем, что закладка находится в том же состоянии, в котором вы её поставили, т.е. если был выделен текст - он будет в точности так же выделен.

Умное комментирование

Для каждого синтаксиса существуют свои комментарии, так вот не зависимо от синтаксиса Sublime Text правильно ставит и снимает правильные комментарии по нажатию на Ctrl+/
К примеру если в выделенном, закомментированном куске кода есть вложенный комментарий - он не будет раскомментирован при раскомментровании всего куска.

Удобное сворачивание кода


Sublime Text 2 - краткий обзор, примеры и плагины

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

Волшебная кнопка

А точнее сочетание Ctrl+Shift+P - запомните его - это сочетание даёт доступ к всевозможным командам и вообще всему что есть в ST2, достаточно начать набирать текст.
К примеру чтобы сменить подсветку синтаксиса наприме на html достаточно набрать sshtml, редактор сам подставит Set Syntax: HTML.
Порой проще нажать Ctrl+Shift+P и набрать часть нужного слова, чем искать нужный пункт меню.

Я описал лишь самые очевидные плюсы редактора, об остальных вы сможете узнать самостоятельно, начав использовать Sublime Text.
Так же хочу немного рассказать про плагины, которыми пользуюсь сам и советую другим.

Плагины

  • Package control - ставить в обязательном порядке, этот плагин существенно облегчает установку/удаление других плагинов.

    Все, представленные ниже (как и любые другие) плагины рекомендую устанавливать через Package control (нажимаем Ctrl+Shift+P, пишем list, жмём enter или выбираем пункт "Package Control: List Packages") введя название плагина в строку поиска.
  • Emmet - наследник ZenCoding превзошедший своего прародителя! Если вы верстаете - это первый плагин, который обязателен к установке, сказать, что он облегчает жизнь верстальщика - не сказать ничего, просто потыкайте по ссылкам в документации и вы всё поймёте.
  • EncodingHelper - я поставил этот плагин для того, что бы точно знать в какой кодировке открыт файл, а то бывали небольшие фэйлы с неправильным отображением текста на сайте))
  • BracketHighlighter - подсветка парных скобок, кавычек. Делает их более заметными, что удобно когда смотришь чужой код и не только.
  • ASCII-Decorator - Превращает маленькие буквы в большие, написанные различными символами (символы и шрифт зависят от настроек).
  • Minifier - минимизация js-скриптов и CSS-файлов - полезный плагин для уменьшения их веса при сдаче проекта заказчику.
  • Tag - полезнейший плагин для управления и работы с html-тегами
    Sublime Text 2 - краткий обзор, примеры и плагины

  • Alignment - выравнивание кода. просто выделяем неровный код, жмём Ctrl+Alt+A и наслаждаемся стройного вида кодом )
    Sublime Text 2 - краткий обзор, примеры и плагины

  • jQuery - набор сниппетов для jquery - просто упрощает написание jQ-функций )


Небольшая ложка дёгтя?
Редактор платный, но платный условно - т.е. периодически, после сохранения файла, вылезет предложение купить, но закрывается по Esc и не доставляет каких-либо неудобств и ни кто не настаивает на покупке, можно пользоваться сколько угодно бесплатно!

В завершение обзора дам несколько полезных ссылок
- Официальный сайт редактора
- Сайт с документацией на русском языке
- Русифицированное меню для Sublime Text - гораздо проще осваивать программу на великом могучем, чем на инглише ) Я пошёл дальше и перевёл в своём редакторе всё, что посчитал нужным перевести (это можно увидеть на скриншотах).
- Много полезных видео по работе с редактором, хоть некоторые и устарели.

Шпаргалка по стандартным хоткеям:
Sublime Text 2 - краткий обзор, примеры и плагины


На этом, пожалуй, закончу этот небольшой обзор.
Задавайте вопросы, с радостью отвечу и помогу, чем смогу в освоении столь замечательного редактора.
Если есть желающие - поделюсь собственным, уже настроенным и готовым к бою, редактором (портабельный под Windows)

Обновлено: 12 марта 2013
(По просьбам пользователей добавил ссылку на скачивание своей сборки)

Похожие материалы

Комментарии

ПафНутиЙ
ПафНутиЙ 26 апреля 2013 08:53
Это одна из цветовых схем, называется solarized light, включается в настройках:
легколегко
Ingo
Ingo 29 апреля 2013 04:21
По поводу примера с набитием тегов ul-li. Вообще-то не запомнить. все эти клавиши трудно запомнить, надо запоминать не их а команды- сделать выделение, расширить каретки и тп.

Потом, я подумал нельзя ли сделать такую же набивку (тегов ul-li) в редакторе SynWrite. но там не ввести названия топиков в аттрибуты title тега а, нет всех команд. Но видимо и не нужно вводить топики в аттрибуты title, смысл какой? А так мульти-каретки там есть и просто набить быстро теги li-ul можно.

По поводу радости от быстрого открытия файла при промотке списка файлов в Go to file диалоге, не соглашусь. Мне бы неприятно было если бы при выделении элементов списка файл бы сразу открывался, это сбивает. Лучше просто по выбору файла открывать его.
ПафНутиЙ
ПафНутиЙ 29 апреля 2013 11:15
Да, запоминание хоткеев приходит только тогда, когда ими постоянно пользуешься.
По поводу удобности некоторых вещей - это уже на любителя. У нас к примеру программист терпеть не любит "живого поиска" ему удобнее набрать текст и нажать на enter для перехода результату, каждому своё. Я сам только с третьего раза пересел на ST2 - не сразу оценил все его прелести ).
AMSTeR
AMSTeR 11 мая 2013 00:35
А я рекомендую webuilder, ST2 хорош, но самые полезные модули на него платные, например тот же фтп. Кому интересно почитайте про webuilder (_webuilderapp.com/ru/) я его использую уже несколько лет и на работе и дома. Лучше еще ничего не видел.
ПафНутиЙ
ПафНутиЙ 11 мая 2013 02:13
Интерфейс перегружен лишним. И на мой взгляд ориентирован на приоритет мышки, т.е. примерно на тех кто вместо нажатия Ctrl+L (или другого сочетания, вызывающего выделение строки/абзаца) три раза кликает мышкой в абзац, почти как в VisualStudio.
Ingo
Ingo 11 мая 2013 04:34
Мне ОЧЕНЬ понравился WeBuilder. Все на месте. Меню хорошо сделано, и организовано. ТОЛЬКО сегодня попробовал
aleps
aleps 1 июня 2013 23:09
Привет! действительно с виду не плохой редактор.
может я не заметил хитрости, но как в нем цвет, например, в стилях писать, вручную что-ли? Мне кажется,было бы удобнее когда после написания # выводится табличка цветов/отттенов
ПафНутиЙ
ПафНутиЙ 1 июня 2013 23:14
Да, мне тоже по началу очень не хватало этой возможности, потом поставил плагин Color Hightliter, но он тормозил работу редактора местами очень сильно.
Сейчас верстаю на less и проблемы выбора цвета нет т.к. все цвета загнаны в переменные.
Кстати самая лучшая реализация работы с цветами, на мой взгляд, имеется в TopStyle.
morff
morff 6 июля 2013 00:20
выключил меню навигации как включить?
morff
morff 6 июля 2013 00:36
Сам отвечу - Аlt
EsviLLs
EsviLLs 17 июля 2013 22:01
Пора бы уже обновить тут все, так как вышла новая версия )
ПафНутиЙ
ПафНутиЙ 17 июля 2013 22:39
ST3 пока не пользуюсь, никак не найду время настроить его под себя ) хотя прикупил давно.
EsviLLs
EsviLLs 20 июля 2013 03:32
Буду ждать твоей сборки _)
archi_sova
archi_sova 17 сентября 2013 13:11
Подскажите, пожалуйста! Как открывать файл в нужной мне кодировке, бывает так что при открытии файла вижу вместо русских символов "кракозябры", приходиться каждый раз выполнять команду "Reopen with encoding" и выбирать например Cyrillic 1251, как сделать так чтобы сразу открывал в этой кодировке? Заранее спасибо!
ПафНутиЙ
ПафНутиЙ 17 сентября 2013 13:46
По хорошему надо переходить уже на utf-8 (но это скорее из области фантастики).
Добавьте в конфиг User\Preferences.sublime-settings вот такой код:
"fallback_encoding": "Cyrillic (Windows 1251)",
archi_sova
archi_sova 17 сентября 2013 14:08
Благодарю, за помощь! winked
archi_sova
archi_sova 18 сентября 2013 18:10
Павел, здравствуйте!
Совсем недавно появилась двойная табуляция, т.е. при нажатии на клавишу Tab добавляется два отступа. Просмотрел настройки, ничего похожего не нашел что могло бы за это отвечать, подскажите пожалуйста, как ее убрать, как она могла появится. Заранее благодарен!
ПафНутиЙ
ПафНутиЙ 18 сентября 2013 18:15
Возможно какой то плагин тоже использует таб для вставки таба.
попробуйте плагин keymap manager при его вызове внизу появляется пункт keymap conflict - показывает конфликтующие хоткеи.
archi_sova
archi_sova 18 сентября 2013 18:18
Ооо, спасибо. Да действительно, конфликт плагина который вы рекомендовали в статье, Alignment - выравнивание кода. Пришлось его снести, честно говоря так не разу и не воспользовался им. Спасибо, за помощь winked
websot
websot 16 октября 2013 17:12
Спасибо, будем знать, а то работы много, а заниматься сайтами чуточку проблема с часиками))
archi_sova
archi_sova 23 декабря 2013 01:08
Приветствую, ПафНутиЙ!
Подскажите пожалуйста, как отключить просьбы Sublime на новое обновление, т.е. при каждом запуске программа говорит, что мол вышла новая версия, а как чтобы это инфо окно не появлялось??? Заранее благодарен!
ПафНутиЙ
ПафНутиЙ 23 декабря 2013 02:13
Да просто обновитесь, если портабельная верия - то прямо поверх старой распаковать и всё. Ну конечно же предварительно сделать бэкап )
archi_sova
archi_sova 23 декабря 2013 10:39
А вот если не хочу :), просто у меня на одном компе стоит версия 3047 и при запуске никаких оповещений не появляется, а на другой комп устанавливаю из того же самого дистрибутива и она требует обновится :(
archi_sova
archi_sova 23 декабря 2013 10:40
а еще вопросик, подскажите пожалуйста, как экспортнуть свои настройки?
ПафНутиЙ
ПафНутиЙ 23 декабря 2013 10:55
Sublimetext - это не винда, его НУЖНО обновлять. Он от этого работает гораздо лучше.
При обновлении все настройки сохраняются.
Хрянятся они в папке user.
archi_sova
archi_sova 23 декабря 2013 14:26
Обновился. Хотелось бы, конечно, понять все-таки, почему на одном компе обновлений не требует, а на другом просится обновится. Спасибо за рекомендации! :)
ПафНутиЙ
ПафНутиЙ 23 декабря 2013 16:08
Возможно редактору просто закрыт доступ к интернету, вот он и не обновляется.
archi_sova
archi_sova 30 декабря 2013 11:15
Приветствую, Павел!
Подскажите пожалуйста, что делать со сниппетами в портабельной версии, суть в том, что при переходе на портабельную версию, редактор не подтягивает мои сниппеты, даже если я их все сложил в папку "..\\Sublime Text Build 3059 x64\Data\Packages\User". Я попробовал установить плагин SnippetMaker и попытался создать с помощью него сниппет, но при сохранении он выдал вот такое вот сообщение:
---------------------------
Sublime Text
---------------------------
No content for snippet Packages/User/scriptsrc.sublime-snippet
---------------------------
ОК
---------------------------
ПафНутиЙ
ПафНутиЙ 30 декабря 2013 14:01
Я всегда пользуюсь только портабельной версией, все сниппеты прекрасно работают.
o:Sublime Text 3DataPackagesUser
Raynor
Raynor 9 марта 2014 15:37
А как проверять синтаксис html, js, css, php? Чтобы подсвечивался неправильный код?
Поставил SublimeLinter но не работает проверка, кто настроил, поделитесь как это сделать правильно.

Добавить комментарий

Комментировать могут только зарегистрированные пользователи

Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.