VS Code Linked Editing

Что делает Linked Editing и чего он не делает

Linked Editing предназначен для синхронного редактирования участков, которые языковой провайдер считает связанными. Самый понятный пример — <section> и </section>: вы начинаете менять имя одного тега, второй обновляется вместе с ним. Это не глобальный поиск по файлу и не массовое переименование всех одинаковых тегов. Если на странице десять div, изменение одного парного элемента не должно превращать все div в section. Механизм зависит от поддержки конкретного языка. Встроенная HTML-поддержка VS Code умеет linked editing для парных тегов, а в JSX такая возможность появилась через поддержку TypeScript/JavaScript. Для других языков функцию может предоставлять расширение.

Совет: Linked Editing удобен именно для локальной пары. Если требуется переименовать компонент как символ во всём проекте, используйте Rename Symbol, а не редактирование парного тега.

Как включить Linked Editing

1. Откройте Settings и найдите Linked Editing либо откройте settings.json.
2. Добавьте настройку "editor.linkedEditing": true.
3. Откройте HTML-файл с парой тегов, например <article>..</article>, и поставьте курсор в имя открывающего тега.
4. Начните менять article на section. Если язык поддерживает linked editing, имя закрывающего тега будет меняться синхронно.
5. Если автоматический режим не активировался, вызовите Command Palette и найдите Start Linked Editing.
6. Нажмите Esc, чтобы выйти из активного linked-editing режима, если хотите редактировать одну сторону отдельно.

Важно: Если теги не обновляются, не ставьте сразу стороннее расширение. Сначала проверьте language mode файла и встроенную поддержку текущего типа документа.

HTML, JSX и Rename Symbol — разные сценарии

В HTML linked editing работает как помощь при работе с парой тегов. В JSX ситуация похожая, но экосистема TypeScript также поддерживает специальное переименование matching JSX tags. Это не то же самое, что переименование React-компонента во всём проекте. Если у вас <Card>..</Card> и задача просто синхронно изменить пару тегов, linked editing удобен. Если сам компонент Card экспортируется и используется в двадцати файлах под этим именем, нужен Rename Symbol через F2. Такое разделение предотвращает две ошибки: попытку глобального рефакторинга локальным инструментом и, наоборот, применение проектного rename там, где требуется всего лишь исправить парный закрывающий тег.

Почему функция может не срабатывать

Первое, что нужно проверить, — выбранный Language Mode. Файл с HTML-разметкой, открытый как Plain Text, не получает обычной HTML-семантики. Второе — валидность структуры: сильно повреждённая или незакрытая разметка может мешать провайдеру определить правильную пару. Третье — конфликт расширений. Сторонний HTML/JSX-провайдер способен менять поведение встроенного механизма или перехватывать команды. Четвёртое — scope настройки: editor.linkedEditing может быть включён глобально, но переопределён для workspace или конкретного языка. Если проблема повторяется, временно отключите дополнительные расширения и проверьте чистый HTML-файл. Это быстрее, чем менять несколько настроек одновременно.

Как Linked Editing ведёт себя в реальном шаблоне

В простом HTML связанная пара определяется легко, но в шаблонах с вложенными компонентами и условной разметкой результат зависит от того, какой language server обслуживает файл. Например, файл может содержать HTML-подобный синтаксис, но иметь режим Vue, Svelte или другой шаблонный язык. Тогда editor.linkedEditing остаётся общей настройкой, а фактическую поддержку пары предоставляет соответствующее расширение. Поэтому при сбое сначала создайте минимальный тест в чистом HTML. Если там всё работает, проблема почти наверняка не в самой настройке, а в языковой поддержке конкретного шаблона, структуре документа или расширении.

Почему настройку лучше не путать с автозакрытием тегов

HTML auto closing и Linked Editing решают разные задачи. Автозакрытие создаёт закрывающий тег, когда вы вводите открывающий, а linked editing синхронно меняет уже связанную пару при последующем редактировании. Можно отключить html.autoClosingTags и при этом оставить editor.linkedEditing включённым, или наоборот. Если пользователь ожидает, что закрывающий тег появится автоматически, а он не создаётся, проверять нужно не Linked Editing. Разделение этих механизмов полезно при диагностике: сначала выясните, создаётся ли пара, затем — синхронно ли она редактируется.

Быстрый тест Linked Editing для HTML и JSX

Чтобы отделить проблему настройки от проблемы проекта, начните с минимального примера. В обычном HTML-файле создайте <article><span>text</span></article>, включите editor.linkedEditing и измените имя внешнего article. Закрывающий тег должен меняться вместе с открывающим. Если это работает, базовая настройка и встроенная HTML-поддержка исправны. Для JSX сделайте такой же тест в файле .jsx или .tsx. VS Code добавил linked editing для JSX и позволяет явно запустить режим командой Start Linked Editing; при этом F2 на matching JSX tag может использовать отдельное поведение переименования пары тегов. Если чистый HTML работает, а шаблон Vue, Svelte или другой framework-файл — нет, причина обычно в конкретном language provider, расширении или режиме документа, а не в User Settings. Не пытайтесь лечить такой случай глобальной заменой тегов: сначала проверьте, какой язык показан в Status Bar и какое расширение обслуживает файл. Это позволяет диагностировать проблему без риска массово изменить одноимённые теги по всему документу.

Диагностика за минуту

• Проверить, что editor.linkedEditing действительно true в активном scope.
• Убедиться, что файл открыт как HTML/JSX, а не Plain Text.
• Создать простой тестовый <div></div> и попробовать переименование.
• Запустить Start Linked Editing через Command Palette.
• Проверить, не переопределяет ли workspace пользовательскую настройку.
• При необходимости временно отключить расширения, влияющие на HTML/JSX.

Совет: Храните editor.linkedEditing в User Settings, если хотите одинаковое поведение во всех проектах. Workspace-настройка нужна, когда команда сознательно фиксирует поведение редактора для репозитория.

Что учитывать

Первое, что нужно проверить, — выбранный Language Mode. Файл с HTML-разметкой, открытый как Plain Text, не получает обычной HTML-семантики. Второе — валидность структуры: сильно повреждённая или незакрытая разметка может мешать провайдеру определить правильную пару. Третье — конфликт расширений. Сторонний HTML/JSX-провайдер способен менять поведение встроенного механизма или перехватывать команды. Четвёртое — scope настройки: editor.linkedEditing может быть включён глобально, но переопределён…

Источники и проверка

Фактическая часть сверена по первичным источникам (в т.ч. HTML in Visual Studio Code). Пример и формулировки — редакция N1RO на 2026-09-20.

• HTML in Visual Studio Code
• Refactoring in Visual Studio Code
• Visual Studio Code 1.79 — Linked editing for JSX tags