Level Up Your JavaScript With These 60 Quick Fixes for VS Code

When programming, we often edit text directly to achieve our goals. Such manual editing can be slow and error-prone. For behavior-preserving changes (refactorings), automation can save you time, ensure the transformation is executed correctly, and warn about potential breakages. You can communicate your intention, e.g., "I want to extract this expression into a variable" more directly, and let the machine figure out the details.

I've written an extension for Visual Studio Code called P42 JavaScript Assistant that adds 60 automated refactorings, quick fixes, and cleanups for JavaScript and TypeScript to make your life easier. This blog post provides an overview of the different code actions and their categories. But first, here is an example of how P42 works to give you an idea of how it can help you:

Core Refactorings

Visual Study Code already contains basic refactorings such as Rename and Extract Function. P42 adds additional refactorings or extended functionality such as safety checking.

Extract Variable

Extract Substring into Variable

Inline Variable

Inline into Template

Inline Return

React Refactorings and Quick Fixes

In React, components often contain JSX, a syntax extension for JavaScript. P42 provides code actions that make working with JSX and React easier:

Extract React Function Component

Add {...} to JSX Attribute & Remove {...} from JSX Attribute

Collapse JSX Element & Expand JSX Element

Surround with <>...</> & Remove Unnecessary <>...</>

ECMAScript Modernizations

The Javascript ecosystem is progressing rapidly, thanks to the great work of TC39. However, it is hard to keep codebases up-to-date with the newer JavaScript features, and codemods are not always an option due to their significant churn and potential for breakages. P42 supports both codemod-like mass code refactoring and more opportunistic code modernization for the following upgrades:

ES2015

Collapse Object Property into Shorthand

Convert .apply() to Use Spread Syntax

Convert Function to Arrow Function

Convert Function to Object Method

Convert Loop to For...Of

Convert Var to Let & Const

Lift Default into Parameter

Use String.startsWith() & Use String.endsWith()

Use Template Literal

ES2016

Convert Math.pow to Exponentiation Operator

Use Array.includes()

ES2020

Use Nullish Coalescence in Default Expression

Use Optional Chaining

ES2021

Add Numeric Separator

Push Operator into Assignment (for short-circuiting expressions)

Actions for Logical Expressions

Boolean logic can be challenging to read, especially as expressions get more complex. P42 provides several refactorings that can help you simplify and tease apart logical expressions to make them easier to understand:

Flip Operator

Invert Condition

Pull Up Negation & Push Down Negation

Simplify Binary Expression

Remove Double Negation

Use == null Comparison

Extract Variable

Use Optional Chaining

Actions for If-Else Statements

If-else statements are a central element in many programs. Restructuring them can increase the readability of your programs, often in combination with refactoring their conditions:

Lift Statement Out Of If-Else

Merge Nested If-Statements

Merge Nested If Inside Else into Else-If

Separate Condition into Nested If

Remove Empty If Block & Remove Empty Else Block

Remove Redundant Else

Convert If-Else to Guard Clause

Convert Conditional Expression to If-Else & Convert If-Else into Conditional Expression

Convert If-Else to Switch

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 a single P42 quick fix:

Add {...} to Arrow Function & Remove {...} from Arrow Function

Add {...} to JSX Attribute & Remove {...} from JSX Attribute

Collapse JSX Element & Expand JSX Element

Collapse Object Property into Shorthand & Expand Shorthand Property

Convert Property Access to Dot Notation & Convert Property Access to Bracket Notation

Split Variable Declaration

Convert Language Elements

Sometimes you want to switch to a language element that is a better fit for what you are doing. For example, a for..of loop is more concise and can replace a regular for loop in many situations.

Convert Conditional Expression to If-Else & Convert If-Else into Conditional Expression

Convert Function to Arrow Function & Convert Function to Object Method

Convert If-Else to Switch

Convert Loop to For...Of & Convert Loop to ForEach

Push Operator into Assignment & Pull Operator Out of Assignment

Convert Var to Let & Const & Convert Let to Const

Code Cleanups

Code cleanups remove unnecessary code. Such code can result from code churn, e.g., by applying other refactorings, adding new features, or fixing bugs. P42 shows hints and automates the cleanup for the following situations:

Remove Double Negation

Remove Empty If Block & Remove Empty Else Block

Remove Redundant Else

Remove Unnecessary Conditional Expression

Remove Unnecessary Expression Statement

Remove Unnecessary JSX Fragment

Remove Unnecessary Template Literal

Simplify Binary Expression

Other Actions

Insert console.log for Variable

Surround with Try-Catch

If you find these refactorings & actions useful, you can install the P42 JavaScript Assistant from the VS Code marketplace.
For feedback and updates, you can find P42 on Twitter or LinkedIn.

Cheers!