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

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

15.01
68
73 601
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
(По просьбам пользователей добавил ссылку на скачивание своей сборки)

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

Комментарии

Arsen
Arsen 16 января 2013 09:59
Подскажите, где можно взять русскую версию? Я скачивал с официального сайта этот редактор вроде платный и на англиском. А у вас на скринах русский язык. После Notepad++ тяжело перейти на Sublime Text 2.
ПафНутиЙ
ПафНутиЙ 16 января 2013 11:19
В конце статьи ссылки есть, в т.ч. на русификацию меню.
Если сильно лень ковырять - могу поделиться собственным редактором.
Danil
Danil 16 января 2013 12:51
Я думаю, данный редактор подойдет для более опытных веб-мастеров, а новичкам от любимого нотэпада отказываться не советую request
ПафНутиЙ
ПафНутиЙ 16 января 2013 13:29
Да, расчитано на тех, кто хотя бы знает по памяти основные теги и css-свойства.
А так могу посоветовать TopStyle - отличнейшая программа для работы с css - лучше я ещё не видел. HTML там не столь удобно править, но всё же вёрстку целиком можно делать в одной программе.
Arsen
Arsen 16 января 2013 16:31
Цитата: Danil
а новичкам от любимого нотэпада

Вот про это и спрашиваю, тяжело ли перейти с notepad++
ПафНутиЙ,
Если можно поделитесь вашим редактором.... Хоть я и новичок, все же хочу научиться всему, и работать во всех программах и для себя решить в какой проще работать.......
ПафНутиЙ
ПафНутиЙ 16 января 2013 23:05
Возможно там много лишнего, удалил только то, что 100% не понадобится.
Качайте
Arsen
Arsen 17 января 2013 11:15
Цитата: ПафНутиЙ
Возможно там много лишнего, удалил только то, что 100% не понадобится.

Спасибо!!!
laidman
laidman 18 января 2013 21:14
Огромное спасибо Паша!
ПафНутиЙ
ПафНутиЙ 18 января 2013 21:21
laidman,
Arsen,
Отпишитесь потом о впечатлениях, мне интересно)
laidman
laidman 20 января 2013 21:41
Слов нету одни впечатления :))
Огромное спасибо еще раз!
ПафНутиЙ
ПафНутиЙ 20 января 2013 22:53
На здоровье )
compis
compis 22 января 2013 21:00
Низкий поклон за обзор. После N++ от ST исключительно положительные эмоции. Спасибо!
ПафНутиЙ
ПафНутиЙ 22 января 2013 21:40
Рад, что смогли быстро разобраться с редактором)
OKyJIucT
OKyJIucT 23 января 2013 20:19
Действительно мощная вещь, достойная замена Notepad++, сразу после этой статьи перешел на Sublime Text 2.
Однако поскольку я люблю работать с файлами непосредственно на хостинге, мне больше понравилась phpDesigner, который работает с файлами по FTP. Но это наверное другого уровня инструмент, к тому же платный:)
В любом случае спасибо за столь подробный обзор!
ПафНутиЙ
ПафНутиЙ 23 января 2013 23:27
phpDesigner - совсем другой инструмент, расчитан на програмистов, поэтому в качестве инструмента вёрстки - слабоват, опять же в силу того, что програисту не нужно профессионально знать вёрстку, да и когда я последний раз в phpDesigner работал там был удобный автокомплит для jquery, не знаю как сейчас с этим обстоит. А вот ST2+emmet - лучший выбор для вёрстки. В качестве ftp/ssh клиента юзаю WinSCP.
madhast
madhast 30 января 2013 11:42
Подскажите что за цветовая схема на изображении в заголовке статьи?
ПафНутиЙ
ПафНутиЙ 30 января 2013 12:21
Solarized Light
sneiks
sneiks 30 января 2013 15:12
Цитата: ПафНутиЙ
Возможно там много лишнего, удалил только то, что 100% не понадобится.
Качайте


Ваша версия уже с выше перечисленными плагинами??? winked
ПафНутиЙ
ПафНутиЙ 30 января 2013 15:29
да, всё, что в статье там есть.
sneiks
sneiks 30 января 2013 15:35
Цитата: ПафНутиЙ
да, всё, что в статье там есть.


Пользовался постоянно Edit Plus... но ваша статья и редактор порадовал большое спасибо!
madhast
madhast 30 января 2013 15:41
спасибо :)
ПафНутиЙ
ПафНутиЙ 30 января 2013 15:43
Пожалуйста ) рад, что статья оказалось полезна многим.
Assada
Assada 1 февраля 2013 16:50
Видел на 90% похожую статью на хабре.

Жаль что написано поздно. Вышел ST3...
ПафНутиЙ
ПафНутиЙ 1 февраля 2013 17:52
ссылку плиз на хабр)
kabmir
kabmir 8 февраля 2013 21:34
Попробуйте этим редактором открыть большой, на метров эдак 18-ть, файл SQL и увидете, как он справляется! Ну как, "быстро"? angry
ПафНутиЙ
ПафНутиЙ 8 февраля 2013 21:44
Да, скорость открытия больших файлов слабовата.но разве вы каждый день работаете с большими дампами SQL?
Тогда вам нужен специальный софт для работы с SQL а не блокнот с подсветкой синтаксиса и плюшками smile
kabmir
kabmir 9 февраля 2013 01:54
Ты можешь подсказать, как устанавливать плагины?
websot
websot 21 марта 2013 05:46
Павел, добавьте пожалуста на 64 бит систему вашу сборку))
ПафНутиЙ
ПафНутиЙ 21 марта 2013 13:48
Как поставлю себе 64 битную винду - сделаю)
Но а вообще вы можете перенести весь конфиг на 64 битную версию ST2 или работать на 32 )
Fenix
Fenix 26 апреля 2013 01:19
Пафнутий приветствую! Вопрос - как сделать. чтобы код был цветным, как на скринах, ну вообще никак не пойму... Спасибо

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

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

Информация

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