
Refactor keyboard shortcuts
Type | Mac Shortcut | Windows/Linux Shortcut |
---|---|---|
context menu | CTRL + CMD + R | CTRL + ALT + R |
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]
withanArray.find(…)
. - Convert array.indexOf() into array.includes()
Replace
array.indexOf()
checks witharray.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 accesso.a
. - Convert string comparison chain to array.includes()
Replace
|| value === 'aString'
and&& value !== 'aString'
chains witharray.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 accesso['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 withconst
declarations. - Convert loop to .forEach
Replace regular
for
loops with.forEach()
loops. - Convert loop to for…of
Replace regular
for
loops andanArray.forEach
loops withfor…of
loops. - Convert loop to for
Replace
for…of
with a regularfor
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 ofMath.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 insideelse
blocks can be combined intoelse if
statements. - Merge nested if-statements
Combine two nested
if
statements without additional operations into a singleif
-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 aswitch
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
witharray.every
. - Replace _.filter with array.filter
Replace Lodash
_.filter
witharray.filter
. - Replace _.each and _.forEach with array.forEach
Replace Lodash
_.each
and_.forEach
witharray.forEach
. - Replace _.map with array.map
Replace Lodash
_.map
witharray.map
. - Replace _.noop with arrow Function
Replace
_.noop
with() => undefined
. - Replace _.some with array.some
Replace Lodash
_.some
witharray.some
. - Convert var to let or const
Replace
var
with block-scoped variableslet
andconst
. - Replace void 0 with undefined
Replace
void 0
and other constantvoid
expressions withundefined
. - 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.