Setting up VS Code for JavaScript Development

You're familiar with the concept of modularity from OOPS, right? So, my introduction is not in this post. 😆

Article No Longer Available

---

Introduction

In this post, I'll tell you about how you can set up or tweak VS Code to boost productivity and quadruple your development speed, specifically for JavaScript Development.

Visual Studio Code

TL;DR Pretty good text editor. blah blah blah

Installation (All Platforms)

After installation, you can just start writing code. That's it! For JavaScript, of course. For some languages, you need to add extensions for support and IntelliSense to work.

Either you open a .js file to begin with or

• Press Ctrl + N to open a new blank file
• Click on Plain Text down right in the taskbar at the bottom
• Find or type in JavaScript and the option shall appear, click on it!

You're set!

You've already doubled your productivity. For more, keep reading. 😀

Features you will actually love

There are plenty of features but I'll share just those which have actually helped boost my productivity.

Integrated Terminal

Pressing Ctrl + ` will open a terminal in your workspace's directory. You can then run npm installations or your node servers right from within VS Code.

I know the mess it becomes with all those Alt + Tab window or even desktop switches just to keep a terminal up and keep checking the output of your blood and sweat.

Detailed Usage

IntelliSense

I'll keep it simple. IntelliSense basically offers code completions and quick info on the function's parameter list which means it will help you arrange your parameters which you pass when you call a function in the order in which the arguments are originally defined in the function's definition.

You can trigger the IntelliSense in any editor window by typing Ctrl + Space or by typing the dot character (.) in JavaScript.

IntelliSense for JavaScript is provided out of the box with some other languages too. Although, some languages do need extensions to be downloaded from VS Code marketplace.

Detailed Usage

Code Navigation

This comes in handy when your project grows. Forgot how the exported module from your other .js file imported into your currently open .js file works?

You can jump to the definition with ctrl + click or open the definition to the side with ctrl + alt + click.

You'll be taken to the imported/required module's function or object will take you to the origin file where the function is defined or object is declared.

The best part. Matching brackets will be highlighted as soon as the cursor is near one of them.

Pressing Ctrl + Shift + \ will take your cursor to the closing bracket of the current section of code.

Detailed Usage

Integrated Version Control

Don't remember all those git commands? No worries. VS Code comes with integrated version control with Git support in-the-box. That means you don't have to download any extension for Git-based version control systems to work collaboratively on any project.

Pressing Ctrl + Shift + G will open the Source Control pane.

Many other source control providers are available through extensions on the VS Code Marketplace.

Git Installation (All platforms)

Detailed Usage

Support for Emmet snippets

Inspired by CSS Selectors, Emmet allows you to type shortcuts that are then expanded into full pieces of code. Emmet abbreviation and snippet expansions are enabled by default in html, css, jsx, xml among other files.

When you start typing an Emmet abbreviation, you will see the abbreviation displayed in the suggestion list.

Emmet In Action

Detailed Usage

Extensions specific to .js development

Apart from the in-built features, you can also extend VS Code's functionality with Extensions available in VS Code Marketplace.

ESlint

Simply said, it keeps your code clean. If you don't want to spend hours debugging your code, just use this.

Besides checking style, linters are also excellent tools for finding certain classes of bugs, such as those related to variable scope. Assignment to undeclared variables (these leak into the global scope, contaminating it and possibly causing very difficult to find bugs) and the use of undefined variables are examples of errors that are detectable at lint time.

This story was written by Sam Roberts, a Senior Software Engineer at IBM Canada.

Running a linter against your code can tell you many things:

• if the code adheres to a certain set of syntax conventions
• if the code contains possible sources of problems
• if the code matches a set of standards you or your team define

It will raise warnings that you, or your tools, can analyze and give you actionable data to improve your code.

Try It

Prettier

There are times when we developers forget about indentation, use wrong quotes, etc. and have to show our code to our mates and it's embarrassing when they have to ask you to use proper spacing and blah blah blah.

Just press Alt + Shift + F and let Prettier do its amazing job.

Try It

Summary

If you have this setup, you'll be writing clean and beautiful JavaScript code in no time and will also make you hate debugging less. 😁

References

• VS Code Documentation

• Scott Sauber - Never worry about formatting javascript again

• Litmus - What is Emmet

• Sam Roberts - Why (and how) to use eslint in your project

• Flavio Copes - Keep your code clean with ESLint