vscode-jsx-sfc

Useful editor tools for jsx-sfc.

Install

ext install in Visual Studio Code command line

Search for jsx-sfc and click install

Split Editors development

What is 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 template/style/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:

Options

• 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
}

• Open split editors in group:

{
  "jsx-sfc.splitEditors.inGroup": true // Default value: false
}

Code Snippets

Inspiration

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.

License

MIT