Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Getting Started With VS Code for Node.js Development

DZone's Guide to

Getting Started With VS Code for Node.js Development

If you're working on a project in Node.js, read on to get some great tips on optimizing Visual Studio Code for all kinds of Node.js projects.

· Web Dev Zone
Free Resource

Get deep insight into Node.js applications with real-time metrics, CPU profiling, and heap snapshots with N|Solid from NodeSource. Learn more.

As developers, there's one type of tool that we all use to express our intents into a language that systems can interpret and act on: the text editor.

Text editors can be as in-depth or as simple as you want them to be. I personally use VS Code to write both code and prose. I've personally tweaked VS Code to be streamlined to my taste for writing apps in Node.js and wanted to share some of the Node.js tooling (outside of N|Solid and Certified Modules) that I use.

Today, I wanted to highlight some extensions and tools and help you get up and running with VS Code as the perfect text editor for Node.js.

Node.js Extensions to Start Using With VS Code

npm IntelliSense

The npm InteliSense extension is a small utility to enable autocompletion of module names in require statements using the VS Code IntelliSense feature. The extension is dead simple but provides a nice quality of life improvement when in development.

ESLint

ESLint is, at this point, the linter that most Node.js developers use - even if you use something like StandardJS, you're just using a standardized ESLint config. So, installing the most popular ESLint extension for VS Code is something that will help you get settled in your current config or smooth out the barrier to entry with linting.

If you're not sure why you should be using a linter in your projects, or just not convinced that you need one, I wrote an article on how ESLint can help streamline your JavaScript workflow a while ago - you should take a read if you'd like to get started.

Debugger for Chrome

The Debugger for Chrome extension is a really powerful tool and is honestly one of my favorites.

This extension takes advantage of the Chrome Inspector Protocol to allow access to debugging from within VS Code - I really love this, as it allows me to have the debugger info in my text editor and work on everything from a single location.

Code Metrics

Code Metrics is a pretty awesome extension for self-monitoring. Put simply, it analyzes your JavaScript (and TypeScript, too) and informs you on the interpreted complexity of it.

If you're implementing something in a crazy complex way, Code Metrics will surface that you may be taking a bit too complex of an approach. I like this, as it provides a simple feedback mechanism to personally monitor and tone things back if I need to.

Ecosystem Extensions and Utilities to Start Using With VS Code

Docker

The Docker extension is a powerful utility for kicking off containerization with Docker directly from within VS Code.

It has a host of features, including being able to generate a boilerplate Dockerfile for your Node.js app, adding in syntax highlighting for Docker-related filetypes, adds linting for Dockerfiles, and a host of other small, but useful, features.

There's a lot to digest with Docker - I'm still getting up to speed myself - but this extension is a super helpful tool to help you speed up and automate your workflows around Docker.

If you're interested in the Docker extension for VS Code, we recently did a webinar with Jonathan Carter of Microsoft going over the full development lifecycle of building and deploying Node.js apps with Docker and orchestrating them with Kubernetes. Definitely, check it out if you'd like to go a bit deeper with the subject.

Keymaps From Other Editors

This is something I've seen asked for several times when developers are moving over to VS Code - the VS Code key bindings are key bindings, just like any other text editor has its key bindings. That said, if you're moving to VS Code from another editor, you're likely to still be familiar with that editor's bindings.

Luckily, VS Code has a bunch of keymap extensions - these are the ones I've seen and heard people ask for directly:

I'd bet if you're trying out VS Code and are used to another editor there will likely be a keymap in the keymaps section of the Extensions site - check there if you'd like to try out VS Code and keep your last text editor's bindings.

Settings Sync

Settings Sync is a utility that will help you keep your settings for VS Code in sync across multiple installations -  your work computer, your home computer, your other work computer - with some setup using GitHub Gists as a storage mechanism.

Azure Functions Tools

It was well under a year ago that Azure launched Azure Functions, the serverless FaaS platform for Azure. Serverless is a quickly growing space, especially for Node.js - as such, Node.js + Azure Functions + VS Code is a pretty potent combination.

The Azure Functions Tools are another very simple IntelliSense extension that adds in autocompletion for Azure Functions' JSON files.

Quick Wins With VS Code Extension Packs

Extension packs are something relatively new but are a really great way to bundle up useful extensions together then share them as one collection.

There are a handful of extension packs that have been published so far, but I wanted to collect some that you may find useful.

  • The Node.js Extension Pack: The Node.js Extension Pack is a pack focused on development with Node.js and enabling you to have quick and easy flow for Node.js development in VS Code.
  • The Azure Extension Pack: The Azure Extension Pack is a pack focused on everything related to Azure - a ton of easy wins here if you're currently using Azure or want to spin something up on the cloud quickly.
  • The Git Extension Pack: The Git Extension Pack is an extension pack that adds to one of my favorite core features of VS Code, which is the built-in Git integration and tooling. Definitely highly recommended if you're using Git for version control.
  • The Node.js Development Quickstart Pack: The Node.js Development Quickstart Pack is an extension pack with all the extensions listed in this article, sans the keybinds and other extension packs. If you want to try everything out, go ahead and install it!

One Last Thing

If you’d like to stay in the loop about Node.js, developer tools, Docker, and more, we try to keep you informed about what's happening in the worlds of Node.js, Docker, Kubernetesnpm, and more.

If you'd like to learn more about developing with Node.js + Docker + Kuberenetes and deploying straight to the cloud, you should check out our recent #NeedToNode webinar with Jonathan Carter of Microsoft where he went through the entire process of development to production using VS Code, NodeSource N|Solid, and Azure. Definitely worth a watch if you want to see how it all comes together.

Node.js application metrics sent directly to any statsd-compliant system. Get N|Solid

Topics:
node.js ,visual studio code ,web dev ,azure

Published at DZone with permission of Tierney Cyren, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}