В этой статье я сделаю небольшой обзор полезных плагинов для Sublime Text 2, которые могут оказаться очень полезными в повседневной работе.
Проще всего устанавливать плагины в Sublime Text 2 при помощи менеджера пакетов под названием Package Control. Как установить Package Control в Sublime и как его использовать — я подробно расписал в одной из прошлых статей.
Тот же набор плагинов актуален и для Sublime Text 3.
В этой же статье я сделаю небольшой обзор некоторых полезных плагинов для Sublime Text 2, которые я сам использую в своей работе и советую использовать вам. Естественно, рассматриваемые здесь плагины — это только капля в море, есть множество полезных плагинов, не упомянутых в этой статье. К тому же, я не считаю себя программистом и не рассматриваю плагины, предназначенные для суровых кодеров, а подхожу к вопросу с точки зрения верстальщика. Впрочем, многие из рассматриваемых плагинов могут быть одинаково полезны как программистам, так и верстальщикам.
Исходя из всего вышеизложенного, я призываю вас: если вдруг вы не нашли в Sublime какого-то полезного для себя функционала — обязательно поищите среди доступных плагинов, велика вероятность, что необходимый вам функционал реализован с их помощью.
Ну а теперь перехожу непосредственно к обзорам.
Плагины Zen Coding и Emmet для Sublime Text 2
И начнем мы с одного из самых популярных плагинов — Zen Coding (устаревший) и Emmet (сегодняшнее название для Zen Coding). Zen Coding / Emmet — это набор инструментов для текстовых редакторов (не только для Sublime), который позволяет очень значительно ускорить написание html и css кода. В первую очередь речь идет о подобии сниппетов, но не только о них. В отличие от стандартных сниппетов, при помощи Zen Coding (либо Emmet) вы можете создавать довольно сложные конструкции кода. Например, сокращение типа ul>li*8 будет развернуто в ненумерованный список (стандартный тег ul) с 8 пунктами. И это самый простой пример, конструкции могут быть гораздо более сложными.
Я уже писал отдельную статью по поводу того, как можно использовать Zen Coding практически где угодно — в популярных редакторах или текстовых полях на любом сайте.
Установить плагин Zen Coding можно буквально за несколько секунд при помощи Package Control. Нажмите комбинацию Ctrl+Shift+P и в появившейся панели наберите слово install, после чего выберите появившийся пункт Package Control: Install Package. В появившейся после этого панельке наберите zencoding и нажмите Enter. Вуаля — плагин установлен.
Но Zen Coding на сегодняшний день не развивается, новые версии носят название Emmet. Не так давно этот тулкит имел нестабильный статус, но на сегодняшний день его вполне можно использовать (я использую именно Emmet). Соответствующий плагин в Sublime ставится тем же способом (см. предыдущий абзац), только при поиске естественно нужно набирать emmet.
Подробности про Zen Coding вы можете узнать на соответствующем сайте, про Emmet — на его официальном сайте. Приведу лишь некоторые примеры использования для тех, кто не знаком с этой концепцией. Все, что работало в Zen Coding, работает и в Emmet, поэтому примеры одинаково подходят для обоих случаев.
Для создания вложенных тегов используется символ >, для тегов на текущем уровне — символ +, а для многократного повторения какого-то тега используется символ *. После названия тега можно указывать название класса (отделив его точкой) или id (отделив его символом #). Например, конструкция вида:
div#page>div.logo+ul#navigation>li*5>a
… будет развернута до вида:
<div id="page">
<div class="logo"></div>
<ul id="navigation">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
Последовательность символов в сокращении обязательно не должна содержать пробелов, а курсор должен находиться в ее конце в момент разворачивания. Кстати говоря, разворачивание в Sublime производится нажатием клавиши Tab, либо же комбинацией Ctrl+E.
При желании можно задавать тегу a значение атрибута href, также любому «двойному» тегу можно задать его содержимое в фигурных скобках. В сложных конструкциях можно использовать скобки (например, для выхода на более высокие уровни в иерархии тегов). Вот пример подобного использования:
(ul>li*4>a[href=#]{Текст ссылки})+div
Подобная конструкция будет развернута до вида:
<ul>
<li><a href="#">Текст ссылки</a></li>
<li><a href="#">Текст ссылки</a></li>
<li><a href="#">Текст ссылки</a></li>
<li><a href="#">Текст ссылки</a></li>
</ul>
<div></div>
В Sublime Text 2 можно легко оборачивать выделенный текст в скобки или кавычки, просто нажав клавишу для создания открывающей скобки или кавычки. Закрывающая при этом будет создана автоматически.
Для быстрого переключения между редактируемыми точками используются клавиши курсора ← и → с одновременно зажатыми клавишами Ctrl+Alt. Можете поэкспериментировать и попереключаться между редактируемыми точками в примере выше, чтобы точнее понимать, о чем идет речь.
Zen Coding позволяет не указывать название для тега div, а указывать только класс или id. В этом случае автоматически подразумевается, что имеется ввиду div. Например, конструкция такого вида:
.container<#header+#main
… аналогична такой конструкции:
div.container<div#header+div#main
… и будет автоматически развернута до такого вида:
<div class="container">
<div id="header"></div>
<div id="main"></div>
</div>
Подобным же образом можно работать не только с HTML, но и с CSS-кодом, используя соответствующие сокращения для разворачивания их в полноценный CSS (тоже по нажатию на Tab).
Доступные комбинации клавиш можно посмотреть в соответствующем конфигурационном файле. В моем случае (в Ubuntu) этот файл находится по адресу ~/.config/sublime-text-2/Packages/Emmet/Default (Linux).sublime-keymap. Либо же можно заглянуть в файлик README.md в той же директории, там можно помимо основных клавиатурных комбинаций получить и много других полезных сведений.
В Emmet появились некоторые полезные фишки, которые отсутствовали в Zen Coding.
Многие сокращения в Emmet стали еще короче. Например, при работе с CSS сокращение p20 будет развернуто до padding: 20px;. Точно также сокращение m40 превратится в margin: 40px;, а w100 — в width: 50px;. Подобным образом можно задавать значения не только в пикселях. Так, сокращение w80p будет развернуто до width: 80%;. Подобным же образом можно задавать множественные значения, например m10-20 превратится в margin: 10px 20px;, а m0-auto превратится в margin: 0 auto;.
Emmet также знает о вендорных префиксах в CSS, имеет встроенный генератор градиентов и «рыбы» («Lorem Ipsum» с заданным количеством слов, например сокращение lorem20 создаст «рыбу» из 20 слов). Также появился новый оператор ^, который позволяет переходить на уровень (или несколько уровней) выше без использования скобок.
Функционал Emmet (как впрочем и Zen Coding) не ограничивается только разворачиванием сокращений. Есть также множество других полезных действий. Например, если поставить курсор в любое место тега img и нажать комбинацию Ctrl+U, то для заданного изображения будут автоматически подсчитаны и проставлены параметры width и height. Также вы можете приятно удивиться, если в css файле поставите курсор на адрес изображения и нажмете комбинацию Ctrl+'. Подобных фишек довольно много, все их я перечислить в рамках одной статьи не смогу, поэтому очень рекомендую заглянуть на официальный сайт проекта Emmet за более детальной документацией.
Плагин AdvancedNewFile для Sublime Text 2
Стандартный способ создания нового файла состоит (внезапно) из собственно создания (Ctrl+N) и последующего его сохранения (Ctrl+S). При этом на втором этапе открывается стандартное системное диалоговое окошко, в котором нужно выбрать папку и задать имя для нового файла.
Однако всю вышеописанную процедуру можно значительно упростить, используя плагин AdvancedNewFile. Установить плагин можно как обычно через Package Control: Ctrl+Shift+P → install → AdvancedNewFile → Enter.
Плагин установлен и готов к использованию. Теперь достаточно нажать комбинацию Super+Alt+N, после чего в нижней части окошка Sublime появится небольшая панелька. В этой панели достаточно ввести путь к новому файлу (обычно относительно корневой папки текущего проекта) и нажать Enter — и новый файл сохранен.
Причем можно использовать при введении адреса к файлу и еще не существующие директории — в этом случае эти директории будут созданы автоматически.
Если вы кликните правой кнопкой мыши по какому-то элементу на боковой панели (в дереве файлов), то обнаружите, что появляющееся при этом контекстное меню довольно скромное. Функционал этого меню можно значительно расширить, установив (опять же через Package Control) плагин SideBarEnhancements, после чего контекстное меню станет значительно богаче:
Этот плагин приносит с собой дополнительный функционал не только в виде расширенного меню. Так, при нажатии на клавишу F12 текущий файл теперь будет открываться в браузере (естественно, назначенные клавиши можно менять).
Плагин PlainTasks для Sublime Text 2
PlainTasks — это необычный плагин для Sublime, который позволяет использовать редактор еще и в качестве простенького менеджера задач (todo-листа).
И несмотря на то, что для формирования списка задач я использую замечательную программу GTG, я все же нашел для себя полезной возможность делать простые списки задач прямо в Sublime.
После установки плагина PlainTasks в командной панели (вызываемой по Ctrl+Shift+P) при вводе слова tasks появляется новый пункт, позволяющий создать новый список задач:
При выборе этого пункта в Sublime открывается новая вкладка с характерным желтым фоном. Теперь мы можем начать формировать свой список задач. При этом у нас имеется свой синтаксис и возможность использовать горячие клавиши, а при сохранении файла ему автоматически дается расширение *.TODO.
Если в конце строки стоит двоеточие, то такая строка автоматически считается заголовком последующего списка и подсвечивается красным цветом. Если теперь с новой строки набрать название новой задачи и нажать Ctrl+Enter, то пункт будет автоматически отформатирован (слева появится пустой квадратик). В качестве альтернативного способа создания новой задачи в списке можно использовать комбинацию Ctrl+I, при этом курсор должен находиться на предшествующем новой задаче пункте или в начале новой строки.
В рамках одного файла может быть сразу несколько списков задач. Причем при желании эти списки можно разделять сепаратором, для этого достаточно два раза ввести символ - и нажать клавишу Tab. Есть возможность назначать задачам теги (они должны начинаться символом @).
Задачи можно помечать как выполненные, установив на нужную задачу курсор и нажав комбинацию Ctrl+D. При этом задача помечается зеленой галочкой, подкрашивается серым цветом, автоматически помечается тегом @done, а в скобках указывается дата и время ее исполнения. Если повторно нажать комбинацию Ctrl+D, то задача возвращается к исходному виду (как другие невыполненные задачи).
Все выполненные задачи одним махом можно перенести в архив, используя комбинацию клавиш Ctrl+Shift+A.
Используя курсорные клавиши ↑ и ↓ с зажатыми Ctrl+Shift, можно перемещать вверх/вниз строку с текущей задачей (в том числе и в другой список).
Плагин приятен в использовании, а подобные списки задач удобно использовать в рамках каждого проекта, сохраняя TODO-файлы прямо в папку проекта.
Плагин LiveReload для Sublime Text 2
Плагин LiveReload позволит вам вживую видеть все изменения в редактируемом HTML и CSS коде. Вы сможете держать рядом открытое окно браузера и окно редактора, и при каждом сохранении файла страница в браузере будет обновляться автоматически.
Правда, для использования этого плагина придется установить дополнение в браузер (имеются дополнения для Firefox, Chrome и Safari). Ну а сам плагин LiveReload для Sublime Text 2 устанавливается как обычно через Package Control (Ctrl+Shift+P → install → LiveReload).
После установки расширения на панели браузера появляется кнопка, с помощью которой можно активировать или отключать расширение LiveReload.
Если вы установили плагин в Sublime и расширение в браузер, то подготовительные работы закончены. Не забудьте проверить, активирована ли соответствующая кнопка в браузере, и можете приступать к работе. Теперь при каждом сохранении редактируемого файла вы сможете вживую наблюдать результаты своей работы, причем без необходимости каждый раз вручную перезагружать страницу в браузере.
Плагин ColorHighlighter для Sublime Text 2
Плагин ColorHighlighter позволит вам видеть реальный цвет, соответствующий цветовому коду в CSS-файлах. Устанавливается плагин как обычно — через Package Control. Теперь при установке курсора на цветовой код он будет подсвечиваться соответствующим цветом.
Плагин ColorPicker для Sublime Text 2
Плагин ColorPicker позволит вам использовать системное диалоговое окно подбора цвета при правке CSS-стилей. После установки плагина (через Package Control) для появления диалогового окна достаточно нажать комбинацию Ctrl+Shift+P. После подбора цвета и нажатия на кнопку OK выбранный цвет автоматически подставится в то место, в котором был установлен курсор. Если же при этом курсор уже был установлен на каком-то цветовом коде, то при появлении диалогового окна этот цвет будет в него подставлен.
Плагин SFTP для Sublime Text 2
Плагин SFTP позволит вам прямо из Sublime передавать файлы по протоколам FTP и SFTP. После настройки соответствующих параметров при клике правой кнопкой мыши на любом файле в боковой панели в появившемся контекстном меню появится дополнительная группа пунктов, позволяющая передавать файлы на удаленный сервер.
Плагин SFTP распространяется по такой же условно-бесплатной модели, как и сам Sublime Text 2. Вы можете заплатить за его использование, а можете не платить (при этом иногда при отправке файлов на удаленный сервер плагин будет напоминать о возможной покупке).
На этом пожалуй и закончу обзор полезных плагинов для Sublime Text 2. Не забывайте, что для Sublime существует и множество других полезных плагинов, которые вы с легкостью можете установить через Package Control.
Напоследок рекомендую также взглянуть на другие мои статьи про Sublime Text 2, если вы этого еще не сделали:
А что это за клавиша «Super»?
Она же клавиша «Windows», она же «Meta».
Очевидно, вы Windows-пользователь? В Linux-системах принятно называть эту клавишу немного по-другому, нежели в Windows. Но суть от этого не меняется 🙂
Не перестаю удивляться возможностям редактора… Вроде мелочь, а как может пригодиться!
У меня этот плагин не работает. В чем может быть причина? Подсвечивает все цвета только одним черным цветом.
Я имел ввиду плагин ColorHighlighter
Забираю свои слова обратно. Заработал. 🙂
Мне тоже очень нравится Саблим, но в последнее время я смотрю в сторону Notepad++ — он умеет тоже самое и даже больше, да и плагины там есть…
Мы идем в противоположных направлениях 🙂
С Notepad++ я распрощался много лет назад, когда окончательно перешел на Linux. Notepad++, несмотря на свою открытость, написан исключительно под Windows.
Я бы не был столь категоричным. Опять же, тут наши мнения сильно расходятся.
Notepad++ я последний раз использовал очень давно, но впечатления помню, и Sublime для меня значительно лучше. То есть если бы даже Notepad++ был под Linux, я бы все равно предпочел Sublime.
P.S.: Даже не говоря о функционале, ни один редактор раньше не доставлял мне такого эстетического удовольствия в процессе работы, как Sublime. А это тоже очень важно на мой взгляд.
А что именно происходит с кодом картинки?
У меня преобразовался адрес в непонятные символы, но картинка не исчезла, а выводилась как положено.
Да, и спасибо за статьи по Sublime, перехожу на него. Тоже понравился.
1) Как сделать такую же цветовую гамму для sidebar в моей теме?
2) Плагин установил, а меню не появилось почему-то 🙁
Почему не появилось меню — я так понял вот поэтому:
А как сделать цветовую гамму для боковой панели (не устанавливая тему soda, т.е. в моей теме) — это так и не разобрался 🙁
Такой вопрос:
Никак не могу понять, можно ли настроить livereload с ftp. На локальном сервере у меня всё работает, но часто надо зайти и отредактировать файлы на сервере. И хотелось бы в реальном времени видеть, что делаешь. Реально ли это сделать с помощью плагина SFTP?
У меня такой задачи не стояло, не искал такой возможности. Может и можно, нужно покопаться в настройках плагина и Гугле.
Здравствуйте, а можно ли с помощью этого плагина создавать проекты, которые будут храниться на удаленном сервере и редактировать на лету?
Т.е. работать с сайтом напрямую, без Filezilla?
Здравствуйте, Роман.
Конечно можно. В статье, комментарий к которой вы оставили, пишется про плагин SFTP, предназначенный именно для этих целей.