Текстовий редактор коду Sublime Text

В попередній статті я проводив огляд набору інструментів для верстки сайтів. Сьогодні ж детально розповім про один із них, а саме про Sublime Text.

Встановлення

Що ж почнемо. Щоб встановити редактор Вам достатньо завантажити його на офіційному сайті. Вам потрібно завантажувати саме ту версію під вашу операційну систему. Раніше я згадував що у Sublime Text є версії для Linux, OS X та звичайно Windows. То ж обирайте те що вам потрібно і продовжимо.

Процес встановлення редактора стандартний:

Install Sublime Text 3

Зауважте на скільки мало місця займає програма. Всього ~23Mb.

Install Sublime Text 3 Step 2

При вибраній галочці у контекстне меню будуть додані певні пункти повязані із редактором. Які як на мене спрощують роботу.

install-sublime-text3-step3

install-sublime-text3-finish

Інтерфейс

Перше враження про програму вони красива із коробки. Гарно підібрані шрифти, кольорова схема, плавна анімація.

sublime-text3

Доречі схеми оформлення редактора можна змінювати. Preferences -> Color Scheme
Їх є дуже багато на любий смак.

sublime-text3-color-scheme

Справа у вікні у нас розміщено карту коду. Своєрідна міні карта усього файлу. Допомагає орієнтуватись по файлу та спрощує прокрутку сторінки.

Зліва може бути розміщено панель проекта та відкритих файлів (View -> Side bar -> Show side bar Панель проекта – дерево підключених до проекту папок із спрощеною можливістю файлового менеджменту. Для прикладу є можливість створення нових файлів/папок, переіменування та видалення.

Плагіни

Жоден текстовий редактор такого рівня не може обійтись без плагінів. Встановити плагін можна просто копіювавши його в під-каталог User. Самий простий спосіб знайти цей каталог Preferences -> Browse packages. Та все ж є більш простий та правильний спосіб для більшості випадків – використання PackageControl. Далі детальніше.

PackageControl

Втановлення цього плагіна вельми не очевидне. З початку переходимо на сторінку плагіну. Натискаємо зелену кнопку install і попадаємо на сторінку із детальною інформацією по встановленню. На момент написання статті інструкція складалась із частини коду (відповідно до версії яку ви встановлюєте) який потрібно було скопіювати у консоль редактора Ctrl+` View > Show Console та нажати enter. На цьому усі незручності закінчуються, дальше все піде як по маслу ).

Якщо PackageControl встановився правильно він появиться у Preferences ->Package Settings

sublime-text3-packagecontrol

Із PackageControl встановлення та видалення необхідних плагінів простіше простого. Для встановлення плагіна потрібно викликати пошук Ctrl + Shift + P і ввести Install Package або ж достатньо всього «ins»

install-package

У вікні Install Package потрібно ввести назву плагіна вибрати його із списку та нажати enter.

install-package-emmet

Наведу декілька плагінів які я використовую:

  • Emmet — це інструмент для прискорення роботи із HTML та CSS. В основі плагіна лежить механіз динамічних абрівіатур із яких генерується готовий фрагмент коду. Для написання абрівіатур використовується синтаксис, похожий на CSS-селектори але із деякими доповненнями.
  • SublimeCodeIntel — багатофункціональний автокомпліт. Який доречі підтримує безліч мов JavaScript, Mason, XBL, XUL, RHTML, SCSS, Python, HTML, Ruby, Python3, XML, XSLT, Django, HTML5, Perl, CSS, Twig, Less, Smarty, Node.js, Tcl, TemplateToolkit, PHP.

Повірте ці плагіни економлять ваш час.

Snippets

Це заздалегідь заготовлені шматки коду, з розставленими в них якорями. Дуже зручно. Коли ви часто у коді використовуєте одні і ті ж шматки. Я для прикладу використовую для вставки у файл стилів конструкцію -webkit-border-radius: ;-moz-border-radius: ;border-radius: ; де достатьньо ввести значення і все.

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

Вам вже є 18 років?

Для переходу по цьому посиланню ви повинні підтвердити, що вам виповнилось 18 років.

Мені немає 18 Мені вже є 18