НОВОЕ

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

Sublime Text 3

Sublime Text 3 – кросплатформний редактор веб-коду, розроблений Джоном Спіннером у 2011 році, написаний на мовах програмування C ++ та Python. Остання версія 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 3

Знайомство з редактором Sublime Text 3

Переваги Sublime Text

  • Легкий, компактний, займає мінімум дискового простору, споживає мінімум оперативної пам’яті
  • Дружній і функціональний веб-інтерфейс (відмінне, продумане юзабіліті для веб-розробника)
  • Багатомовність, підтримка тем, плагінів, модулів, розширень
  • Підтримка сніппетів (шаблонів, заготовок веб-коду)
  • Універсальний, може бути встановлений на різних операційних системах (Windows/Linux/MacOS)
  • Підтримка макросів
  • Підтримка функції автозбереження

Недоліки Sublime Text

  • Sublime Text є комерційним продуктом й розповсюджується за платною ліцензією. Ціна – 59 USD.

Встановлення Sublime Text 3

Встановлення редактора коду Sublime Text 3

Завантажити програму можна за посиланням:

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

Встановлення Package Control (менеджера пакетів)

Package Control – це менеджер пакетів в редакторі Sublime Text, який здійснює доступ до репозиторію (сховища) додатків, розширень, плагінів для Sublime Text. Для його встановлення переходимо в меню програми: Tools -> Install Package Control. Отримуємо сповіщення, що менеджер пакетів успішно встановлено. Тепер з його допомогою ви зможете встановлювати плагіни, теми та будь-які інші додатки.

Install Package Control in Sublime Text 3

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

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

Плагін Emmet

Emmet – генератор HTML-розмітки, який допоможе писати код швидше та ефективніше. Для встановлення переходимо в Preferences -> Package Control (або просто Ctrl+Shift+P):

Install Emmet in Sublime Text 3

Введіть команду “Package control: Install package”:

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

Тепер введіть “Emmet” й оберіть пункт “Emmet for Sublime Text 3″:

Emmet for Sublime 3

Отримаємо повідомлення, що плагін Emmet успішно встановлено:

Emmet

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

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

Emmet html snippets

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

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

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

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

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

Плагін допоможе згенерувати фрагменти коду Java Script та NodeJS. Встановлення: меню Preferences -> Package Control -> Install -> JavaScript & NodeJS Snippets.

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

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

Плагін AdvancedNewFile

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

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

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

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

Плагін GIT

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

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

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

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

ColorPicker

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

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

Виклик палітри: Ctrl+Shift+C

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

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

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

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

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

Офіційний сайт плагіну>>

HTML-CSS-JS Prettify

Ще один лінтер. З його допомогою зможете очистити, структурувати свій код, дотримуючись стилю і стандартів. Форматтер використовує бібліотеку Node.js, тому попередньо його треба встановити.

Встановлення: Package Control -> Install -> HTML-CSS-JS Prettify

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

Теми для Sublime Text

Тепер встановимо тему для оформлення й підсвітки синтаксису в редакторі Sublime Text 3. Я використовую класичну тему “Spacegray Monokai”, хоча можна обрати й інші, до прикладу найбільш популярні: Dracula, Guna, Agila, Freesia, Cobalt2, Cyanide, Phoenix, Soda.

Встановлюємо через Менеджер пакетів (Ctrl+Alt+P): Preferences -> Package Control -> Install-> Monokai – Spacegray:

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

Щоби застосувати тему, переходимо в меню Preferences -> Color Scheme й обираємо “Monokai”:

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

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

Перегляд кодування в Sublime Text

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

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

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

Плагін для роботи з кодуваннями: EncodingHelper.

Гарячі клавіші (hot keys) Sublime Text 3

  • 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 – вивести назву контексту, в якому знаходиться курсор;

Корисні посилання

Оценка:
( 2 оцінки, середнє 5 з 5 )
Подписка на KRASHENININ.TECH

Получайте регулярные обновления на почту!


Виталий Крашенинин/ автор статті
Засновник блогу, публіцист, оглядач веб-технологій, ІТ-спеціаліст. Дослідник цифрового світу. Сфокусований на кібербезпеці, системному адміністрування та веб-розробці й SEO.
Не забудьте поделиться материалом в соцсетях:
Krasheninin.tech - блог про веб-технології, і не тільки
Подписаться
Уведомление о
guest
0 Комментарий
Встроенные отзывы
Просмотреть все комментарии
0
Есть мысли? Прокомментируй!x
()
x
Read previous post:
Словник веб-розробника

Як зрозуміти веб-розробника? Вивчаємо основні терміни по фронтенду і бекенду. Розшифровка мови веб-програмістів. Корисний словник по базовим поняттям.

Close