This extension automatically adds quotes `''` 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 Quotes Insertion: When you type = after a prop name in a JSX or TSX element, the extension automatically inserts '' and places the cursor inside the quotes.
// Before:
<MyComponent someProp=
// After (cursor indicated by |):
<MyComponent someProp='|'
Backspace Handling: If you press Backspace when the cursor is between the inserted quotes, both quotes 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 Quotes 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 quotes 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 quotes:
<MyComponent myProp='|'
(The | represents the cursor position.)
Type the value of your prop.
If you press Backspace immediately after, both quotes 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!