This extension automatically adds curly braces `{}` around JSX and TSX prop values when you type the equals sign (`=`). It streamlines your React/JSX/TSX development workflow by reducing repetitive typing.
Demo
Before
After
Features
Automatic Curly Brace Insertion: When you type = after a prop name in a JSX or TSX element, the extension automatically inserts {} and places the cursor inside the braces.
// Before:
<MyComponent someProp=
// After (cursor indicated by |):
<MyComponent someProp={|}
Backspace Handling: If you press Backspace when the cursor is between the inserted curly braces, both braces are removed.
// Before (cursor indicated by |):
<MyComponent someProp={|}
// Press Backspace
// After:
<MyComponent someProp=
Installation
Open Visual Studio Code.
Go to the Extensions view (Ctrl+Shift+X or Cmd+Shift+X).
Search for "Auto Curly JSX".
Click "Install".
Reload VS Code.
Usage
Simply open a .jsx or .tsx file and start writing JSX/TSX code. The extension will automatically insert curly braces when appropriate. No configuration is required.
Example
Open a .jsx or .tsx file.
Type a JSX element and a prop name, followed by =:
<MyComponent myProp=
The extension will automatically add the curly braces:
<MyComponent myProp={|}
(The | represents the cursor position.)
Type the value of your prop.
If you press Backspace immediately after, both curly braces will be deleted.
Contributing
If you find a bug or have a feature request, please open an issue on GitHub. Pull requests are also welcome!
