Опубликовано: вторник, 16 ноября 2021 г. в 19:00

Vim: Стань HTML-ниндзя с Emmet

Источник: «Become a Html Ninja with Emmet for Vim»

Мы рассмотрим несколько возможностей Emmet плагина для vim на конкретных примерах, и к концу этой статьи вы будете выдавать html-код, как по волшебству, и вам будет интересно узнать больше!

Вы, вероятно, читали, как много опытных виммеров проповедуют о чистоте vim и изучении нативных функций вместо установки плагинов, и это правильный образ мышления, имеет смысл избегать установки плагинов, которые не дают ничего, кроме встроенных функций vim в причудливом виде. Но, это не значит, что вам вообще следует избегать установки каких-либо плагинов!

Есть отличные плагины повышающие производительность и Emmet один из них.

Emmet - необходимый инструмент для веб-разработчика

Emmet - это плагин доступный для большинства текстовых редакторов и IDE, он предоставляет инструментарий, который вам понравится и вы никогда не откажитесь от него.

Мы рассмотрим несколько его возможностей на конкретных примерах, и к концу этой статьи вы будете выдавать куски html кода, как по волшебству, и вам будет интересно узнать больше!

Инсталляция и настройка

В этом примере мы будем использовать Vim-Plug для инсталляции Emmet, но вы можете использовать менеджер плагинов на свой выбор.

Инсталляция

Откройте свой .vimrc-файл и добавьте строку Plug 'mattn/emmet-vim' между строк вызова Vim-Plug

"-- PLUGINS (Using junegunn/vim-plug)
call plug#begin()
Plug 'mattn/emmet-vim'
call plug#end()

Перезапустите свой .vimrc-файл с помощью команды :source ~/.vimrc
Установите плагин Emmet командой PlugInstall

Настройка

Эта часть представляет личную конфигурацию, которую я считаю очень полезной, и думаю, что она может быть полезна вам.

Основная команда для выполнения магии Emmet в vim - это комбинация <C-y>,. Это означает, что вы должны нажать Ctrl + y за которыми следует , запятая. На мой взгляд, это слишком много даже для такой полезной функции, которая всегда должна быть под рукой.

Если вы читали документацию Emmet-vim, это побудит вас переопределить триггерную комбинацию (комбинация клавиш <C-y>). Я решил, что удобнее запускать его , (запятой, которая у меня так же <leader> клавиша).

По умолчанию клавиша <leader> назначена на \, но вы можете через команду :let mapleader = "," назначить другую клавишу (в данном случае , )

Вы можете это сделать добавив следующую строку в свой .vimrc-файл:

let g:user_emmet_leader_key=','

"-- EMMET CONFIG --
" redefine trigger key
let g:user_emmet_leader_key=','

Мы заменили комбинацию <C-y> на простую , (запятую)

Итак, моя команда для вызова магии Emmet: ,, (запятая запятая), простая и удобная для пальцев.

Давай попробуем

Как вы могли заметить на первой гифке, Emmet позволяет вам набрать сокращение, которое станет html-фрагментом.

Мы возьмём тот пример и разберём его шаг за шагом, что бы понять синтаксис и что происходит.

Emmet-vim предлагает команды, которые можно использовать как в режиме вставки, так и в нормальном режиме, но в этом примере мы сосредоточимся только на режиме вставки.

HTML шаблон

Первый базовый сниппет - это базовый html шаблон:

Нажмите i для перехода в режим вставки
Напечатайте html:5
и нажмите ,, (запятая запятая)

Создание HTML тэгов по имени

На первой гифке после добавления шаблона html мы ввели странную команду, которая вставила <div> с множеством вещей внутри.

Давайте сфокусируемся только на теге <div>! Emmet создаёт тег из каждого имени, которое вы вводите, давайте попробуем:

Напечатайте div
и напечатайте ,, (запятая запятая)

...и давайте попробуем кое-что ещё:

печатаем myname
и печатаем ,, (запятая запятая)

Да, вы можете использовать его со своими именами компонентов React.js!

Дочерний оператор

Следующим шагом, к нашей команде добавим дочерний оператор >, он используется для добавления дочернего html элемента, объявленного перед ним.

Давайте добавим <div> с <p> внутри, который содержит ссылку <a href="">

печатаем div>p>a
и печатаем ,, (запятая запятая)

Операторы атрибутов

Вы можете задать атрибуты для html элементов, как в CSS

Давайте попробуем в предыдущий пример добавить класс .container к <div> и идентификатор #foo к тегу параграфа.

Печатаем div.container>p#foo>a
и печатаем ,, (запятая запятая)

Оператор нумерации и умножения элементов

Последние неизученные элементы синтаксиса нашей странной команды на первой гифке, это нумерация элементов $ и оператор умножения *.

Вы, вероятно, уже использовали оператор умножения. Это довольно просто, вы используете его с числом после элемента, который хотите умножить. И он будет добавлен в том количестве, которое вы определили.

Допустим, вам нужен <div> с пятью <p> внутри, просто печатаете div>p*5:

Итак, с помощью оператора умножения * вы можете повторять элементы, но с оператором $ вы можете нумеровать их. Поместите оператор $ внутри имени элемента, имени атрибута или значении атрибута, чтобы получить текущий номер повторяющегося элемента.

Давайте дадим предыдущим пяти <p>, разные идентификаторы #foo, с порядковым номером, что бы отличать их друг от друга:

печатаем div>p#foo$*5
и печатаем ,, (запятая запятая)

Поздравляю! У тебя получилось

Та команда из первой гифки больше не выглядит такой странной! Попробуйте сами и немного измените команду, что бы увидеть, что получится!

div>p#foo$*5>a

И хорошая новость в том, что это только начало того, что может предложить Emmet. Вы можете улучшить свои навыки написания HTML и React.jsx с помощью возможностей Emmet.

Вот пара ссылок, по которым вы можете найти более интересную информацию по этой теме: