Як це працює?
Натиснути заздалегідь задданое поєднання клавіш, і ви отримаєте:
Непогано, чи не так? =)
- Sublime Text
- Atom
- Eclipse / Aptana
- TextMate
- Chocolat
- Komodo Edit
- Notepad ++
- Brackets
- NetBeans
- Adobe Dreamweaver
Повний список можна подивитися тут
Установка Emmet в Sublime Text 3
Для початку скачайте архів з плагіном. і разорзівіруйте вміст в папку Packages, що б дізнатися де вона знаходиться, відкрийте Sublime text. і в меню Preferences клікніть по пункту «Browse Packages».
Перезайти в Sublime. що б перевірити працездатність, введіть «div», і натисніть «Ctrl + e», якщо все добре, то може статися 2 речі.
- Плагін спрацює і рядок «div» розкриється в « »
- Вискочить повідомлення про те що вам потрібно почекати поки скочується «PyV8», тут немає нічого страшного, просто почекайте пару хвилин і спробуйте ще раз
Установка Emmet в Notepad ++
- Відкриваємо N ++
- В меню Модулі, запускаємо «Plugin manager -> Show Plagin manager»
- У списку плагінів знаходимо «Emmet», виділяємо його і натискаємо «install»
- Plugin manager запропонує так само встановити «Python script», погоджуємося.
- Після нетривалої завантаження, нам потрібно буде перезавантажити N ++.
- Тепер, давайте зайдемо в «опції -> гарячі клавіші -> Plugin commands».
- Для роботи, нам, як мінімум, потрібно встановити гарячі клавіші для «Expand Abbreviation» і «Wrap with Abbreviation» (за замовчуванням стоїть «Ctrl + Alt + Enter» і «Ctrl + Alt + Shift + Enter», що не дуже зручно) , я поставив «Alt + Z» і «Ctrl + Alt + Z», тут потрібно бути акуратніше, дане поєднання не повинно бути зайнято.
- Пробуємо ввести «div», і розгорнути абревіатуру «Alt + Z», якщо все добре, то отримаємо « »
Якщо Emmet не працює
якщо вискакує помилка «Uncnown exception», це означає що вам потрібно оновити «Python script», викачуємо його тут. встановлюємо як звичайну програму і радіємо =)
команди Emmet
Мене не дуже радує забивати основні теги для HTML-документа кожен раз, раніше я просто тримав в запасі шаблон, який копіював в потрібну папку і починав роботу, Emmet це сильно спрощує, ми можемо ввести:
Розкрити скорочення, і отримати
Якщо ви не іспользуетете Html 5, то можна також використовувати «html: xt» для XHTML і «html: 4s» для HTML4.
Якщо ми хочемо просто вивести окремий тег, то, відповідно, пишемо його назву, при цьому нам не потрібно турбуватися про закриття тега, і необхідні атрибути, Emmet це бере на себе.
Як ви напевно вже зрозуміли, «+» допомагає вивести 2 послідовних тега. Що-б отримати вкладений тег використовується оператор «>». Наприклад, зі скорочення
після розкриття вийде
Що-б повторити якийсь елемент кілька разів використовується оператор «*», трохи доповнимо попередній приклад, і отримаємо:
Що-б не заплутатися у вкладеннях, теги можна групувати:
Якщо потрібно вивести інші атрибути, використовуємо квадратні дужки:
Фігурні дужки використовуються для виведення вмісту:
А що якщо при виведенні кількох елементів за допомогою множення, нам потрібно дати їм різні класи (або різний вміст)? Це теж можливо
Якщо ми хочемо змінити початкове число то пишемо «$ n», де n - число з якого потрібно почати відлік.
Що-б відлік йшов на зменшення, після «$» потрібно додати «@ -"
Іноді буває, що якийсь тег потрібно підняти на рівень (пару рівнів) вгору. Тут допоможе оператор «^». Припустимо, що ми вбиваємо HTML-структуру для шапки сайту:
У Emmet є ще одна фішка яку можна назвати неявним ім'ям тегів:
При чому, emmet сам може зрозуміти який тег підставити в залежності від ситуації
Останнє про що хотілося б розповісти щодо HTML, ми може не тільки розгорнути команду Emmet в какой то HTML-код, а й обгорнути звичайний текст HTML-тегами.
Стандартна ситуація, ми верстаємо шапку сайту, і скопіювали з фотошопа текст для елементів меню:
Прописати для кожної пункт меню можна, і багато хто так робить, але давайте спробуємо це прискорити, використовуємо команду «Wrap with Abbreviation» (в sublime - Shift + Ctrl + G. В N ++ - Alt + Ctrl + Z), і у вікні пишемо :
після чого отримаємо:
Emmet зробить всю роботу за нас, дух вже захопило, від можливостей, що відкрилися?)
Дуже часто при верстці використовується так звана «Риба», тобто нічого не значущий текст, який виглядає в шаблоні значно краще, ніж хаотичний набір букв, в Emmet є вбудований генератор.
Можна обмежити виведене кількість слів:
Основне розібрали, крім HTML, Emmet дозволяє також скоротити введення CSS коду, хоча тут все не так здорово.
Ви можете ввести першу букву будь-якого властивості, і значення:
Якщо пікселі вам не підходять, то можливі й інші варіанти:
• p →%
• e → em
• x → ex
Багато властивостей, починаються з однієї літери, для уточнення, можна написати кілька перших букв, або декілька довільних букв, Emmet постарається знайти максимально відповідний варіант:
Emmet Вивів властивість з префіксами для основних браузерів, так як воно ще досить нове. Якщо ви хочете додати префікси для будь-якого іншого свойсва, то перед ним треба поставити тире: