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 <>…</>.