Setting up VS Code for JavaScript Development
Tags: vscode, productivity, javascript, beginners
Published: 2020-08-22 18:41:27

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

{% post dsp9107/how-did-i-start-my-tech-journey-53ia %}

---

## 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)](https://code.visualstudio.com/docs/setup/setup-overview)

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. :grinning:

## 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](https://code.visualstudio.com/docs/editor/integrated-terminal)

### **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.

![intellisense in action](https://dev-to-uploads.s3.amazonaws.com/i/myiu7l8sojq5y9pn6z0e.gif)

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](https://code.visualstudio.com/docs/editor/intellisense)


### **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?

![jump to definition](https://dev-to-uploads.s3.amazonaws.com/i/5b6895szxkwv65oajlie.png)

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.

![matching brackets](https://dev-to-uploads.s3.amazonaws.com/i/ivtunn6f7ra353wnwi52.png)

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](https://code.visualstudio.com/docs/editor/editingevolved)


### **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)](https://www.atlassian.com/git/tutorials/install-git)

[Detailed Usage](https://code.visualstudio.com/docs/editor/versioncontrol)


### **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.

![emmet in action](https://dev-to-uploads.s3.amazonaws.com/i/g6sjvoi022xlc8jqeswf.gif)

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

[Emmet In Action](https://docs.emmet.io)

[Detailed Usage](https://code.visualstudio.com/docs/editor/emmet)


## 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](https://eslint.org/demo)

### **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.

![prettier demonstration](https://scottsauber.files.wordpress.com/2017/06/prettier1.gif)

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

[Try It](https://prettier.io/playground)

## 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. :grin:

# References

- [VS Code Documentation](https://code.visualstudio.com/docs)

- [Scott Sauber - Never worry about formatting javascript again](https://scottsauber.com/2017/06/10/prettier-format-on-save-never-worry-about-formatting-javascript-again)

- [Litmus - What is Emmet](https://www.litmus.com/blog/what-is-emmet)

- [Sam Roberts - Why (and how) to use eslint in your project](https://medium.com/the-node-js-collection/why-and-how-to-use-eslint-in-your-project-742d0bc61ed7)

- [Flavio Copes - Keep your code clean with ESLint](https://flaviocopes.com/eslint)