DEV Community

Cover image for 85 JavaScript Code Assists for Visual Studio Code
Lars Grammel for P42

Posted on • Originally published at p42.ai

85 JavaScript Code Assists for Visual Studio Code

JavaScript programming in an editor such as Visual Studio Code typically involves a lot of manual text editing, with the occasional copy-paste keyboard shortcuts or multi-cursor changes.

Code assists such as refactorings, code actions, and quick fixes are another tool in this repertoire. You can use code assists to make higher-level language-aware changes, e.g., you can extract an expression and all of its occurrences into a variable. When you make such changes manually, it can be time-consuming, and you risk making mistakes.

I've written an extension for Visual Studio Code called JavaScript Assistant that adds 85 code assists for JavaScript and TypeScript to make your life easier. You can find the code assists in refactoring and quick-fix context menus or invoke them with keyboard shortcuts. The JavaScript Assistant will also sometimes suggest recommended refactorings.

In this blog post, you can learn about code assists and how to improve your refactoring skills. Here are the code assists by category:

Code assists that belong to several categories appear more than once.

Core Refactorings

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

Code Assists for React

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

Code Assists for Logical Expressions

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

Code Assists for Branching Statements

Branching statements such as if-else and switch are central elements in many programs. Restructuring them can increase the readability of your programs, often in combination with refactoring their conditions:

Code Assists for Arrays and Loops

JavaScript has several ways of defining loops and many array methods that work on the whole array. The JavaScript Assistant provides several code actions for converting between different types of for loops and for converting to more idiomatic array methods such as array.includes().

Code Assists for Functions and Methods

Functions and methods are essential building blocks of any non-trivial program. The following code actions make it easier to work with functions, methods, and their parameters:

Code Assists for Strings and Template Literals

Text manipulation has become more powerful with the introduction of template literals in JavaScript. The JavaScript Assistant offers several code actions to help you work with text, be it strings or template literals:

Code Assists for Variables

Code Assists for 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 code assists:

JavaScript Modernizations

The Javascript ecosystem is progressing rapidly. 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. The JavaScript Assistant supports both codemod-like mass code refactoring and more opportunistic code modernization for the following upgrades:

Lodash Modernizations

With the introduction of various collection helpers and new syntax in ES6 and more recent JavaScript versions, some Lodash functions have become somewhat redundant.

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. The JavaScript Assistant shows hints and automates the cleanup for the following situations:

Other Code Assists

Conclusion

With the 85 code assists shown in this blog post, you can edit your JavaScript source code at a higher level than text and make quicker and safer changes to your code.

💡  If you want to give JavaScript Assistant a try, you can find it on the Visual Studio Code marketplace.

Discussion (2)

Collapse
andrewbaisden profile image
Andrew Baisden

Awesome these are so good!

Collapse
lgrammel profile image
Lars Grammel Author

Thanks!