Implement 'Synced Regions' for Svelte

HTML for VS Code recently introduced Synced Regions for HTML tags. In summary, if you edit an opening tag, the same edits appear in the closing tag and vice versa.

This API is available for other extensions as of two weeks ago.

This is an issue to track the implementation of Synced Regions for: (Tip: | is the cursor)

• Svelte markup (e.g <div|></div|>)
• Svelte control flow (e.g {#each| n}{/each|}).
• ** Svelte classes & ids (e.g <div class="apple|"></div> <style> .apple| {color: red}</style> )
• ** JavaScript
  • <script> let world| = "" </script><div>Hello {world|}</div>.
  • <script> import Component| from "./component"</script><Component|></Component|>

** Syncing JavaScript and CSS classes and ids is iffy since I can imagine wanting to edit a variable/class without changing others in many situations. I haven’t experimented with how flexible the LinkedEditingRangeProvider API is, but if possible, we could require a key-binding to get into synced mode for these contentious regions. Requiring a key-binding will likely hurt feature discovery + usage of syncing for these regions, so discussion of other possible implementations is very welcome.

I’d suggest four separate settings options for HTML, flow control, CSS and JS. Where HTML & flow control are on by default, but CSS & JS are off by default.

[dummdidumm]

This feature is now live for html tags. Still not sure if other areas are valid use cases.

[jasonlyu123]

The markup part would be easy to implement and it probably is what it’s designed for. The svelte control flow is viable but probably only possible when there’s no syntax error in the file. The proposal of CSS class name, id, and javascript identifier feel more like a rename symbol to me. We already have it for javascript but not CSS. And about the partly rename you can always use multiple cursors to achieve it.