Useful editor tools for jsx-sfc.
ext install in Visual Studio Code command line
jsx-sfc and click install
Split Editors development
Split Editors? This is an interesting feature of a new vscode plugin for Vue called Volar, you can install Volar and experience it in Vue projects. Here is a Volar demo:
In the demo, click the "Split Editors" button in the upper right corner to generate 3 sub editors according to the
script code in SFC, and then each editor folds the unrelated code.
However, vscode-jsx-sfc can apply the idea of
Split Editors to React development. It needs to be used with jsx-sfc, here is the demo:
See here for more description.
Automatically refold code when saving
When the code syntax is incomplete or there are errors, sometimes the region folding effect will be invalid. But this plugin has the feature of refolding when saving, which can effectively avoid the such problems.
Automatically increase the editor size after obtaining focus
This gives you more visual space when writing code, here is the demo:
- Set each split editor to automatically increase the size of the visible area after obtaining the focus. When the value is 0, the original editor size is maintained:
"jsx-sfc.splitEditors.increaseViewSize": 1 // Default value: 0
- Show/Hide split editors icon:
"jsx-sfc.icon.splitEditors": false // Default value: true
Inspired by Volar.
Some of the implementation codes refer to Volar, thanks very much for Volar's idea. Please see here for this part of the code details.