О существование плагина Emmet многие разработчики знают уже давно, ничего нового для действующих разрабов я не расскажу, статья будет ориентированна на начинающих, для тех, кто еще не знаком с быстрым написанием кода с помощью плагина Emmet.
Emmet - это специальный плагин для редакторов кода, который содержит в себе синтаксис сокращений, позволяющих писать код html и css в разы быстрее.
В большинстве реакторов, Emmet идет из коробки, но не на всех, так что проверяйте заранее. К примеру в Visual Studio Code и Atom, Emmet установлен сразу.
В Emmet есть большое количество команд (сокращенных записей), все запоминать не обязательно, достаточно будет самых часто используемых.
Перейдем к самим командам.
HTML
Дочерний элемент >
Сокращение: div>ul>li
Результат:
Соединить +
Сокращение: div+h2+p
Результат:
Приумножить *
Сокращение: ul>li*3
Результат:
Нумерация $
Сокращение: main>div.col_$*3
Результат:
id элемента
Сокращение: #header
Результат:
сlass элемента
Сокращение: .header
Результат:
Также простыми сокращениями в виде - img, input, a, map, obj, link и многие другие, вы сможете создать одноименные теги.
Результат будет таким:
CSS
Сокращения:
1. pos
2. posa
3. posr
4. posf
5. d
6. dn
7. di
8. dib
9. cup
10. mt
11. mr
12. mb
13. ml
14. также и с padding
15. ff
16. ta
17. td
18. ts
19. c
20. bd
Результат:
Заключение
Здесь приведены далеко не все сокращения html и css, их намного больше и с ними очень удобно и быстрее писать код. Пользуйтесь Emmet, он сделает процесс кодирования проще.
Ознакомиться с плагином и его возможностями, вы сможете на официальном сайте: https://emmet.io/.