У цій статті я розповім що таке Sublime Text, як встановити та налаштувати один з найпопулярніших редакторів коду. Ознайомлю з його особливостями та перевагами, навчу як встановлювати плагіни, а також поділюся іншою корисною інформацією.
Особливості Sublime Text
Sublime Text — це кросплатформний редактор веб-коду, розроблений Джоном Спіннером у 2011 році на мовах програмування C++ та Python. Остання версія вийшла у 2013 році. Sublime Text є комерційним продуктом й розповсюджується за платною ліцензією.
Переваги 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 (плагін або тему) можна через Package Control – прописати Remove Package, обрати потрібний плагін зі списку та натиснути Enter.
Гарячі клавіші 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— вивести назву контексту, в якому знаходиться курсор.
Плагіни для 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 (Node і Npm), а також необхідні бібліотеки:
node --version
npm --version
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
Bonus: Як зареєструвати безкоштовно безлімітну версію Sublime Text?
Sublime Text – є умовно безкоштовним продуктом і потребує платну ліцензію, але ентузіасти дослідили один хакерський спосіб, який дозволяє кмітливим отримати його безкоштовно. Цей хак актуальний для збірки 4200.
- Переходимо в онлайн Hex-редактор https://hexed.it/
- Відкриваємо у ньому виконуваний файл Sublime Text:
~\Program Files\sublime_text.exe - В полі Go to вводимо: 0x00046B80 і тиснемо Enter
- Потрапляємо до HEX-рядка
0F B6 51 05 83 F2 01, який просто треба замінити наC6 41 05 01 B2 00 90 - Зберігаємо модифікований файл і поміщаємо його в папці з Sublime Text замість оригінального файлу (рекомендую зробити бекап).
- Тепер відкриваємо редактор Sublime Text і в меню About sublime Text бачимо “Unlimited User License”.
Автор: © Konrad Ravenstone, KR.Laboratories Research Labs
