Supercharge VS Code with 32 JavaScript Refactorings
Tags: vscode, javascript, typescript, webdev
Published: 2021-09-22 09:14:02


> 💡&nbsp;&nbsp;This blog post is about P42 JavaScript Assistant v1.24

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](https://marketplace.visualstudio.com/items?itemName=p42ai.refactor)** 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](https://yagmurcetintas.com/journal/whats-new-in-es2022).

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](https://twitter.com/p42ai) or [LinkedIn](https://www.linkedin.com/company/p42-software/).

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](https://p42.ai/image/blog/2021-09-22-supercharge-vscode-with-32-javascript-refactorings/action-inline-variable.gif)

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

![Extract const](https://p42.ai/image/blog/2021-09-22-supercharge-vscode-with-32-javascript-refactorings/action-extract-const.gif)

#### 3. Extract Substring to Const
Extract the selected part of a string literal into a const.

![Extract substring to const](https://p42.ai/image/blog/2021-09-22-supercharge-vscode-with-32-javascript-refactorings/action-extract-substring-to-variable.gif)

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

![Inline return](https://p42.ai/image/blog/2021-09-22-supercharge-vscode-with-32-javascript-refactorings/action-inline-return.gif)

#### 5. Push Operator into Assignment
Move the operator from a binary expression into an assignment when possible.

![Push Operator into Assignment](https://p42.ai/image/blog/2021-09-22-supercharge-vscode-with-32-javascript-refactorings/action-push-operator-into-assignment.gif)

#### 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](https://p42.ai/image/blog/2021-09-22-supercharge-vscode-with-32-javascript-refactorings/action-pull-operator-out-of-assignment.gif)

#### 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](https://p42.ai/image/blog/2021-09-22-supercharge-vscode-with-32-javascript-refactorings/action-convert-to-for-of-loop.gif)

#### 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](https://p42.ai/image/blog/2021-09-22-supercharge-vscode-with-32-javascript-refactorings/action-convert-to-for-each-loop.gif)

#### 9. Convert If-Else to Guard Clause
Change if-statements which return from a function into guard clauses.

![Convert If-Else to Guard Clause](https://p42.ai/image/blog/2021-09-22-supercharge-vscode-with-32-javascript-refactorings/action-convert-to-guard-clause.gif)

#### 10. Surround Statements with Try...Catch
Wrap one or more statements in a `try..catch` block.

![Surround Statements with Try...Catch](https://p42.ai/image/blog/2021-09-22-supercharge-vscode-with-32-javascript-refactorings/action-surround-with-try-catch.gif)

#### 11. Split Variable Declaration
Split combined variable declaration into separate variable declarations.

![Split Variable Declaration](https://p42.ai/image/blog/2021-09-22-supercharge-vscode-with-32-javascript-refactorings/action-split-variable-declaration.gif)

#### 12. Collapse into Shorthand Notation
Collapse object properties into shorthand notation.

![Collapse into Shorthand Notation](https://p42.ai/image/blog/2021-09-22-supercharge-vscode-with-32-javascript-refactorings/action-collapse-into-shorthand-property-name.gif)

#### 13. Expand Shorthand Property
Expand a shorthand notation into the full notation.

![Expand Shorthand Property](https://p42.ai/image/blog/2021-09-22-supercharge-vscode-with-32-javascript-refactorings/action-expand-shorthand-property.gif)

### B. Conditionals
#### 14. Invert Condition
Invert the condition of if-else statements and conditional expressions (and flip the content).

![Invert Condition](https://p42.ai/image/blog/2021-09-22-supercharge-vscode-with-32-javascript-refactorings/action-invert-condition.gif)

#### 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](https://p42.ai/image/blog/2021-09-22-supercharge-vscode-with-32-javascript-refactorings/action-flip-operator.gif)

#### 16. Push Down Not Operator
Pushes the `!` (not operator) into `&&`, `||`, `!=`, `!==`, `==`, `===`, `<`, `<=`, `>`, `>=` binary expressions.

![Push Down Not Operator](https://p42.ai/image/blog/2021-09-22-supercharge-vscode-with-32-javascript-refactorings/action-push-down-not-operator.gif)

#### 17. Merge Nested If
Merge an `if`-statement inside another `if` statement into a single `if` statement with a `&&` condition.

![Merge Nested If](https://p42.ai/image/blog/2021-09-22-supercharge-vscode-with-32-javascript-refactorings/action-merge-nested-if.gif)

#### 18. Merge Nested Else-If
Merge an `if`-statement inside an else statement into an `else if`.

![Merge Nested Else-If](https://p42.ai/image/blog/2021-09-22-supercharge-vscode-with-32-javascript-refactorings/action-merge-nested-else-if.gif)

#### 19. Convert to '== null' Check
Convert a strict equality check against `null` and `undefined` into an equivalent `== null` check.

![Convert to '== null' check](https://p42.ai/image/blog/2021-09-22-supercharge-vscode-with-32-javascript-refactorings/action-eq-eq-null.gif)

#### 20. Combine Return Statements with Conditional
Convert an `if`-`else` statement with `return` into a conditional.

![Combine Return Statements with Conditional](https://p42.ai/image/blog/2021-09-22-supercharge-vscode-with-32-javascript-refactorings/action-return-ternary.gif)

### C. Code Modernization

#### 21. Add numeric separators
Adds '\_' separator to decimal, hex, binary, octal and big int literals (ES2021).

![Add Numeric Separators](https://p42.ai/image/blog/2021-09-22-supercharge-vscode-with-32-javascript-refactorings/action-add-numeric-separator.gif)

#### 22. Assign Defaults with Nullish Coalescence
Shorten default value assignments with nullish coalescing operator (ES2020).

![Assign Defaults with Nullish Coalescence](https://p42.ai/image/blog/2021-09-22-supercharge-vscode-with-32-javascript-refactorings/action-nullish-coalescing-operator.gif)

#### 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](https://p42.ai/image/blog/2021-09-22-supercharge-vscode-with-32-javascript-refactorings/action-optional-chaining.gif)

#### 24. Convert Math.pow to Exponentation Operator
Convert `Math.pow(...)` expression to use the `**` exponentiation operator (ES2016).

![Convert Math.pow to Exponentation Operator](https://p42.ai/image/blog/2021-09-22-supercharge-vscode-with-32-javascript-refactorings/action-convert-math-pow-to-exponentiation.gif)

#### 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](https://p42.ai/image/blog/2021-09-22-supercharge-vscode-with-32-javascript-refactorings/action-block-scoped-variable.gif)

#### 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](https://p42.ai/image/blog/2021-09-22-supercharge-vscode-with-32-javascript-refactorings/action-arrow-function.gif)

#### 27. Convert to Object Method
Convert property assignments with functions to method declarations (ES2015).

![Convert to Object Method](https://p42.ai/image/blog/2021-09-22-supercharge-vscode-with-32-javascript-refactorings/action-convert-to-object-method.gif)

#### 28. Use Default Parameters
Convert default value assignments to parameter default values (ES2015).

![Use Default Parameters](https://p42.ai/image/blog/2021-09-22-supercharge-vscode-with-32-javascript-refactorings/action-default-parameter.gif)

#### 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](https://p42.ai/image/blog/2021-09-22-supercharge-vscode-with-32-javascript-refactorings/action-template-literal.gif)

#### 30. Use String.startsWith
Convert check of the first string character to `String.startsWith()` (ES2015).

![Use String.startsWith](https://p42.ai/image/blog/2021-09-22-supercharge-vscode-with-32-javascript-refactorings/action-string-starts-with.gif)

#### 31. Use String.endsWith
Convert check of the last string character to `String.endsWith()` (ES2015).

![Use String.endsWith](https://p42.ai/image/blog/2021-09-22-supercharge-vscode-with-32-javascript-refactorings/action-string-ends-with.gif)

#### 32. Convert .apply() to Spread Operator
Convert `.apply()` calls to use the spread operator (`...`) (ES2015).

![Convert '.apply()' to Spread Operator](https://p42.ai/image/blog/2021-09-22-supercharge-vscode-with-32-javascript-refactorings/action-spread-operator.gif)

You can find the **[P42 JavaScript Assistant](https://marketplace.visualstudio.com/items?itemName=p42ai.refactor)** in the [Visual Studio Code Marketplace](https://marketplace.visualstudio.com/items?itemName=p42ai.refactor).

Happy refactoring!