Getting Started with VS Code for Node.js Development
As developers, there's one type of tool that we all use to express our intents into a langauge 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
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 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 with your current config or smooth out the barrier to entry with linting.
Debugger for Chrome
The Debugger for Chrome extension is a really powerful tool, and is honestly one of my favorites.
This extension allows 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.
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
The Docker extension is a powerful utility for kicking off containzerization 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 is a utility that will help you keep your settings for VS Code in sync across multiple installations - work computer, home computer, 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 is 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 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.