Supercharge VS Code with 32 JavaScript Refactorings

Lars Grammel
Lars Grammel
Published on September 22, 2021

Visual Studio Code is an excellent editor for JavaScript and TypeScript that already contains many refactorings, e.g., rename and extract function.

The P42 JavaScript Assistant supercharges VS Code with an additional 32 refactorings and code actions. The P42 refactorings cover three main areas:

  • A. Code Restructuring: Refactorings that change statements and expressions.
  • B. Conditionals: Refactorings that change or simplify conditionals and conditional-related constructs.
  • C. Code Modernization: Refactorings that upgrade existing code to language features introduced in newer ECMAScript versions.

The P42 refactorings are available as quick fixes (Mac: CMD + ., Windows: CTRL + .) and in the refactoring context menu (CTRL + SHIFT + R).

P42 is early in its development and does not cover class-level or multi-file refactorings yet. If you want to provide feedback, e.g., which refactorings or functions you'd like to see in P42, or if you'd like to receive updates, you can find us on Twitter @p42ai or LinkedIn.

Here is a visual example for each refactoring in action:

A. Code Restructuring

1. Inline Const

Inline the value of a const declaration into its references and remove the declaration.

Inline const

2. Extract Const

Extract (multiple) occurrences of an expression to a const in the enclosing block scope.

Extract const

3. Extract Substring to Const

Extract the selected part of a string literal into a const.

Extract substring to const

4. Inline Return Statement

Inline returned variable that is assigned in if-else or switch statements into return statements.

Inline return

5. Push Operator into Assignment

Move the operator from a binary expression into an assignment when possible.

Push Operator into Assignment

6. Pull Operator out of Assignment

Move the operator out of an operator assignment expression (e.g., +=) into a regular binary expression.

Pull Operator out of Assignment

7. Convert for Loop to for..of Loop

Converts a regular for loop into a for...of loop and removes the index variable.

Convert for Loop to for..of Loop

8. Convert for Loop to forEach Loop

Converts a regular for loop into a .forEach() loop and removes the index variable.

Convert for Loop to forEach() Loop

9. Convert If-Else to Guard Clause

Change if-statements which return from a function into guard clauses.

Convert If-Else to Guard Clause

10. Surround Statements with Try...Catch

Wrap one or more statements in a try..catch block.

Surround Statements with Try...Catch

11. Split Variable Declaration

Split combined variable declaration into separate variable declarations.

Split Variable Declaration

12. Collapse into Shorthand Notation

Collapse object properties into shorthand notation.

Collapse into Shorthand Notation

13. Expand Shorthand Property

Expand a shorthand notation into the full notation.

Expand Shorthand Property

B. Conditionals

14. Invert Condition

Invert the condition of if-else statements and conditional expressions (and flip the content).

Invert Condition

15. Flip Operator

Swap the argument order of a commutative binary operator (and update the operator when needed, e.g. when flipping < to >=).

Flip Operator

16. Push Down Not Operator

Pushes the ! (not operator) into &&, ||, !=, !==, ==, ===, <, <=, >, >= binary expressions.

Push Down Not Operator

17. Merge Nested If

Merge an if-statement inside another if statement into a single if statement with a && condition.

Merge Nested If

18. Merge Nested Else-If

Merge an if-statement inside an else statement into an else if.

Merge Nested Else-If

19. Convert to '== null' Check

Convert a strict equality check against null and undefined into an equivalent == null check.

Convert to '== null' check

20. Combine Return Statements with Conditional

Convert an if-else statement with return into a conditional.

Combine Return Statements with Conditional

C. Code Modernization

21. Add numeric separators

Adds '_' separator to decimal, hex, binary, octal and big int literals (ES2021).

Add Numeric Separators

22. Assign Defaults with Nullish Coalescence

Shorten default value assignments with nullish coalescing operator (ES2020).

Assign Defaults with Nullish Coalescence

23. Convert to Optional Chain Expression

Converts a chain of nullish or falsy checks into an optional chaining expression (ES2020). VS Code supports this refactoring already for some cases (e.g. x && x.a). P42 adds support for additional chaining constructs.

Convert to Optional Chain Expression

24. Convert Math.pow to Exponentation Operator

Convert Math.pow(...) expression to use the ** exponentiation operator (ES2016).

Convert Math.pow to Exponentation Operator

25. Convert Var to Let and Const

Converts var declarations to let and const (based on their usage) (ES2015).

Convert Var to Let and Const

26. Convert Function to Arrow Function

Convert function expressions into arrow functions (ES2015). VS Code itself also supports this refactoring.

Convert Function to Arrow Function

27. Convert to Object Method

Convert property assignments with functions to method declarations (ES2015).

Convert to Object Method

28. Use Default Parameters

Convert default value assignments to parameter default values (ES2015).

Use Default Parameters

29. Use Template Literals

Convert string concatenation to template literals (ES2015). VS Code itself also supports this refactoring. The P42 version adds support for a few additional cases, such as pure string concatenation.

Use Template Literals

30. Use String.startsWith

Convert check of the first string character to String.startsWith() (ES2015).

Use String.startsWith

31. Use String.endsWith

Convert check of the last string character to String.endsWith() (ES2015).

Use String.endsWith

32. Convert .apply() to Spread Operator

Convert .apply() calls to use the spread operator (...) (ES2015).

Convert '.apply()' to Spread Operator

You can find the P42 JavaScript Assistant in the Visual Studio Code Marketplace.

Happy refactoring!