Everything You Need to Have a Rocking Node IDE on Windows for Free
If you are a developer with a background in using big integrated development environments like Visual Studio, Eclipse, JetBrains, etc. than it may be fairly daunting to go back to the terminal (console, command-line, PowerShell, black box where you type in computer instructions) to work with this newfangled programming environment that everyone is talking about: node. Don’t worry, I am here to show you the way to get back the IDE and still develop for node.
Nowadays I find myself using JavaScript for every single piece of development I am doing; whether it’s desktop apps (Windows Apps support HTML5/JS as a first class citizen) or web apps or even small scripts for my Internet of Things boards. To be honest, I believe the value proposition of having a single language on both the front-end and backend is too strong to drop once you’re firmly down that path. However, I can understand a certain discomfort with the terminal so let’s assuage this. This is everything you need to have a rocking Node IDE on Windows for the very low sum of zero dollars.
Basecamp: Node.js
Download: https://nodejs.org/download/ Node.js is a runtime environment and library for running JavaScript applications outside the browser. Node.js is mostly used to run real-time server applications and shines through its performance using non-blocking I/O and asynchronous events. If you do not install node properly and test that both node and npm are on your PATH, do not continue! There will be no point as nothing will work.
Detailed instructions are available here: https://blogs.msdn.com/b/cdndevs/archive/2014/09/04/node-js-tutorial-series-a-chatroom-for-all-part-1-introduction-to-node.aspx
P.S. If you are not scared of the terminal, go ahead and install Chocolatey. It is a great package manager for Windows (similar to Brew on OSX or RPM/Apt-Get/Deb/etc. on Linux).
Basecamp: Visual Studio Community Edition (FREE)
Download: https://www.visualstudio.com/en-us/news/vs2013-community-vs.aspx
Visual Studio Community 2013 is a new edition that enables you to unleash the full power of Visual Studio to develop cross-platform solutions. You get professional-grade editing, code analysis, and debugging support, support for open-source workflows (Git), compilers for managed languages, C++ and others, cross-platform mobile development for your preferred device and platform, including the web, Android, iOS, and Windows Phone, ability to take advantage of cloud services and incorporate modern app analytics and telemetry with Application Insights.
BUT, most importantly, you can also access all the Visual Studio 2013 extensions on the Visual Studio Gallery. This is the key point! Visual Studio is *the* IDE and the Community Edition is your gateway.
Camp 1: Node Tools for Visual Studio
Download: https://nodejstools.codeplex.com/
Node Tools for Visual Studio (NTVS) is a free, open source plugin that turns Visual Studio into a Node.js IDE. NTVS supports Editing, Intellisense, Profiling, npm, TypeScript, Debugging locally and remotely (Windows/MacOS/Linux), as well Azure Web Sites and Cloud Service. Yes… you read that right, you can use Visual Studio (on Windows) to remotely debug node apps running on a Linux server.
Camp 2: Web Essentials
If you have made it this far, you’re pretty much ready to go building node.js web apps. However, I would like to make your experience with Visual Studio even more awesome.
Download: https://vswebessentials.com/
“Web Essentials extends Visual Studio with a lot of new features that web developers have been missing for many years. If you ever write CSS, HTML, JavaScript, TypeScript, CoffeeScript or LESS, then you will find many useful features that make your life as a developer easier.” YOU NEED TO INSTALL THIS EXTENSION! IT IS AWESOME!
Reason why it’s awesome #1: If you use Markdown, you get full editor with previews and file generation right in your IDE.
Reason why it’s awesome #2: Unminify CSS on Right-Click. This literally blew my mind.
Reason why it’s awesome #3: #region support in JavaScript.
Reason why it’s awesome #4: Preview window for LESS, shows you what the compiled CSS will look like.
I can keep going… but hopefully the point has been clearly made.
Summit: Task Runner Explorer, Package Intellisense, Grunt Launcher Extension
Did you think it was over? No. It’s not over yet, there’s so much more. Three extensions that will make your life painless (if you use Bower, NPM, Grunt, Gulp that is…)
Task Runner
Download: https://visualstudiogallery.msdn.microsoft.com/8e1b4368-4afb-467a-bc13-9650572db708
“This extension lets you execute any Grunt/Gulp task or target inside Visual Studio by adding a Task Runner Explorer window. You can also bind any Grunt/Gulp task or target to a Visual Studio event, such as Build and Solution Open. That way you can run certain tasks when you build your project or run Grunt Watch when the solution is opened.” Mads Kristensen rocks.
Scott Hanselman did a great job writing an article demoing how this can all work together.
Package Intellisense
Download: https://visualstudiogallery.msdn.microsoft.com/65748cdb-4087-497e-a394-2e3449c8e61e
NPM and Bower package Intellisense directly in the Visual Studio JSON editor... As you edit package.json and are adding packages (if you don’t want to use npm install --save), it will autocomplete and give you package suggestions as you type. It also gives you a context menu on right click to update the package you are hovering on.
Grunt, Gulp, Bower Launcher
Download: https://visualstudiogallery.msdn.microsoft.com/dcbc5325-79ef-4b72-960e-0a51ee33a0ff
This plugin lets you right-click on your gulp or grunt file and execute any of the tasks within, it also gives you a context menu for executing bower updates on right click.
Conclusion
There you have it, everything you need to have an awesome Nodejs IDE on Windows for FREE. If you think I am missing something from this list and it absolutely needs to be on here, you can tweet at me.