Плагін emmet для sublime text.

Ви до сих пір пишіть теги html і css властивості вручну? Прийшов час це виправити! Сьогодні ми поговоримо про плагіні emmet, який допоможе нам в цьому.

Emmet - це плагін, який дозволить вам писати html і css в десятки разів швидше. Багато вже використовують його в своїх проектах, але багато про нього ще нічого не знають, і сьогодні я спробую виправити це.

Для початку його потрібно встановити. В Sublime Text, про який недавно була написана стаття, це робиться дуже просто. Відкрийте command palette, натиснувши поєднання клавіш cmd + shift + p, або перейдіть в пункт tools і виберіть там command palette. тепер введіть "Install package" та натисніть enter. далі ввести "Emmet" і знову натисніть enter. Після того, як плагін завантажиться і встановиться, запустіть Sublime Text.

Установка завершена, і тепер ми можемо почати користуватися плагіном emmet. Введіть

div

А тепер натисніть клавішу tab. В результаті цих нескладних дій ми отримаємо відкриває і закриває тег div, а курсор буде встановлений всередині, між ними.

Точно так само можна робити з будь-якими тегами. Наприклад, давайте створимо посилання.

a

тепер натисніть tab, і ми отримаємо наступне

href=""gt;

Як бачите, emmet додав атрибут href самостійно. Якщо ж ви введете img, то там відразу будуть атрибути src і alt.

Тепер розглянемо, як добаблять класи і id. Робиться це точно так же, як і в css: Клас за допомогою ., а id за допомогою #

.block

В результаті отримаємо

class="Block"gt;

Те ж саме і з id

#block

отримаємо наступне

id="Block"gt;

Зауважте, що я не писав слово div, а просто ставив крапку або грати і писав потрібний мені клас або id. Справа в тому, що ми можемо пропускати назву тега і тоді emmet сам буде додумувати, якою ж тег поставити. У більшості випадків це буде div, але, якщо ви, наприклад, напишіть так всередині тега ul, то тег буде li з потрібним класом або id.

Якщо ви хочете самі ввести якийсь атрибут, то напишіть його в квадратних дужках

div[data-attribute="Value"]

отримаємо наступне

Відео: Блискавична розробка: Ставимо Emmet і LiveReload (LiveStyle)

data-attribute="Value"gt;

Щоб вкладати теги всередині інших тегів, потрібно використовувати знак більше

ulgt;ligt;a

отримаємо наступне

Відео: ЯК ВСТАНОВИТИ "Emmet" НА Sublime Text 3

 
href=""gt;

За допомогою символу * можна вказати, скільки таких тегів нам потрібно

ulgt;li*5

Ось, що у нас вийде

Якщо вам потрібно додати тег на тому ж рівні, використовуйте знак +

#containergt; .left + .right

результат

id="Container"gt; 
class="Left"gt; 
class="Right"gt;

За допомогою символу $ ми можемо вказати, що кожен тег слід нумерувати автоматично

ulgt;li.item $*5

результат

 
class="Item1"gt; 
class="Item2"gt; 
class="Item3"gt; 
class="Item4"gt; 
class="Item5"gt;

Якщо вам потрібен ведучий нуль, то напишіть знак $ 2 рази, якщо 2 провідних нуля, то 3 знака $ і т.д.

Якщо ви хочете додати всередині тега текст, то його потрібно вказати в фігурних дужках

a{Some text}

результат

href=""gt;Some text

Якщо під час верстки вам потрібен якийсь текст, то просто напишіть lorem

lorem

результат

Відео: Як встановити sublime text 3 і плагін emmet

Lorem ipsum dolor sit amet, consectetur adipisicing elit.Quae, mollitia quibusdam voluptatibus fuga dolorem officiis animi error ex ea ipsa excepturi incidunt quis sunt ducimus rerum corrupti obcaecati ipsum quisquam.

Якщо вам потрібна якась певна кількість слів, то напишіть цифру, що позначає кількість слів після.

lorem3

результат

Lorem ipsum dolor.

щоб створити html структуру, просто напишіть знак !

!

результат

 
lang="En"gt; 
 
charset="UTF-8"gt; 
Document

Тепер поговоримо про те, як emmet допоможе нам в css

Там досить просто написати початкові літери властивості і значення, а потім натиснути tab. наприклад

m10

В результаті отримаємо

margin:10px-

У деяких властивостях вже стоять значення за умовчанням. Наприклад, у властивості text-align

ta

результат

text-align: left-

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

Відео: Більш ефективна розробка - Emmet

tac

результат

text-align: center-

Все розглядати немає сенсу. Документацію по плагіну emmet ви можете знайти тут: https://docs.emmet.io/cheat-sheet/

Насамкінець варто сказати, що якщо вам з якихось причин не подобається клавіша tab, то ви можете поміняти її. Для цього треба зайти за наступним шляхом: Perferences-gt;Package Settings-gt;Emmet-gt;Key Bindings - default. Використовуйте пошук (cmd + f або перейдіть по шляху Find-gt; Find) За допомогою пошуку знайдіть команду "Expand_abbreviation_by_tab". Вище неї, в масиві keys, в лапках написано "Tab". Змініть це значення на своє, наприклад, на "Ctrl + e". Але це не зовсім правильно. Краще буде, якщо ви скопіюєте весь цей об`єкт і вставите його в файл Key Bindings - User, а там вже міняйте поєднання клавіш. Зроблено це для того, щоб якщо що, ви могли повернути всі настройки за замовчуванням за допомогою файлу Key Bindings - Default.

Отже, на цьому все. Сьогодні ми розглянули плагін emmet для текстового редактора Sublime Text. Якщо ви використовуєте інший редактор, то пошукайте цей плагін для нього в інтернеті. Успіхів!

Поділися в соціальних мережах:

Схожі