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

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

By Lars Grammel
By Lars Grammel
Published on December 21, 2021

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

💡  This blog post shows P42 JS Assistant v1.64

But first, here is an example of how P42 works to give you an idea of how it can help you:

P42 JS Assistant

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.

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:

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

ES2016

ES2020

ES2021

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:

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:

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:

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.

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:

Other Actions

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