Sublime Text для фронтэнд-розробника



Sublime Text на даний момент є одним з найпопулярніших текстових редакторів, використовуваних для веб-розробки, тому треба знати його переваги і недоліки. Замість того, щоб крок за кроком описати всі фічі Sublime Text, ця стаття познайомить вас із самими популярними прийомами і корисними плагінами, що дозволяють прискорити розробку.

Підсвічування синтаксису
Скоро настає 2015 рік, і за останні кілька років в інтернеті змінилося дуже багато - в CSS з'явилися нові можливості, JavaScript представили нову функціональність і синтаксис; також з'явилося безліч мов, компилируемых в HTML, CSS і JS.

Наступні плагіни забезпечать вам найкращу підсвічування синтаксису. Навіть якщо у вас встановлені плагіни для потрібних мов, не полінуйтеся ознайомитися з цим списком — можливо, ви захочете змінити деякі з них.

JavaScript Next — плагін, підсвічує синтаксис краще, ніж стандартний JavaScript-хайлайтер. До того ж цей плагін підтримує фічі EcmaScript 6, такі як модулі, класи, генератори і багато іншого.

Плагін CSS3 забезпечує підсвічування для кожної фічі з специфікації CSS3. Це означає, що ви можете використовувати будь-які можливості CSS3 — навіть ті, які реалізовані ще не повною мірою — і вони будуть коректно підсвічені плагіном.

Розробники, що використовують Sass, повинні встановити плагіни SCSS або Sass (в залежності від використовуваного синтаксису). Зверніть увагу на те, який саме плагін ви встановили. Поширена помилка — встановити плагін Sass, але при цьому використовувати синтаксис SCSS, і навпаки.



Зрозуміло, також існують плагіни для підсвічування синтаксису Stylus і Less.

Пишете на CoffeeScript? Переконайтеся, що у вас встановлений плагін Better CoffeeScript. Важливо використовувати саме його, так як офіційний плагін CoffeeScript більше не підтримується його розробниками. Також доступний плагін для підсвічування синтаксису TypeScript.

Плагін Haml розширює стандартні можливості для роботи з Haml і підсвічує також код на інших мовах, записаний в haml-файлі: JS, CSS, Sass і так далі. Плагіни Slim і Jade додають можливість підсвічування синтаксису цих мов.

Плагіни
Sublime багато в чому зобов'язаний своєю популярністю співтовариства, яке створило таку велику кількість корисних плагінів. Якщо ви — новачок, то знайте, що управління плагінами проводиться через Package Control.
Можна весь день обговорювати кращі плагіни для Sublime Text (я сподіваюся, що саме цим ви і займетеся в коментарях), однак у цій статті ми розглянемо must-have плагіни для фронтэндера.

Color Highlighter
При роботі з таблицями стилів корисно мати якесь наочне уявлення того, як виглядає той чи інший колір. Color Highlighter буде сканувати вашу таблицю стилів і підсвічувати всі кольори, зафарбовуючи фон тексту в той колір, який вказаний. Також є можливість налаштувати плагін так, щоб він підкреслював кольору або ставив маркер потрібного кольору ліворуч від коду.



Нещодавно в Color Highlighter була додана підтримка Sass, Less та Stylus змінних, завдяки чому цей плагін стає придатним практично для будь-якого робочого оточення.

Emmet
Практично всі знають про Emmet, і багато його використовують ще з тих пір, коли він називався «Zen Coding». Однак, я часто бачу, що розробники випускають з виду досить корисні можливості цього плагіна.

HTML

Emmet чудовий для швидкого написання розмітки. Просто надрукуйте css-селектори для потрібної вам розмітки, і натисніть tab. Використовуєте Jade, Slim або Haml? Emmet працює з ними так само добре, як і з HTML.

Emmet

Подивіться трохи прикладів використання Emmet. Також не забудьте подивитися шпаргалку з синтаксису, в якій описані всі можливості для роботи з розміткою.

  • element
    +
    tab
    створює елемент і позиціонує курсор всередині нього.
    • span
      +
      tab
      <span></span>

  • element.className
    або
    element#ID
    +
    tab
    створює елемент із зазначеним класом або ідентифікатором.
    • span.hello
      +
      tab
      <span class="привіт"></span>

    • p.odd.warning
      +
      tab
      <p class="odd warning"></p>

    • div#contact
      +
      tab
      <div id="contact"></div>

  • element>childElement
    +
    tab
    створює вкладені елементи.
    • ul>li
      +
      tab
      <ul><li></li></ul>

  • [element*5]
    +
    tab
    створює зазначений елемент стільки разів, скільки вказано.
    • p.hello*2
      +
      tab
      <p class="привіт"></p><p class="привіт"></p>



Також ви можете використовувати символ $ в якості лічильника. Використовуйте $$ для лічильника, який починає відлік з нуля.

li.item$*3
+
tab


<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>


Квадратні дужки використовуються для вказання атрибутів елемента, фігурні — для вказівки контенту.

figure*2>img[src="dog$.jpg"]+figcaption{This is dog $}


<figure>
<img src="" alt="">
<figcaption>This is dog 1</figcaption>
</figure>
<figure>
<img src="" alt="">
<figcaption>This is dog 2</figcaption>
</figure>


CSS

Вивчення можливостей Emmet в CSS - це одна з найкращих інвестицій для фронтэндера. Це не тільки підвищить швидкість розробки, але і допоможе запобігти часто чинені помилки.

В CSS emmet працює за допомогою скорочень, що нагадують пари властивість/значення. Немає чітко визначених скорочень, emmet працює на основі так званого fuzzy matching - він робить вибір, яке використовувати властивість, на основі того, що ви ввели.

Приклади:

  • posrel → position: relative;
  • posab → position: absolute;
  • fl → float:
  • fr → float: right;
  • db → display: block;
  • dib → display: inline-block;
  • tdn → text-decoration: none;
  • c → color: #
  • w → width:
  • w100 → width: 100px;
  • w100p → width: 100%;
  • p → padding:
  • p10 → padding: 10px;
  • p10p → padding: 10%;
  • bt1-s-red → border-top: 1px solid red;


Ви зрозуміли ідею — непогано б натренувати ваш мозок, щоб ви могли на льоту використовувати цю техніку замість друкування повних пар властивість/значення.

Sublime Linter
Перевірка коду є вельми важливою частиною процесу розробки. Якщо ви ніколи раніше не використовували linter, то знайте, що це інструмент для перевірки якості коду. Він перевіряє код на помилки і використання поганих практик.

За допомогою Sublime Linter ви можете легко перевірити практично будь-код. Як фронтэндеры, ми повинні перевіряти наш JavaScript і, по можливості, CSS. Якщо ви зробите помилку в коді, Sublime Linter підсвітить її невеликим червоним кружком.

Sublime Linter

Теми і колірні схеми
Все ще використовуєте стандартну тему і колірну схему? Напевно, варто ознайомитися з іншими темами і колірними схемами. Є два шляхи змінити зовнішній вигляд саблайма. Колірна схема міняє кольори підсвічування синтаксису, в той час як тема змінює колір елементів інтерфейсу, таких як вкладки, сайдбар тощо.

В останній збірці Sublime Text 3 з'явилася можливість розмістити в сайдбарі різні іконки для файлів.

Подивіться кілька популярних тем для Sublime Text:

Solarized Dark
Solarized — це фантастична тема, яка доступна в багатьох текстових редакторах. Вона стала улюбленою стандартною темою багатьох розробників.

Solarized Dark

Cobalt2
Cobalt2 це моя власна тема, яка відлагоджувати і вдосконалювалась на протязі п'яти останніх років. Вона заснована на оригінальній темі Cobalt і має безліч поліпшень. Акцент у цій темі зроблений на чистоті і яскравому контрасті.

Cobalt2

Seti UI
Досить молода тема, має темний дизайн з акцентом на синій колір.

Seti UI

GoTo anything
Якщо ви переходите на саблайм з іншого текстового редактора, то ви, напевно, звикли до сайдбару і навігації по файлам з вашого старого редактора. Sublime представляє концепт GoTo anything. У найпростішому випадку ви можете використовувати його, щоб відкрити будь-який файл з папки вашого проекту. Просто натисніть ctrl+p, і відкриється поле зі списком файлів. Введіть навзание потрібного файлу та натисніть enter. Це поле пошуку підтримує fuzzy matching, так що вам не доведеться турбуватися про правильності набраного назви або про правильному шляху до файлу.

Крім того, GoTo anything підтримує зазначення номера рядка в фалі (jquery.js:205), номери символу (jquery.js:205:15), і цілого слова (jquery.js@ajax), що дозволяє швидко переходити до потрібних функцій, методів чи селекторам.

GoTo anything

Ваша думка
Sublime Text повний корисних функцій і плагінів. Їх стільки, що вистачить на книги!

Поділіться в коментарях своїми улюбленими плагінами і прийомами.

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.