
8 Code Assists for React
In React, components often contain JSX, a syntax extension for JavaScript. The JS Assistant provides code assists that make working with JSX and React easier:
- Add {…} to JSX attribute
Add
{…}
to JSX attribute string literal value. - Collapse JSX tag
Convert an empty JSX tag into a self-closing tag.
- Expand JSX tag
Expand a self-closing JSX tag.
- Extract React function component
Extract JSX element or fragment into a React Function Component.
- Move JSX attribute
Move a JSX attribute up or down.
- Remove {…} from JSX attribute
Remove
{…}
from a JSX attribute expression value that contains a string literal. - Remove unnecessary JSX fragment
Replace JSX Fragments
<></>
that only contain a single child with that child. - Surround with <>…</>
Wrap JSX elements in a JSX fragment
<>…</>
.