
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 accesso.a
. - Convert property access to bracket notation
Convert dot notation property access
o.a
into bracket notation property accesso['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.