DEV Community

Discussion on: I made a vscode plugin that can write each part of React component in multiple split editors on the same screen

joesky profile image
Joe_Sky Author

Well, this is really possible. The difficulty point in how to directly implement folding all the code which below the single line comment, native syntax does not support such folding. However "#region" is a native comment syntax that supports folding multiple lines.

jsx-sfc was not born for Split Editors at first, just like Vue's SFC, I just found it very suitable for the Split Editors, I think it can be used as an optional solution. Next, I will continue to try more purer solutions. But according to your idea, I prefer to implement it without comments if possible, I think the fewer additions may make this idea more acceptable to more people. Thanks.

Thread Thread
fijiwebdesign profile image
Gabirieli Lalasava

I'm interested in building a generic solution from this. Not only react but a base for JavaScript.

We could grab the abstract syntax tree (AST) of the file and display a high level visual of possible split points of the nodes.

The user can customize per settings for each project/directory/file or AST node structure match. That would allow targeting React components, stores/models, other framework files etc. Or use defaults.

This way you can build custom configs based on selectors of the AST nodes or collections of nodes for different file types.

For example when viewing a class component extending React we know to apply react based AST selectors to split it. When viewing a MobX store we apply MobX splitting etc. Even create a plugin ecosystem around specific frameworks and selectors.

Thread Thread
joesky profile image
Joe_Sky Author

It's a cool idea, I think it's feasible~

In fact, my solution is implemented by analyzing AST to find split points, and the original version of Volar is also implemented in this way. They just don't support configurable, but focus more on a specific framework.

My temporary goal is to use this idea to make a version that supports the regular syntax of React function components, it will still be placed in vscode-jsx-sfc. Because I hope jsx-sfc is more than just a special new API, and it can grow into a more generic solution focusing on improving the development experience of React function components. In the future, I will integrate more practical React development experience to design and optimize it.

If the community can create a general solution, such as vscode-split-editors, this is what I would like to see, which shows that this idea has wider existence value. I think we still need to design carefully. For example, we can't have too many split editors, if there are more than 4, each editor area is very small, which will also cause inconvenience. Thanks.