Zen Coding Emmet в Notepad ++ для лучшей и быстрой веб-разработки

Emmet, ранее называвшийся Zen Coding, представляет собой плагин для большинства популярных текстовых редакторов, который значительно повышает эффективность и точность кодирования HTML и CSS. По сути, это важный набор инструментов для веб-разработчиков, которые, ну, не используют такие инструменты, как Visual Studio.

Как кодировщик, мы все знаем, что такое сниппет есть, и все мы храним их часть, чтобы повысить продуктивность программирования. Но Эммет выводит идею этого фрагмента на совершенно новый уровень: вы можете вводить CSS-подобные выражения, которые можно динамически анализировать, и выводить результат в зависимости от того, что вы вводите в сокращении.

Ну, а что значит точно значит для веб-разработчика? А почему так хорошо? Позвольте мне показать вам несколько примеров. Поскольку я использую Notepad ++ в качестве основного редактора, я собираюсь показать эти примеры с помощью Notepad ++.

Подготовка Notepad ++ для Emmet

Откройте Notepad ++, перейдите в Плагины и Диспетчер плагинов. Отметьте Emmet в списке и нажмите Установить .

Перезапустите Notepad ++, и все готово.

Как его использовать

Введите в очень простом синтаксисе Emmet, перейдите в меню Plugins, Emmet и выберите Expand или другую команду. Или вы можете использовать быстрое сочетание клавиш, например Ctrl + Alt + Enter .

А теперь повеселимся.

Печатайте! или html: 5 и нажмите Ctrl + Alt + Enter. Вот что вы получите:

Чтобы облегчить боль при написании стандартной строки тега html, такой как a, div, .class, мы можем сделать

Введите a и нажмите Ctrl + Alt + Enter, чтобы отобразить с мигающим курсором в середине двух кавычек.

Введите .class и нажмите Ctrl + Alt + Enter, чтобы получить

.

Введите #id и нажмите Ctrl + Alt + Enter, чтобы получить

.

Даже лучше, вы можете использовать оператор для вложения элементов друг в друга. Например:

Введите div> ul> li и нажмите Ctrl + Alt + Enter, вы получите это, с мигающим курсором в первом li .

Хотите строку комментария? Введите C и нажмите Ctrl + Alt + Enter.

Чтобы сгенерировать фиктивный текст «Lorem ipsum», введите lorem или ipsum и нажмите Ctrl + Alt + Enter. Чтобы повторить их 5 раз в абзацах, введите p * 5> lorem и нажмите Ctrl + Alt + Enter.

Довольно интересно, не правда ли? Но мы коснулись только поверхности Эммета. Мы даже не упомянули, как это работает в расширении CSS.. Но я позволю вам во всем разобраться. Документация Emmet также хорошо написана, ее легко понять и следовать.

Примеры, показанные в этом посте, сделаны в Notepad ++, но Emmet поддерживает многие другие, почти все популярные из них покрыты, включая Sublime Text, Vim, TextMate, Eclipse, Code, CodeMirror и т. Д. И т. Д.

Итак, удачного кодирования Zen.

Оцените статью
toodcast.ru
Добавить комментарий