Visual Studio Code might have appeared as a bit of a surprise when it was first launched by Microsoft – why reach out to JavaScript developers? When did Node.js developers become so irresistible?
However, once you take a look inside you can begin to see why Visual Studio Code represents such an enticing proposition for Node.js and other JavaScript developers. Put simply, the range of extensions available is unmatched by any other text editor.
Extensions are almost like apps when you’re using Visual Studio Code. In fact, there’s pretty much an app store where you can find extensions for a huge range of tasks.
These extensions are designed with productivity in mind, but they’re not just time saving tools. Arguably, visual studio code extensions are what allows Visual Studio Code to walk the line between text editor and IDE. They give you more functionality than you might get from an ordinary text editor, but it’s still lightweight enough to not carry the baggage an IDE likely will.
With a growing community around Visual Studio Code, the number of extensions is only going to grow. And if there’s something missing, you can always develop one yourself.
But before we get ahead of ourselves, let’s take a brief look at some of the best Visual Studio Code extensions for Node.js developers – as well as a few others…
This post is part of a series brought to you in conjunction with Microsoft. Download Learning Node.js Development for free courtesy of Microsoft here.
The best Node.js Visual Studio Code extensions
Node.js Modules Intellisense
If you’re a Node.js developer the Node.js Modules Intellisense extension is vital. Basically, it will autocomplete JavaScript (or TypeScript) statements.
npm Intellisense
Npm is such a great part of working with Node.js. It’s such a simple thing, but it has provided a big shift in the way we approach application development, giving you immediate access to the modules you need to run your application.
With Visual Studio Code, it’s even easier. In fact, it’s pretty obvious what npm Intellisense does – it autocompletes npm modules into your code when you try and import them.
Search Node_Modules
Sometimes, you might want to edit a file within the node_modules folder. To do this, you’ll probably have to do some manual work to find the one you want. Fortunately, with the Search Node_Modules extension, you can quickly navigate the files inside your node_modules folder.
Node Exec
Node Exec is another simple but very neat extension. It lets you quickly execute code or your current file using Node. Once you’ve installed it, all you need to do is hit F8 (or run the Execute node.js command).
Node Readme
Documentation is essential. If 2018 has taught us anything it’s transparency, so we could all do with an easier way to ensure that documentation is built into our workflows and boosts rather than drains our productivity. This is why Node readme is such a nice extension – it simply allows you to quickly open the documentation for a particular package.
View Node Package
Like Node readme, the View Node Package extension helps you quickly get a better understanding of a particular package while remaining inside VSC. You can take a look inside the project’s repository without having to leave Visual Studio Code.
Read next: 5 reasons Node.js developers might actually love using Azure [Sponsored by Microsoft]
Other useful Visual Studio Code extensions
While the extensions above are uniquely useful if you’re working with Node, there are other extensions that could prove invaluable. From cleaner code and debugging, to simple deployment, as a Microsoft rival once almost said, there’s an extension for that…
ESLint
ESLint is perhaps one of the most popular extensions in the Visual Studio Code marketplace. Helping developers fix troublesome or inconsistent aspects of code, by bringing ESLint into your development workflow you can immediately solve one of the trickier aspects of JavaScript – the fact it can pick up errors sometimes a little too easily.
ESLint will typically lint an individual file on typing. However, it’s possible to perform the action on an entire workspace. All you need to do is set eslint.provideLintTask to true.
JavaScript ES6 Code Snippets
This is a must-have extension for any JavaScript developer working in Visual Studio Code. While VSC does have in-built snippets, this extension includes ES6 snippets to make you that little bit more productive. The extension has import and export snippets, class helpers, and methods.
Debugger for Chrome
Debugging code in the browser is the method of choice, particularly if you’re working on the front end. But that means you’ll have to leave your code editor – fine, but necessary, right?
You won’t need to do that anymore thanks to the Debugger for Chrome extension. It does exactly what it says on the proverbial tin: you can debug in Chrome without leaving VSC.
Live Server
Live Server is a really nice extension that has seen a huge amount of uptake from the community. At the time of writing, it has received a remarkable 2.2 million downloads.
The idea is simple: you can launch a local development server that responds in real-time to the changes you make in your editor. What makes this particularly interesting, not least for Node developers, is that it works for server side code as well as static files.
Settings Sync
Settings Sync is a nice extension for those developers that find themselves working on different machines. Basically, it allows you to run the same configuration of Visual Studio Code across different instances.
Of course, this is also helpful if you’ve just got your hands on a new laptop and are dreading setting everything up all over again…
Live Share
Want to partner with a colleague on a project or work together to solve a problem? Ordinarily, you might have had to share screens or work together via a shared repository, but thanks to Live Share, you can simply load up someone else’s project in your editor.
Azure Functions
Most of the extensions we’ve seen will largely help you write better code and become a more productive developer. But the Azure Functions extension is another step up – it lets you build, deploy and debug a serverless app inside visual studio code.
It’s currently only in preview, but if you’re new to serverless, it does offer a nice way of seeing how it’s done in practice!
Read next: 5 developers explain why they use Visual Studio Code [Sponsored by Microsoft]
Start exploring Visual Studio Code
This list is far from exhaustive. The number of extensions available in the Visual Studio Code marketplace is astonishing – you’re guaranteed to find something you’ll find useful.
The best way to get started is simply to download Visual Studio Code and try it out for yourself.
Let us know how it compares to other text editors – what do you like? And what would you change?
You can download Visual Studio Code here.
Find out how to get started with Node.js on Azure. Download Learning Node.js with Azure for free from Microsoft.
