In a previous post, I wrote about these useful HTML shortcuts in Visual Studio Code.

It’s useful to know that Visual Studio Code offers some great code snippets for JavaScript as well.

These are snippets of code that can be generated automatically by using certain shortcuts (or “trigger texts”).

Using these shortcuts allow us to automate parts of the work and save time.

In this post, I share some of the built-in JavaScript shortcuts that I find most useful.

I sorted them into 3 main categories: Useful, Loops, and Conditional statements.

How it works

As you type the trigger text, you’ll notice a small menu pop up next to the text.

In some cases, the snippet option will appear at the top of this menu, so you only need to press the Enter key to insert that snippet into your code.

However, in other cases, the snippet option is not the first option and may appear lower in this menu. In this case, simply use the up and down arrow keys to highlight the snippet option you want, then press Enter.

For this to work, make sure the file you’re working on is a JavaScript file.

Useful

Console log

Typing log and then pressing the Enter key will add the following code:

console.log();

You probably write this line of code a lot when writing JavaScript code, as it is extremely useful for debugging. So using this great log shortcut can make the debugging process faster and more efficient.

Set timeout

Typing settimeout + pressing Enter will insert this function:

setTimeout(() => {
    
}, timeout);

Try-catch

Typing trycatch + pressing Enter will generate this code:

try {
    
} catch (error) {
    
}

This “try and catch” method allows us to handle errors efficiently, and so it’s a great way to improve the stability of your JavaScript code.

Loops

For loop

Typing for and selecting the “For Loop” option from the menu will generate this code:

for (let index = 0; index < array.length; index++) {
    const element = array[index];
    
}

For-of loop

Typing forof + pressing Enter will generate this code:

for (const iterator of object) {
    
}

For-each loop

Typing foreach + pressing Enter will generate this code:

array.forEach(element => {
    
});

Conditional statements

If statement

Typing if and selecting the “If Statement” option from the menu will generate this code:

if (condition) {
    
}

If-else statement

Typing ifelse + pressing Enter will insert this conditional statement:

if (condition) {
    
} else {
    
}

Switch statement

Typing switch and selecting the “Switch Statement” option from the menu will generate this code:

switch (key) {
    case value:
        
        break;

    default:
        break;
}

Quick adjustment

These code snippets are designed to be quickly adjusted to your code while reducing manual work.

For example, after inserting the switch statement using the switch shortcut, you’ll notice that the key variable is already highlighted, so you can change this to the correct variable name right away, without having to manually select it.

Also, pressing the Tab key will change the position of the cursor to the parts you might want to change.

So continuing with this example, pressing the Tab key will change the position of the cursor so that value is automatically selected and you can replace it with the correct value.