Sublime Text 3 – проприетарный кроссплатформенный редактор веб-кода, написан на языках программирования C++ и Python разработчиком Джоном Спиннером. Первая альфа-версия вышла в 2011 году. Последняя версия Sublime Text 3 вышла в 2013 году и имеет возможность подсветки синтаксиса для C, C++, C#, CSS, D, Dylan, Erlang, HTML, Groovy, Haskell, Java, JavaScript, LaTeX, Lisp, Lua, Markdown, MATLAB, OCaml, Perl, PHP, Python, R, Ruby, SQL, TCL и XML. Редактор оснащен менеджером пакетов, который позволяет пользователю находить, устанавливать, обновлять и удалять пакеты без перезагрузки программы. В этой статье я расскажу как установить и настроить Sublime Text 3, а также поделюсь некоторыми полезными “фишками”.
Особенности веб-редактора Sublime Text
Данный редактор веб-кода я стал использовать относительно недавно, ранее “кодил” в обычном Notepad ++. Но со временем понял, что мне его не достаточно, нужно что-то более профессиональное и в то же время легкое в освоении, где можно будет максимально автоматизировать процесс построения/редактирования кода. Такие “монстры” как ID Php Storm и Visual Studio Code мне почему-то не совсем впечатлили, хотя остаются прекрасными решениями, а вот Sublime Text сразу, как говорится, “лег на душу” и наше знакомство с ним прошло мгновенно. То, что в Notepad++ забирало минуты, в Sublime я делал за секунды.
Особенности Sublime Text:
- Легкий, занимает мало дискового пространства, потребляет мало оперативной памяти, компактный;
- Простой и понятный веб-интерфейс, доступный новичку и полезный опытному пользователю (содержит множество “плюшек”);
- Поддержка различных тем, скинов, расширений, модулей, плагинов;
- Поддержка сниппетов (заготовок) веб-кода;
- Кросплатформенный – поддерживает все современные ОС;
- Поддержка макросов;
- Поддержка автосохранения.
Недостатки:
- Платный. Распространяется по коммерческой лицензии – цена 59$. Но оно того стоит (хотя, можно использовать и “вечный” Trial-период – время от времени при сохранении появляется окно с предложением купить программу).
Установка Sublime Text 3
Скачать можно по ссылке:
После установки, запускаем редактор с помощью меню “Пуск” в ОС Windows:
По умолчанию программа выглядит так:
Установка менеджера пакетов
Первое, что нужно сделать – установить Package Control (Менеджер Пакетов) – специальный репозиторий с различными дополнениями к редактору Sublime Text 3. Для того чтобы установить переходим в меню: Tools -> Install Package Control.
Получаем сообщение, что менеджер пакетов установился успешно, нажимаем “Ок”:
Установка плагинов
Далее установим плагин Emmet – позволяет ускорить написание веб-кода за счет того, что он умеет генерировать HTML-разметку. Переходим в Preferences -> Package Control:
Далее введите install и выберите Package control: Install package:
Далее напишите Emmet и выберите пункт Emmet for Sublime Text 3:
Получаем сообщение, что Emmet установился успешно:
Давайте попробуем проверить как работает плагин Emmet. Создадим файл index.html и сгенерируем разметку: зажмите клавишу Shift и введите восклицательный знак.
Появится сниппет разметки HTML-документа. Нажмите клавишу Tab, чтобы применить его:
Как вы видите одним нажатием клавиши у нас сгенерировалась полностью рабочая HTML-разметка. Далее можем сгенерировать мета-тег <H1>. Для этого просто введите h1 и нажмите на клавишу Tab – плагин Emmet сгенерирует открывающий и закрывающий тег:
И подобным образом можно генерировать любые другие html-теги.
Установка темы
Теперь попробуем установить тему оформления и подсветки синтаксиса для редактора Sublime Text 3. Я буду использовать простую тему Spacegray Monokai.
Установка проходит стандартно через Менеджер пакетов (Ctrl+Alt+P): Preferences -> Package Control -> Install-> Monokai – Spacegray:
Чтобы применить тему переходим в меню Preferences -> Color Scheme и выбираем цветовую тему:
Кстати, удалить любое расширение (плагин или тему) в Sublime Text 3 также легко, как и установить – в Менеджере пакетов достаточно прописать Remove package и выбрать необходимое расширение.
Горячие клавиши Sublime Text 3
- Ctrl + Shift + P – вызов менеджера пакетов;
- Ctrl + ` – открыть консоль;
- F11 – полноэкранный режим;
- F9 – сортирует все строки в алфавитном порядке;
- F6 – проверка правописания;
- Shift + F11 – свободный полноэкранный режим;
- Ctrl+K + Ctrl+B – вывести/спрятать боковую панель;
- Ctrl + G – перейти к строке по номеру;
- Ctrl + R – перейти к символу;
- Ctrl + “ – перейти к классу;
- Ctrl + I – поиск на лету;
- Ctrl + H – поиск и замена;
- Ctrl + / – закомментировать/раскомментировать текущую строку;
- Ctrl + Shift + / – добавить комментарий;
- Ctrl +Shift + J – выделить блок;
- Ctrl + L – выделение целой строки;
- Ctrl + Z – отмена последних действий, шаг назад;
- Ctrl + T – быстрое перемещение по файлам;
- Сtrl + N – создать новую вкладку (файл);
- Alt + . – закрыть незакрытый тег;
- Ctrl+K + Ctrl+Space – установить метку;
- Ctrl+K + Ctrl+W – удалить метку;
- Ctrl+K + Ctrl+G – удалить все метки;
- Ctrl+K + Ctrl+U – трансформирует выделенный текст в верхний регистр;
- Ctrl+K + Ctrl+L – трансформирует выделенный текст в нижний регистр;
- Ctrl + Shift + A – выделить содержимое html-тега;
- Ctrl + Shift + D – продублировать строку вниз;
- Ctrl + Shift + N – создать новое окно;
- Ctrl + Shift + W – закрыть текущее окно;
- Ctrl + Shift + V – вставить с отступом;
- Ctrl + Shift + [ – свернуть код;
- Ctrl + Shift + ] – развернуть код;
- Ctrl + O – открыть файл;
- Ctrl + Shift + T – открыть последний закрытый файл;
- Ctrl + C – копировать;
- CTRL + V – вставить;
- CTRL + X – вырезать;
- Ctrl + S – сохранить текущий файл;
- Ctrl + Shift + S – вызвать окно “Сохранить как”;
- Ctrl + + – увеличить размер шрифта в редакторе;
- Ctrl + – – уменьшить размер шрифта в редакторе;
- Ctrl + q – записать макрос;
- Ctrl + Shift + q – воспроизвести макрос;
- Ctrl + Alt + Shift + P – отобразить название контекста, в котором находится курсор;
Горячие клавиши плагина Emmet
- Shift + ! – сгенерировать разметку html-документа;
- ul>li*5 – выведет 5 тегов li, заключенных в тег ul;
- #selector – выведет <div id=”selector”></div>;
- ul>li*10>a{item$} – выведет 10 тегов <a href=””>, заключенных в теги li и ul;
- (div>p)+(span>em) – выведет одновременно несколько тегов;
- div.class+div#id – вывод блока div с указанным класом + вывод блока div с указанным идентификатором;
- div[title=”Hello” myattr=3] – вывод атрибутов;
- h1{Заголовок} – создаст тег h1 с указанным текстом;
- Lorem5 – сгенерировать “текст-рыбу” с 5 слов;
- .class – выведет блок div с указанным классом: <div class=”class”></div>;
- a:link – <a href=”http://”></a>;
- a:mail – <a href=”mailto:”></a>;
- base – <base href=””>;
- link – <link rel=”stylesheet” href=””>;
- link:css – <link rel=”stylesheet” href=”style.css”>;
- link:favicon – <link rel=”shortcut icon” type=”image/x-icon” href=”favicon.ico”>;
- link:rss – <link rel=”alternate” type=”application/rss+xml” title=”RSS” href=”rss.xml”>;
- meta:utf – выведет мета-тег кодировки html-документа;
- meta:vp – мета-тег viewport;
- script:src – <script src=””></script>;
- img – <img src=”” alt=””>;
- ifr – <iframe src=”” frameborder=”0″></iframe>;
- emb – <embed src=”” type=””>;
- obj – <object data=”” type=””></object>;
- form – <form action=””></form>;
- input – <input type=”text”>;
- tarea – <textarea name=”” id=”” cols=”30″ rows=”10″></textarea>;
Как добавить просмотр кодировки
Переходим в меню Preferences -> Settings и добавляем строку: “show_encoding”: true.
Можно также просмотреть текущую кодировку в консоли с помощью команды: view.encoding().
Сохранить файл в указанной кодировке: File -> Save with encoding.
Также существует специальный плагин для работы с разными кодировками – EncodingHelper.
Как автоматически отформатировать код
Sublime Text 3 один из тех продвинутых редакторов, которые поддерживают интеграцию линтеров – так-называемых форматтеров кода. Плагин, который я порекомендую – HTML-CSS-JS Prettify. С его помощью вы всегда сможете структурировать свой код и держать его в “чистоте”, то есть придерживаться стиля, который часто игнорируется новичками, но ценится в среде профессиональной веб-разработки. Форматтер использует библиотеку Node.js, поэтому предварительно этот компонент нужно установить.
