Node.js support in Visual Studio

Setup Visual Studio for Node.js

Setup Visual Studio for Node.js

If you have known me for any length of time, you know that I’ve been in the .NET community for over 15 years. I have been in software development even longer, over 2 decades. I’ve seen many technologies and paradigms reborn (think of task runners… Make => Shell Scripts => Ant => NAnt => MSBuild => npm => Grunt => Gulp). Rarely, do us long-toothed developers see anything truly new.

Node.JS is different. It brings everything we’ve learned in the past 15 years of software development into one cohesive language:

  1. Unit testing
  2. Package management
  3. Module support
  4. Excellent IDE support
  5. Great on-line documentation
  6. Excellent community support

Visual Studio has always been the most mature IDE in the Windows ecosystem. Let’s be honest… I love Visual Studio. Parts of Microsoft development stack have their legacy warts. Even so, when people always ask me why I develop using C# and Microsoft technologies even though I have a long Unix background. I answer, because “Visual Studio is amazing”. It truly is the standard by which all other IDEs are measured. Over the last year, Microsoft has put serious effort in to Visual Studio support Node. Let’s take a look at the Node support.

Please remember, this post targets C# developers who are learning Node.js who are comfortable in Visual Studio. Alternatively, you could be a Node developer who is struggling with existing IDEs. In either case. I hope you find the following tutorials helpful.

Install Visual Studio 2015

You have several choices of Visual Studio to choose from:

  1. Visual Studio 2015 Community edition
  2. Visual Studio Code

For this example, we’ll be using Visual Studio 2015 Community Edition. For the uninitiated, installing Visual Studio is a big process. Prepare at least an hour of time! It’s a huge tool but very worth it.

Install Node.js

  1. Download and install Node.js

Install Node Tools for Visual Studio

  1. Download Node Tools for Visual Studio

Install NPM support for Visual Studio

  1. Start Visual Studio
  2. Tools -> Extensions and Updates
  3. Search for npm
  4. Select and install the NPM Scripts Task Runner
    NuGet NPM Task Runner
  5. Restart Visual Studio

Create a simple Node.js project

This is the boilerplate project we’ll be using in my next post covering modern software development with Node and VS.

  1. Open the Node templates
    • File -> New Project -> Templates -> Other Languages -> JavaScript -> Node.js
  2. Select Blank Node.js Console Application
    NodeJS templates
  3. You should see a basic project
    console template
  4. Press F5 to run
  5. A console should appear with the famous “Hello world” statement
  6. Close the window to continue

Already, you have a lot of features. Set a breakpoint (F9) in app.js at line one and press F5 again to run. The debugger will stop at line one. Can see all the variables in the Locals window. The Interactive Window also works.

Setting up the task runner

Now we’ll setup the package.json and the task runner to show Visual Studio’s support for npm scripts.

  1. Open package.json
  2. Modify the file by adding the script section as shown below and save
  1. Show the Task Runner Explorer
    • View -> Other Windows -> Task Runner Explorer
      npm task explorer
  2. You may need to press the reload button
  3. You’ll see a task named “run”
  4. Right click on run and select start

A new task window opens and your program runs.

You now have a full Node.js environment. My next post in this series will show how to use the package management features and write unit tests. Stay tuned!

Share this Post