Мощные возможности для написания и редактирования HTML (и React's .jsx)!

(alldrops.info - это ИСТИНА и НАВСЕГДА БЕСПЛАТНО для ранее использовавшейся публикации medium.com/vim-drops. На alldrops.info вы всегда найдете все сообщения без ограничений Medium.com.

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

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



Emmet - необходимый инструментарий для веб-разработчиков
Инструмент двунаправленного редактирования в реальном времени для CSS, LESS и SCSS. www.emmet.io



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

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

Установить и настроить

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

Установить:

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

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

Настраивать:

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

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

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

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

let g:user_emmet_leader_key=','

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

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

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

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

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

Шаблон HTML

Первый базовый фрагмент - это шаблон по умолчанию html:

  • введите i, чтобы войти в режим INSERT
  • тип html:5
  • и введите ,, (запятая)

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

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

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

  • тип div
  • и введите ,, (запятая запятая)

… а также попробуйте что-нибудь еще:

  • тип myname
  • и введите ,, (запятая-запятая)

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

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

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

  • тип div>p>a
  • и введите ,, (запятая)

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

Вы можете определить html атрибуты для элементов, используя то же соглашение, что и в CSS.

Давайте попробуем в предыдущем примере, добавив класс .container к <div>, #foo id к <p> tag.

  • тип div.container>p#foo>a
  • и введите ,, (запятая-запятая)

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

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

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

Допустим, вам нужен <div> с 5 <p> внутри, просто используйте div>p*5:

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

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

  • тип div>p#foo$*5
  • и введите ,, (запятая-запятая)

Поздравляю! Ты понял!

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

div>p#foo$*5>a

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

Не пропустите!

Получите другие полезные советы, подобные этому 👇, на своей временной шкале в Twitter:

Полезные ссылки и ссылки:

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

… И как всегда:

  • Документация Vim (:help)
  • Книга (и скринкасты) Освоение Vim быстро Йовицы Илич. Это потрясающая книга, не забудьте подписаться на информационный бюллетень, чтобы получать бесплатные советы по Vim и отрывки из книг по электронной почте.

(👆 Это партнерская ссылка. Если вам понравился этот пост и вы также заинтересованы в покупке книги / скринкастов MVQ, пожалуйста, посетите партнерскую ссылку, и вы подарите мне кофе ☕ или пиво 🍺.)

Сноски:

  • alldrops.info - это ИСТИНА и НАВСЕГДА БЕСПЛАТНО для ранее использовавшейся публикации medium.com/vim-drops. На alldrops.info вы всегда найдете все сообщения без ограничений Medium.com.
  • Если у вас есть какие-либо сомнения или советы по поводу этой статьи, я был бы признателен, если бы вы узнали и обсудили их в разделе комментариев.
  • Есть ли у вас другие советы по работе с vim? Вы бы хотели опубликовать это в этом блоге? Отправьте электронное письмо.
  • Так как английский не мой родной язык, прошу прощения за ошибки. Исправления приветствуются.
  • Контакт: vim [@] alldrops [.] информация.