Setting up my javascript developer toolchain in Visual Studio

javascript, node.js, Software Development, Visual Studio, , ,

Developing with node.js in VS has to cover the entire workflow from project scaffolding to building. This article gives an overview of the tools available and the degree of integration. …

Being a developer with a .Net and C# background I’m currently trying to set up my development toolchain with node.js in Visual Studio, using the just released Node Tools for Visual Studio 1.0 RC (NTVS). I’m in it now for a week and will report some of my findings, write about my growing understanding of the javascript developer ecosystem and post solutions to obstacles encountered on the way.

I had my first contact with the language in the 90ies, but given the rapid evolution of tools and environments in the last 5 years, I’m a javascript newbie. So what elements should a complete javascript dev workflow with node.js comprise?

Toolchain building blocks

This is my first sketch of the stack (front-end libraries exempt):

Javascript Dev Stack

 

Project scaffolding

Set up projects and add items

Tools of choice: Visual Studio or Yeoman

Integration: Yeoman is the most popular scaffolding tool in the node.js community and provides a great variety of generators for all different kinds of projects.  For Visual Studio on the other hand project scaffolding (project templates, solution explorer etc) is a core element of the IDE, which couldn’t easily be replaced. So there is simply no integration of yeoman into a VS integrated workflow. If you want to scaffold your project or parts of your projects with yeoman you have to use the command line. It would be nice to have a yeoman generator for VS project and solution manifests, though.

Package Management

Load packages from repositories and check package and code dependencies.

Tools of choice:
* npm – managing server-side packages
* bower – managing client-side packages

Integration: NTVS offer contextual actions in Solution explorer, with a tools+extension-like dialog for npm as well bower support. You also could issue npm and bower commands in the Package Manager Console, but in my first hacks this was not as reliable as the node.js command line. My post on using npm and bower in Visual Studio will go into details here.

Code Editing

Edit markup, templates, code and stylesheets with code completion, intellisense and code checks while you type. This is of course handled exceptionally well by Visual Studio itself (with support from  Web Essentials). So there are no integration issues at all.

Building

Automating all tasks required for building your project

Tools of choice: grunt, gulp

Integration: With Node.js tools 1.0 RC, Task Runner Explorer and Grunt Launcher integration there is already very good tooling built into Visual Studio.

Testing

Unit testing and end-to-end testing with a testing framework, assertions, stubs, mocking and require-handling.

Tools of choice:

Integration: Tests can be run via the grunt launcher or the task runner explorer. Output is probably via the output tool window – did not check on that yet.

While exploring each of these areas I plan to cover them in follow-up posts:

 

Articles to get you started
* NodeJs Testing Essentials by Fred Schott
* Jster Javascript Territory gives a great overview over javascript testing frameworks but seems to be a bit outdated
* Javascripting is a quite comprehensive database of javascript frontend libraries