[Feature request] Splitting the window for CSS, JS and HTML

vuejs / vetur

Vue tooling for VS Code.

https://vuejs.github.io/vetur/

MIT License

5.75k stars 594 forks source link

[Feature request] Splitting the window for CSS, JS and HTML #1010

Open websiddu opened 5 years ago

websiddu commented 5 years ago

Thanks a lot for the extension.

Many times the Vue file could grow longer when using webpack and because of its single file architecture. Its very frustrating to jump between the CSS, HTML and JS sections and take a lot of time to scroll. At the same time, I don't want to split the file into 3 different files.

It will be great if the vue file opened will show CSS, HTML and JS in 3 different sections but underneath its still be one file.

Here is an example,

I would be happy to contribute, if you have any ideas on how to build such thing.

dsseng commented 5 years ago

Great idea! I think it will be cool if .vue file can be opened in 3 different tabs or sections. I need this feature too! :+1:

superheri commented 5 years ago

Could be great if we can switch to the 2 views easily, in case we want to see the resulting .vue file and we have a view less large, and to return to the 3 seperate views when we want them

octref commented 5 years ago

That's an interesting idea. It's doable this way:

Register a content provider for schema vue-sfc, like this sample does: https://github.com/Microsoft/vscode-extension-samples/tree/master/contentprovider-sample
When user opens file://foo.vue, you programmatically create and open these three documents vue-sfc://foo.[template/style/script].js,
You programmatically configure the viewColumn for all TextEditor instance you create

Roadblocks:

I don't think you can stop VS Code from opening a new tab for file://foo.vue when you click on File Explorer. You can contribute a Context Menu item, although that can be hard to use...
What happens when user has custom blocks?
What happens if user uses <style src="./foo.css"></style>? Displaying that single line in an editor seems not useful.

Airkro commented 5 years ago

Custom blocks can display as plain text. or uses <custom lang="json"></custom> to display as any type.

Btw. I find this: https://github.com/luozhihua/vscode-parallel-space. the biggest difference is it won't show the root element. It looks like a good idea. but it didn't finish.