Option to "Extract Component" - Example from Flutter tooling

[oodavid]

Is your feature request related to a problem? Please describe.
A common task is to extract / refactor some of the markup into a new component:

• Create a new file
• Copy over the HTML and related CSS
• Copy over functions and component props

I do this so regularly that it's become a process. Can it be automated?

Describe the solution you'd like
Right-Click an HTML element, select "Extract a Widget"
The Flutter tooling has an "Extract Widget" feature which performs similar actions.

Describe alternatives you've considered
Do it manually

Additional context
I've recorded a demo of the flutter experience, and a quick chat about how it could work with Svelte
https://www.loom.com/share/a6074c4da14049d886aef51ae66ab812 - video showing the Flutter experience of "Extract Widget"

[PatrickG]

There is a vscode extension https://marketplace.visualstudio.com/items?itemName=proverbialninja.svelte-extractor
I haven't tried it, don't know if it's any good.

[oodavid]

I'll check it out, thanks

[dummdidumm]

Wow, first feature request with a video, thanks for the effort 👍
This is a duplicate of #187 . This already exists to some extend. Here's what you need to do:

1. Select a range you want to export
2. Fire up the command window
3. "Svelte: Extract Component"
4. Choose name/location relative to current component

The possibility to add this to a context menu when right-clicking is an interesting idea which needs to be investigated.