Sublime Text: встановлення, налаштування, плагіни

Що таке Sublime Text?

Sublime Text — це кросплатформний редактор веб-коду, розроблений Джоном Спіннером у 2011 році на мовах програмування C++ та Python. Остання версія вийшла у 2013 році. Sublime Text є комерційним продуктом й розповсюджується за платною ліцензією. Ціна ~$59.

Особливості і переваги Sublime Text:

• Багатомовність, дружній і функціональний веб-інтерфейс (відмінне, продумане юзабіліті для веб-розробника);
• Легкий, компактний, займає мінімум дискового простору, споживає мінімум оперативної пам’яті;
• Вбудований менеджер пакетів, підтримка додаткових тем, плагінів, модулів, розширень;
• Функція підсвічування синтаксису різних мов програмування: 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;
• Функція автоматичної вставки код — сніппетів (тобто шаблонів, заготовок коду);
• Редактор універсальний, може бути встановлений на різних операційних системах: Windows/Linux/MacOS;
• Підтримка макросів (сценаріїв);
• Підтримка функції автозбереження.

Встановлення і налаштування Sublime Text

SublimeText можна завантажити з офіційного сайту.

Інсталюємо й запускаємо редактор. Тепер можна перейти до налаштувань.

Першим чином необхідно встановити менеджер пакетів — Package Control. Він здійснює доступ до віддаленого репозиторію додатків, розширень та плагінів для Sublime Text.

Для його встановлення просто переходимо в меню програми: Tools -> Install Package Control. Компонент інсталюється автоматично й з’явиться сповіщення, що установку завершено.

Далі варто встановити тему для оформлення веб-інтерфейсу та підсвітки синтаксису. Я використовую класичну тему Spacegray Monokai, хоча можна обрати й інші. Ось найбільш популярні: ArmoryBlue, Dracula, Guna, Agila, Freesia, Cobalt2, Cyanide, Phoenix, Soda тощо. Більше тем – тут.

Встановлюємо тему через Package manager (Ctrl+Alt+P): Preferences -> Package Control -> Install-> Monokai – Spacegray. Щоби застосувати її, переходимо в меню Preferences -> Select Color Scheme й обираємо «Monokai» або іншу тему.

Тепер налаштуємо відображення кодування веб-документу. Переходимо в меню Preferences -> Settings й перед закриваючими фігурними дужками додаємо рядок: "show_encoding": true

Переглянути активне кодування можна також з допомогою команди консолі Sublime Text: view.encoding()

Зберегти файл у вказаному кодуванні: File -> Save with encoding. Плагін для роботи з кодуваннями: EncodingHelper.

На замітку: щоб видалити будь-яке розширення (плагін або тему) в Sublime Text 3 необхідно в Менеджері пакетів прописати Remove package й обрати потрібний плагін зі списку.

Плагіни для Sublime Text

Нижче перелічу та коротко опишу найбільш популярні плагіни для комфортної роботи в редакторі Sublime Text.

Emmet

Emmet — один із основних плагінів, генератор HTML-розмітки, який допоможе кодити швидше та ефективніше.

Для встановлення переходимо в Preferences -> Package Control (або просто Ctrl+Shift+P). Введіть команду «Package control: Install package». 

Тепер введіть «Emmet» й оберіть пункт «Emmet for Sublime Text 3″. Отримаємо повідомлення, що плагін успішно встановлено.

Як працювати з плагіном Emmet?

Щоби перевірити його роботу, створимо файл index.html і спробуємо згенерувати HTML-код з допомогою Emmet: затисніть Shift й введіть знак оклику «!». З’явиться сніппет HTML-розмітки. Натисніть Tab, щоби застосувати його:

Як бачимо, одним кліком ми згенерувати повністю готову, валідну розмітку HTML-сторінки.

Давайте тепер згенеруємо метатег <H1>. Для цього просто введіть тег h1 й натисніть клавішу Tab — плагін згенерує відкритий і закритий тег <H1>:

Подібним чином можна генерувати будь-які інші теги.

Гарячі клавіші в 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>.

JavaScript & NodeJS Snippets

JavaScript & NodeJS Snippets – це плагін допоможе згенерувати фрагменти коду Java Script та NodeJS.

Встановлення: меню Preferences -> Package Control -> Install -> JavaScript & NodeJS Snippets.

Після цього створюємо js-файл і вводимо код — плагін автоматично запропонує сніппети. Натискаємо Tab або Enter. Готово. 

⏩ Сторінка плагіну на сайті Package Control>>

AdvancedNewFile

AdvancedNewFile – це плагін призначений для того, щоб швидко створювати та зберігати файли, без використання діалогового меню.

Запускаємо менеджер пакетів (Ctrl+Shift+P), вводимо команду Install і вводимо назву плагіну, натискаємо Enter.

Після встановлення просто натискаємо Ctrl+Alt+N і в командному рядку вводимо директорію та ім’я файлу.

⏩ Сторінка плагіну на сайті Package Control>>

GIT

Git – плагін інтегрує усі функції і сервіси технології GIT відразу в редакторі Sublime Text 3.

Встановлення: Package Control -> Install -> Git. В меню Tools з’явиться пункт Git, де можна застосувати різноманітні операції. 

⏩ Сторінка плагіну на сайті Package Control>>

ColorPicker

ColorPicker – це плагін для швидкого вибору кольору в hex-форматі із кругової палітри.

Встановлення: Package Control -> Install -> ColorPicker. Виклик палітри: Ctrl+Shift+C. 

⏩ Сторінка плагіну>>

Minify

Minify – це компресор веб-коду, який працює з CSS/HTML/JS/JSON/SVG.

Встановлення: Package Control -> Install -> Minify.

Попередньо необхідно також встановити середовище NodeJS в систему, а також необхідні бібліотеки:

npm install -g clean-css-cli uglifycss js-beautify html-minifier uglify-js minjson svgo

Застосування: відкриваємо файл з кодом, переходимо в меню Tools -> Minify. 

⏩ Сторінка плагіну>>

Sublime Linter

Лінтери — це форматувальники коду. Плагін SublimeLinter здійснює перевірку стилю та синтаксису веб-коду.

Встановлення: Package Control -> Install -> Sublime Linter.

Потім аналогічним чином встановити додаток Sublime Linter для конкретної мови програмування. Офіційний сайт плагіну>>

HTML-CSS-JS Prettify

HTML-CSS-JS Prettify – це ще один лінтер. З його допомогою зможете очистити, структурувати свій код, дотримуючись стилю і стандартів.

Форматувальник використовує бібліотеку Node.js, тому попередньо його треба встановити. Встановлення: Package Control -> Install -> HTML-CSS-JS Prettify. 

⏩ Сторінка плагіну>>

Решта плагінів:

• SmartMarkdown for Sublime Text 2 & 3
• Markdown Editing
• Dictionaries for Sublime Text
• WordCount
• WordHighlight
• ClickableURLs
• EncodingHelper
• Clipboard History
• PlainTasks

Гарячі клавіші Sublime Text

• Ctrl + Shift + P — менеджер пакетів;
• Ctrl + ` — командний рядок;
• F11 — повноекранний режим;
• F9 — сортує рядки в алфавітному порядку;
• F6 — перевірка правопису;
• Shift + F11 — вільний повноекранний режим;
• 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 + S — зберегти активний файл;
• Ctrl + Shift + S — викликати діалогове вікно «Зберегти як»;
• Ctrl + + — збільшити розмір шрифту в редакторі;
• Ctrl + – — зменшити розмір шрифту в редакторі;
• Ctrl + q — записати макрос;
• Ctrl + Shift + q — застосувати макрос;
• Ctrl + Alt + Shift + P — вивести назву контексту, в якому знаходиться курсор.