Refactor keyboard shortcuts

124 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 && to if statement

  Convert condition && aFunction(); and similar expression statements into if statements.

• Convert .apply() to spread syntax

  Replace .apply() calls with the spread operator ...

• Convert array.filter()[0] to array.find()

  Replace anArray.filter(…)[0] with anArray.find(…).

• Convert array.indexOf() into array.includes()

  Replace array.indexOf() checks with array.includes().

• Convert Type[] to Array<Type>

  Change TypeScript array types into generic types.

• Convert property access to dot notation

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

• Convert string comparison chain to array.includes()

  Replace || value === 'aString' and && value !== 'aString' chains with array.includes().

• Convert conditional expression to if-else

  Convert a conditional expression to an if-else statement.

• Convert destructuring to regular variable declaration

  Convert all variables that are declared via destructuring into separate regular variable declarations.

• Convert property access to bracket notation

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

• Convert #-private to TypeScript private

  Replace ECMAScript #-private properties and methods with TypeScript private.

• Convert function to arrow function

  Replace function expressions with arrow functions, a more concise syntax.

• Convert function to object method

  Convert property assignments with functions to method declarations.

• Convert if-else into conditional expression

  Convert an if-else return or assignment expression into a conditional expression.

• Convert if-else to switch

  Convert a series of if-else statements with equality comparisons into a switch statement.

• Convert let to const

  Replace let declarations that have no re-assignment with const declarations.

• Convert loop to .forEach

  Replace regular for loops with .forEach() loops.

• Convert loop to for…of

  Replace regular for loops and anArray.forEach loops with for…of loops.

• Convert loop to for

  Replace for…of with a regular for loop that has an index variable.

• Convert loop to .map()

  Convert a loop with .push() into a .map() call.

• Convert Math.pow to exponentiation operator

  Use the exponentiation operator ** instead of Math.pow().

• Convert named function declaration to variable declaration

  Converts a named function to a const declaration with a function expression.

• Convert 'new Array(…)' to '[…]'

  Replace new Array(…) calls with […].

• Convert string to template literal

  Convert a string to a basic template literal without expressions.

• Convert switch to if-else

  Change a switch statement into a series of if-else statements

• Convert template literal to string

  Convert a simple template literal without expressions into a string.

• Convert to destructuring assignment

  Convert a variable declaration that accesses an object property to a destructuring assignment.

• Convert to ++ / --

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

• Convert to optional chaining

  Replace various guard expressions with the optional chaining operator (?.).

• Convert TypeScript private to #-private

  Replace TypeScript private properties and methods with ECMAScript #-private.

• Document function

  Write a JSDoc comment for a function or method.

• 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 }).

• Explain code

  Generate a short explanation for a selected code block.

• Extract React function component

  Extract JSX element or fragment into a React Function Component.

• Extract selected text into variable

  Extract the selected text (including expressions from template literals) into a const variable.

• Extract variable

  Extract one or more occurrences of an expression into a const variable.

• Flatten array rest/spread property

  Merge a ...[] expression into the outer array literal or destructuring expression.

• Flip operator

  Swap the left and right operands and update the operator if necessary.

• Inline into template

  Inline a string or a basic template literal into an outer template literal.

• Replace assignment with return

  Convert a variable assignment to a return statement.

• Inline variable

  Inline a variable value into its references.

• Inline variable occurrence

  Inline the value of a variable into one of its occurrences.

• Introduce early return / continue

  Change an if-statement into an early return or continue statement.

• Invert condition

  Negate the condition of an if-statement or conditional expression and swap its content.

• Move default value into parameter

  Replace default value assignment expressions with default parameter values.

• Merge into preceding destructuring assignment

  Combine an object destructuring assignment with its preceding sibling.

• Merge if-statement into preceding if-statement

  Merges two if-statements with the same body when possible.

• Merge nested if inside else into else-if

  Nested single if statements inside else blocks can be combined into else if statements.

• Merge nested if-statements

  Combine two nested if statements without additional operations into a single if-statement, using && to combine the conditions.

• Merge variable declaration and initialization

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

• Move array element

  Move an array element up or down.

• Move class member

  Move a property, constructor, or method definition up or down.

• Move constant to top-level scope

  Move a constant to the top-level scope of the module.

• Move destructuring array element

  Move an element inside an array destructuring expression up or down.

• Extract destructured expression into separate variable declaration

  Move a destructured expression inside a variable declaration into a separate variable declaration.

• Move destructuring object property

  Move a property inside an object destructuring expression up or down.

• Move field initialization into constructor

  Moves the assignment of the initial field value into the class constructor.

• Move initialization into field declaration

  Moves the assignment of the initial field value into the field declaration.

• Move duplicated first statement out of if-else

  Move a first statement that appears in both the if and the else block out of the if-else statement.

• Move if-else-if branches

  Move an if-else branch up or down.

• Move interface member

  Move a property, constructor or method definition up or down.

• Move JSX attribute

  Move a JSX attribute up or down.

• Move duplicated last statement out of if-else

  Move a last statement that appears in both the if and the else block out of the if-else statement.

• Move nested if

  Push down if statements into nested if statements and pull nested if statements up.

• Move object property

  Move an object property up or down.

• Move statement

  Move a statement up or down.

• Move switch case clause

  Move a case clause in a switch statement up or down.

• Move type member

  Move a type member up or down.

• Move variable declaration

  Move a variable declaration up or down.

• Pull operator out of assignment

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

• Pull up negation

  Move the not-operator (!) out of a binary expression.

• Push down negation

  Push the not-operator (!) into an expression and negate it.

• Push variable declaration into initial value

  Inlines a variable that is initialized with another variable into the declaration of that variable.

• Push operator into assignment

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

• Push parameter into IIFE/IIAF

  Push a parameter of an immediately-invoked function expressions (IIFEs) or an immediately-invoked arrow functions (IIAFs) into the function body.

• 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.

• Remove console.log

  Remove console.log statement.

• Remove double negation

  Remove double negation (!!) expressions.

• Remove empty else block

  Remove an empty 'else' block from an 'if' statement.

• Remove empty if block

  Remove an empty 'if' block from an 'if' statement. Replaces it with the 'else' block when available.

• Remove IIFE/IIAF

  Remove immediately-invoked function expressions (IIFEs) and immediately-invoked arrow functions (IIAFs) without parameters.

• Remove redundant else if

  Remove redundant else-if conditions and unreachable else statements.

• Remove trailing array destructuring holes

  Remove trailing array destructuring holes and empty array destructuring expressions.

• Remove unnecessary conditional expression

  Replace a conditional expression with its condition or its result.

• Remove unnecessary else

  Lift the else content of an if-else with a return statement to the outer indentation level.

• Remove unnecessary expression statement

  Remove an expression statement that has no side-effects.

• Remove unnecessary JSX fragment

  Replace JSX Fragments <></> that only contain a single child with that child.

• Remove unnecessary template literal

  Simplify a template literal with a single inner expression and no prefix or suffix.

• Remove unused variable

  Remove a variable that is not read or written.

• Replace with existing variable

  Replace an expression with an existing variable.

• Replace _.every with array.every

  Replace Lodash _.every with array.every.

• Replace _.filter with array.filter

  Replace Lodash _.filter with array.filter.

• Replace _.each and _.forEach with array.forEach

  Replace Lodash _.each and _.forEach with array.forEach.

• Replace _.map with array.map

  Replace Lodash _.map with array.map.

• Replace _.noop with arrow Function

  Replace _.noop with () => undefined.

• Replace _.some with array.some

  Replace Lodash _.some with array.some.

• Convert var to let or const

  Replace var with block-scoped variables let and const.

• Replace void 0 with undefined

  Replace void 0 and other constant void expressions with undefined.

• Select expression occurrences

  Start a multi-cursor selection on several occurrences of the same expression.

• Separate repeated condition into nested if-else

  Separate a repeated sub-condition that is fully covered into a nested if-else.

• Simplify binary expression

  Replace binary expression with a more straightforward equivalent expression.

• Simplify switch statement

  Remove an unnecessary switch statement or replace it with its content.

• Split if statement

  Split the condition of an if statement on || or && when possible.

• Split variable declaration sequence

  Convert declarations with multiple variables into separate declarations for each variable.

• Split variable declaration and initialization

  Separate the variable initialization from its declaration.

• Surround with if statement

  Surround a sequence of statements with an if-statement.

• Surround with <>…</>

  Wrap JSX elements in a JSX fragment <>…</>.

• Surround with try…catch

  Surround a sequence of statements with a try…catch block.

• Use == null comparison

  Replace different nullish checks with == null.

• Use nullish coalescence in default expression

  Replace default value expression with nullish coalescing operator (??) expressions.

• Use string.endsWith()

  string.endsWith() checks if a string ends with another string.

• Use string.startsWith()

  string.startsWith() checks if a string starts with another string.

• Merge string concatenation

  Merge string and template literal concatenation into a single template literal or string.