19 Code Assists for Syntax Conversion

It is often annoying to make small syntactical changes by editing text. Often more than one position needs to be edited, and the code is broken during the edit, leading to incorrect errors and auto-completions that get in the way. You can execute the following syntax conversions with code assists:

• Add {…} to if-else and loops

  Convert single statements into blocks.

• Add {…} to arrow function

  Convert arrow function expression body into a block body.

• Add {…} to case

  Surround case statements in a block.

• Add {…} to JSX attribute

  Add {…} to JSX attribute string literal value.

• Add numeric separator

  Increase the readability of long numbers and uncommon number formats by adding underscore separators.

• Collapse JSX tag

  Convert an empty JSX tag into a self-closing tag.

• Collapse object property into shorthand

  Shorten object properties when the property name is the same as the property value.

• Convert property access to dot notation

  Convert bracket notation property access o['a'] into dot notation property access o.a.

• Convert property access to bracket notation

  Convert dot notation property access o.a into bracket notation property access o['a'].

• Convert to ++ / --

  Convert an assignment expression into a ++ or -- expression.

• Expand JSX tag

  Expand a self-closing JSX tag.

• Expand shorthand property

  Expand a shorthand object property (e.g. { a }) to a regular property (e.g. { a: a }).

• Merge variable declaration and initialization

  Convert the initial assignment of a variable into its declaration initializer.

• Pull operator out of assignment

  Move an operator out of an assignment into a binary expression.

• Push operator into assignment

  Move an operator from a binary expression into an assignment operator, e.g., +=.

• Remove {…} from if-else and loops

  Replace single statement blocks with their inner statement.

• Remove {…} from arrow function

  Convert an arrow function block body into an expression body.

• Remove {…} from case

  Replace blocks with their content

• Remove {…} from JSX attribute

  Remove {…} from a JSX attribute expression value that contains a string literal.