Автоизменение закрывающего тега при смене открывающего в VS Code

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

Чтобы автоматизация синхронизации тегов в Visual Studio Code стала возможной, следует установить расширение Auto Rename Tag. После его установки, любое изменение в HTML или XML теге будет немедленно применяться и к соответствующему закрывающему тегу.

Пример использования:

// Сначала тег <div>
<div>Том Круз</div>

// Затем тег меняется на <section>,
// закрывающий тег соответственно тоже меняется
<section>Том Круз</section>

Установленное расширение запускается автоматически, никаких дополнительных настроек не требуется.

Включение внутренней синхронизации тегов

Функция "Linked Editing", присутствующая в VSCode 1.44, предлагает подобные возможности. По её активации изменения в одном теге мгновенно воспроизводятся на его парном теге.

Чтобы эту функцию включить, отыщите "editor.linkedEditing" в настройках и активируйте данный параметр. Попробуйте отредактировать тег и увидите результат в реальном времени!

Другие методы

Разработчики, которые предпочитают не устанавливать дополнительные расширения, могут воспользоваться функцией "Rename Symbol" для одновременного изменения парных тегов, применяя комбинацию клавиш <kbd>F2</kbd>. Этот метод особенно удобен для проведения быстрых исправлений в HTML и JSX.

В экосистеме IntelliJ доступна функциональность IntelliJ Keybindings, которая предусматривает использование привычной комбинации клавиш <code>SHIFT + F6</code> для переименования тегов.

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

Как бы мы рассматривали HTML-теги как танцующую пару:

Танцор А (открывающий тег) : <div>
Танцор Б (закрывающий тег) : </div>

В VS Code при отправке команды одному танцору на изменение позиции...

<div> трансформируется в <section>

...сразу же партнёр приспособится к новому движению:

👯‍♂️: <section> ... </section>
// Они продолжают танцевать в унисон!

Решения для различных ситуаций

Одновременное изменение нескольких тегов

Функция мультикурсора (<kbd>Ctrl</kbd> + <kbd>D</kbd>) позволяет выбрать и одновременно изменить все вхождения тега — это идеально подходит для работы с плотным HTML-кодом.

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

Поддержка сложных структур

Расширение Auto Rename Tag станет незаменимым инструментом при редактировании вложенных HTML-структур, предохраняя от ошибок ручного редактирования и обеспечивая высокую точность.

Интеграция методов

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

Рекомендации для улучшения редактирования тегов

• Регулярно обновляйте VSCode и установленные расширения, чтобы иметь доступ к новым функциям.
• Отрабатывайте использование различных методов редактирования, чтобы выбрать наиболее эффективные для вашего рабочего процесса.
• Ознакомьтесь со страницей расширения, чтобы найти дополнительные настройки или горячие клавиши.
• Помните, что некоторые возможности могут различаться в зависимости от типа файлов и операционных систем.

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

1. Auto Rename Tag – Торговая площадка Visual Studio — необходимое дополнение VSCode для автоматического переименования парных HTML/XML тегов.
2. Emmet в Visual Studio Code — детальное описание Emmet, инструмента, позволяющего сократить время на написание кода HTML/CSS в VSCode.
3. API Расширений | API Расширений Visual Studio Code — руководство по созданию собственных расширений для Visual Studio Code.
4. Программирование на HTML с Visual Studio Code — официальное руководство по работе с HTML в VSCode.
5. IntelliSense в Visual Studio Code — обзор IntelliSense, инструментария автодополнения кода в VSCode.
6. Сниппеты в Visual Studio Code — руководство по созданию собственных сниппетов для ускорения процесса разработки в VSCode.