What is Node.js?
Learn better with video? Skip to the overview video at the end of this post.
Nodeschool is both a series of ongoing workshop events and a website packed with open-source tutorials that will help you learn Node.js and related technologies via fun, interactive command-line challenges. Each challenge outlines a task for you to complete, gives you the background on how to go about it, and provides commands for you to verify that your solution is correct.
While I have not completed all of the tutorials available on Nodeschool, most that I have tried are high quality, and do a great job of teaching the core concepts. I have run into a couple of errors here and there, and the tutorials are not all consistent in terms of the level of detail provided in instructions, or in the reliability of the tutorial code, but for the most part they work very well. And since the tutorials are open-source (all the ones I tried are posted on Github), you can easily submit an issue for something that’s broken, or if you know how to fix it, submit a pull request and help improve the tutorial.
Visual Studio Code
For folks who may not be familiar with Visual Studio Code, it’s a lightweight code editor based on the Electron shell built by Github for their Atom editor. Microsoft originally used Electron to build the Monaco editor, aka Visual Studio Online. If you’ve ever edited a web site file from within the Azure Management Portal, you’ve used Monaco. Visual Studio Code is a stand-alone editor based on that work, with plenty of enhancements. It’s also much more streamlined than full Visual Studio, and provides a more distraction-free environment for working on your code, while still providing productivity features like IntelliSense, snippets, and more, with new features being added on a pretty regular cadence.
To take advantage of the nodeschool.io tutorials, you’ll need to have Node.js installed. You may already have a version installed, but if you don’t, you can just head over to https://nodejs.org/download/ and download the version for your platform.
IMPORTANT: While working on this post, the node team updated their versioning from v0.12.7 to a 4.x.x versioning. This change broke one of the modules used by the nodeschool tutorials on Windows such that the menu navigation does not work when using node version 4.x. You can read more about this issue, and track the resolution of it here. The workaround that I used is to install the 0.12.7 release from the “Other Downloads” link on the node homepage.
Finding Existing Node.js Versions
Note that Visual Studio 2015 has an option to install Node.js for working with task runners like Grunt and Gulp, so you might already have a version installed. But this version is installed in a way that does not put Node into the system PATH, so it’s private to Visual Studio (this was done to prevent conflicts with any existing Node install). Ryan Hayes discusses one pitfall of this in this blog post.
If you have Visual Studio 2015 installed, and chose the option to install Node, you have two options. You can go the normal install route for Node.js, or you can update your PATH environment variable to include the install path for the private copy of Node installed by Visual Studio (by default this would be C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\node & C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\npm for the Node Package Manager).
Installing Visual Studio Code
To get started with Visual Studio Code, simply head over to https://code.visualstudio.com/. The website should automatically detect your OS, and offer the correct download, but you can also choose alternate downloads (Windows, OS X, and Linux are supported).
At the time I’m writing this, Visual Studio Code is still considered a preview release, with the current version being 0.8.0. Despite the preview label, it’s quite stable, and very usable. And as noted above, with each updated release (releases have so far been on a monthly basis), more functionality is added.
Visual Studio Code has integrated support for working with git for source control, but is designed to work with your existing git installation, so if you do not already have git installed, you will need to install it to use it with Code.
NPM – The Magic Behind Nodeschool.io
at the command line. This pattern is consistent across all the tutorials, making them quite easy to use.
But Where Are the Files?
By default on Windows 8/8.1/10, the tutorial module files will end up in the folder C:\Users\[USERNAME]\AppData\Roaming\npm\node_modules. To get the path to your npm global location, particularly if you’re on Mac or Linux, type the following at the command line:
npm config get prefix
NPM will return the local path to the npm folder. Your global modules will be in the node_modules subfolder.
Note that this time, we’re not using the -g argument, so NPM will install the packages into a local node_modules folder. Since the command file isn’t at the root of the local folder, you now have to tell node where to find it, so to start the tutorial you need to type:
Be aware that I have not tested this with all of the tutorials, so it’s possible it may not work with all of them. Your best bet is to stick with the instructions and install the tutorial modules globally. If you are concerned about having too many modules installed globally, you can always uninstall them once you’ve completed a given tutorial, using the command (substitute the name of the module you want to uninstall):
Writing and Editing Your Code
Once you’ve installed a tutorial, and before starting it, you can easily launch Visual Studio Code in the current folder by typing:
In Windows, I like to take advantage of the snapping feature to run my command line and Code side-by-side, like so:
Then when you launch a tutorial, you’ll get a helpful menu of the available exercises, right alongside the editor, as shown below:
You can navigate the list with the up/down arrow keys, and start an exercise using the ENTER key. For each exercise, you’ll usually be creating a new file (I used the pattern of naming each file the same as the exercise, so I could easily keep track of them, but you can name them whatever you like), which you can do either in Visual Studio Code (File > New File or Ctrl+N), or via the command line (on Windows, type: ‘type NUL > introduction.js’ to create the file introduction.js). Visual Studio Code will automatically pick up new files and folders as they’re added.
Running and Verifying Your Code
One of the important things you should understand about the Nodeschool tutorials is that they often rely on input values from the environment, many of which you’ll use in the exercises. As such, you can’t simply run the code using the usual pattern of ‘node [filename]’ from the command line.
If your solution is correct, you should get a message to that effect. If it is incorrect, most of the tutorials will provide you with some tips on what to look for in correcting your code (note that some tutorials are better than others in that respect).
If, at any time, you want to reset the completed status of a tutorial, you can simply type:
4 thoughts on “Learn You Node with VS Code”
Great post and video! Suggest adding a key stroke viewer to capture the short-cuts to your future videos. (Carnac http://code52.org/carnac/ – from hanselman.com).
Thanks, Rusty! Appreciate the kind words and the suggestion.
Carnac looks interesting and I may give that a try. Will have to see if it can be filtered to just Ctrl/Alt/Win type key combos, as I’d prefer to avoid too much visual noise.
One more comment that might be useful: nodist (https://github.com/marcelklehr/nodist). Switch between node versions in Windows! Thanks to Jeremy Foster (@codefoster) for his tweet and his video https://channel9.msdn.com/Blogs/raw-tech/tidbits08 .