Бесплатный вебинар
«как найти любимую работу»
Подарки на 150 000 ₽ за участие
Живой эфир
Записи не будет!
00:00:00:00
дн.ч.мин.сек.

Быстрое закрытие HTML тегов в Vim: решение проблемы

Быстрый ответ

Если вам надо в Vim моментально закрыть теги HTML, сначала укажите открывающий тег (<div>), потом введите </ и нажмите на Ctrl + P или Ctrl + N для автозавершения закрывающего тега (</div>). Таким образом, процесс закрытия тегов становится гораздо проще и быстрее.

HTML
Скопировать код
<div>...</div> <!-- Чтобы с помощью Vim закрыть теги, автозавершение – это очень просто! -->
Кинга Идем в IT: пошаговый план для смены профессии

Расширение функционала Vim: плагины

Для повышения продуктивности в Vim можно воспользоваться плагинами. В частности, xmledit значительно облегчит работу с HTML благодаря функциям автозакрытия тегов и подсветке вложенных элементов.

Markdown также упрощает ввод – достаточно применить команду %! для конвертации Markdown в HTML в Vim, и вам больше не надо заморачиваться с ручным закрытием тегов.

Настраивайте в Vim свои комбинации клавиш для закрытия тегов — сокращенные команды, такие как imap ,/ </<C-X><C-O>, помогут сэкономить заметное количество времени.

Не менее полезными оказываются плагины surround и ragtag от Тима Поупа. Они предоставляют команды для быстрого создания и редактирования тегов с использованием сочетания клавиш Ctrl+x.

Быстрое и автоматизированное закрытие тегов

Следует придерживаться следующих рекомендаций, чтобы оптимизировать рабочий процесс:

  1. Настраивайте персонализированные комбинации клавиш для часто встречающихся задач, например, таких как закрытие тегов.
  2. Во всю используйте автозаполнение тегов в Vim.
  3. Пишите на Markdown вместо HTML, поскольку затем вы можете конвертировать код с помощью команды фильтра %!.
HTML
Скопировать код
imap ,/ </<C-X><C-O> <!-- Жизнь функции без применения сочетания: </div>. Жизнь функции с применением сочетания: ,/ -->

Визуализация

Представьте себе процесс написания кода HTML в виде расстановки домино, где каждому тегу соответствует свой кирпичик:

Markdown
Скопировать код
🏗️ Старт: <div><span><p>

Закрытие HTML-тегов на Vim сравнимо с проталкиванием первого кирпичика в ряду домино:

vim
Скопировать код
:%s/<\(\w\+\)[^>]*\(.\{-}\)<\/\1@!/\1\2<\/\1/g

После нажатия Enter запускается домино-эффект:

Markdown
Скопировать код
🀄️ Финиш: <div></div><span></span><p></p>

И вуаля! Ваш HTML-код выглядит чистым и точным, все теги аккуратно закрыты. 🎉

Расширение функционала Vim

Использование плагинов для повышения продуктивности

Посетив сайт vim.org, вы найдёте множество плагинов, включая surround и ragtag, для оптимизации работы в Vim.

Подробнее об этом расскажет наш спикер на видео
skypro youtube speaker

Упрощение работы через конвертацию

Создавая контент в Markdown и конвертируя его в HTML с помощью фильтра в Vim, можно избавиться от необходимости закрывать теги руками.

Пользовательские сочетания клавиш

Интегрируйте сочетания клавиш в свою работу для ускорения написания кода. Это позволит делать специальные назначения для часто используемых тегов HTML.

Использование мощи плагинов

Плагины расширяют возможности Vim, поэтому особое внимание следует уделить тем, что специализируются на быстром завершении HTML-тегов.

Полезные материалы

  1. Документация Vim: Режим вставки – Автозакрытие HTML-тегов — Официальная документация Vim по автозакрытию HTML-тегов.
  2. Stack Overflow: Автозакрытие HTML-тегов в Vim — Решения и скрипты сообщества для облегчения работы с HTML-тегами.
  3. Vim Awesome: Плагин – emmet-vim для ускорения работы с HTML и CSS в Vim — Удобный инструмент для ускоренной написания кода.
  4. GitHub: Плагин Auto Pairs – легко закрыть теги и скобки — Плагин для Vim, облегчающий работу с парными символами.
  5. Практичный Vim: Редактируйте текст быстро и эффективно – Книга о Vim — Руководство по освоению Vim.
  6. Приключения Vim: Учим Vim когда играем — Игровой подход к обучению Vim.
  7. Vim Wikia: Работа с HTML – Советы и плагины — Полезные рекомендации по работе с HTML в Vim.
Проверь как ты усвоил материалы статьи
Пройди тест и узнай насколько ты лучше других читателей
Как можно быстро закрыть HTML-тег в Vim?
1 / 5