Поиск закрывающего HTML тега в Sublime Text: способы и плагины

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

Для незамедлительного нахождения тегов в Sublime Text используйте сочетание клавиш Ctrl+Shift+A на Windows или Cmd+Shift+A на Mac. Это действие выделит весь блок от открывающего до закрывающего тега:

<div>
  <!-- Ctrl+Shift+A и весь ваш блок отмечен -->
</div>

Ещё один способ быстро найти закрывающий тег – это команда Go To Matching Pair в плагине Emmet, активизируемая комбинацией Ctrl+Alt+J на Windows/Linux или Shift+Ctrl+T на Mac. Спасибо этой функции, перемещение между тегами станет приятным и быстрым!

Дополнительные инструменты: Emmet и Sublime Text

Для более удобной работы с HTML-тегами в Sublime Text настоятельно рекомендуется установить плагин Emmet. Вы можете подстраивать сочетания клавиш под собственные потребности, отредактировав файл Emmet.sublime-settings.

Навигационное приключение: перемещение по вложенным структурам

В мире вложенных тегов, не важно, являются ли они script или style, функция Goto Anything в Sublime Text окажется весьма полезной. Чтобы её активировать, нажмите Control+M на Windows/Linux или Cmd+M на Mac. Ищите соответствия и благодаря этому быстро пройдите сквозь "лабиринт" тегов.

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

Обработка сложных вложенных элементов

При сортировке через густой "лес" тегов может быть полезной команда Ctrl+Shift+T на Windows/Linux или Cmd+Shift+T на Mac, которая перенесет вас к последнему закрывающему тегу. Благодаря этому даже самые глубокие вложенности станут покорными.

Специальные средства: плагины Sublime Text

Для тех, кто в перед не только теги, но и коды «Матрицы», есть плагины, вроде BracketHighlighter, которые облегчают работу со сложными HTML-структурами. Плагины можно найти и установить через менеджер пакетов Package Control. Присоединяйтесь к сообществу почитателей расширений!

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

Визуализируйте Sublime Text как вход в садовый лабиринт:

Где же прячется закрывающий HTML-тег?
Стартовая точка – это ваш открывающий тег (<div>), представим его как "ворота в мир HTML".

Завязывайтесь за узел на ните и пройдитесь через теги:

🧵 Проходите сквозь вложенные теги ("<section>, и здесь <article>!"),
и вы обязательно наткнетесь на закрывающий тег, который приветствует вас знакомой фразой: "С возвращением!")

И вуаля – вы на месте!

🏁 <div> 🌳 <section> 🌳 <article> 🌳 </article> 🌳 </section> 🌳 </div> 🏁
"Ворота в мир HTML"                                                 "С возвращением!"

Ускорьте процесс с помощью функционала Balance HTML tags, что активизируется сочетанием клавиш Ctrl+Alt+A на Windows/Linux или Shift+Command+A на Mac. Пара тегов, которую нужно выделить, немедленно появится на экране!

Для активных разработчиков

Ознакомьтесь с документацией Emmet – там присутствует множество полезной информации. Если вам по вкусу работа в командной строке Sublime Text, то вы оцените возможности регулярных выражений и преимущества функционала множественного выбора.

Расширенные просмотровые настройки с Emmet

На GitHub странице Emmet для Sublime вас ждут неизведанные пути. Здесь можно настроить свои сочетания клавиш с помощью специфических для ST3 команд плагина Emmet. Просто введите Ctrl+Shift+' и вы найдете закрывающие теги ещё быстрее!

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

1. Key Bindings — официальное руководство по горячим клавишам в Sublime Text для желающих повысить производительность.
2. Editing — Sublime Text Unofficial Documentation — расширяем понятие функции Expand selection для работы с HTML-тегами в Sublime Text.
3. BracketHighlighter – Packages – Package Control — эффективный плагин для наглядного отражения соответствия скобок и тегов.
4. GitHub – emmetio/sublime-text-plugin — все тайны вашего любимого плагина Emmet, чтобы магия HTML и CSS была под вашего контролем.
5. Sublime Text Power User — глубокое погружение в возможности Sublime Text через серию обучающих видео.
6. News – Sublime HQ — современные обновления и лайфхаки, котрые помогают оставаться на пике продуктивности в Sublime Text.