By now, there is a growing number of .NET developers that are considering frameworks like Angular 2 for their next project. I’m assuming if you’re reading this, you are one of them. It is likely you are new to front-end development using only JavaScript (or TypeScript). You may be used to bundling JavaScript with an existing ASP.NET project. You may have seen the success of Angular 1 and heard some of the hype surrounding that framework. Now, with the impending release of Angular 2 it seems like a good time to take the leap and try your first web project that doesn’t use C# or VB.NET. Many of you want to stick with the Visual Studio IDE you already know. But should you?

Visual Studio has always done it all

For years, .NET Developers have used the most comprehensive IDE available: Visual Studio. Need a console app? There’s a template for that. Need a web-based API? There is a template for that too. You can start with a template, add some code, build, test, run, and deploy without leaving the IDE. Now that you want to work with Angular 2 and TypeScript, should you use Visual Studio 2015 or should you start using Microsoft’s new editor: Visual Studio Code?

Wait – what is Visual Studio Code?

Despite being available as a separate product for over a year, many Microsoft developers are unaware of the existence of the Visual Studio Code.  It is a cross-platform source code editor that works well for a number of languages including TypeScript. It is built to provide a lighter weight development environment than Visual Studio 2015. It is far less visual and more keyboard-focused. It has become a favorite of many frontend and backend JavaScript developers. This could make it a natural choice for Angular 2 and TypeScript development. But it doesn’t have the same set of features as Visual Studio 2015. So, which should you choose?

For this comparison, we will concentrate on those features that assist in building frontend apps using Angular 2 and Typescript. I’ve compiled a list of features below that developers will look for when using a software development tool that can help you make that choice:

Extensions that help you develop

Visual Studio Code has its Extension Marketplace and Visual Studio 2015 has its built-in “Extensions and Updates” section. Both enable you to add features to the IDE, and integrate new tools. I’m not talking sample code here. The same sample code could be used to jumpstart an application in either environment. Visual studio Code has a number extension focused on snippets:

Visual Studio 2015 does not advertise Angular 2 snippets as of this writing. There are TypeScript extensions, however.

Winner: Visual Studio Code

 

Code Organization

The difference here might seem subtle, but affects how we’ll evaluate other features. It’s important to recognize that both approaches will rely on the following configuration files for Angular 2 and TypeScript development:

• NPM – package.json provides a list of the third-party libraries used in the application.
• TypeScript – tsconfig.json configures which types are recognized and how TypeScript is built.
• Typings – typings.json – configures type dependencies for the application.

These three have their own tools that will use these files to determine the composition of your application. The tools we are looking at interact with these tools and configuration files in very different ways.

Visual Studio Code’s lightweight approach to code organization is only concerned with folder and file management. As a result, Code leaves the management of these files and the use of the tools to the developer.   A different approach is taken by Visual Studio 2015. An additional layer of organization is added for the developer to manage: solutions and projects. The solution files(*.sln) and project (*.csproj) files are the true organizers of what code inside Visual Studio 2015. These files not only determine what files are “in” the project, but they are deeply integrated with the existing build and deployment approach of MSBuild. As a result, Visual Studio 2015 attempts to manage the interaction of the user with NPM, the TypeScript compiler, and Typings within the project. In addition, the solution and project files integrate with a specific build and deployment approach despite whether the developer uses it or not. You can find as many articles online of how to turn off Visual Studio 2015 features as you can of how to use them.  Your opinion of whether this is a benefit or significant problem may influence your opinion of other features. For me, I would prefer the more basic approach of Visual Studio Code and manage the interaction with these critical tools myself using scripts.

Winner: Visual Studio Code

 

Source Control Integration

With Visual Studio Code you have the choice of one integrated source control system: GIT. That’s it. At the time of this writing, there is one extension in the Marketplace that promises TFS integration, but I haven’t tried it out. Of course, If you want to utilize another tool outside of Code, you can – but we are looking for integrated tools. Visual Studio 2105, however, will allow you to integrate with TFS, Git, Subversion, etc. Many developers may not have a choice in picking their source control. In this case, Visual Studio 2015 offers more choice.

Winner: Visual Studio 2015

 

Templates

No one wants to code their entire application structure every time they start a new project.  Project templates are a feature of visual Studio 2015 that helps you jumpstart your application. But at the moment there isn’t a built-in project template for VS 2015. You can create an HTML Application with TypeScript project, but that is an old (2012) project not built for Angular. Of course, nothing is stopping you from creating an Angular 2 project template yourself. But, you have to wonder why more people haven’t… That may be a clue that Angular 2 and TypeScript development isn’t happening in Visual Studio 2015 on a regular basis. Visual Studio Code does not have the concept of Templates, only Snippets (see below).

Winner: Neither

 

Snippets

Both development tools provide snippets through their Extensions (see above). Visual Studio Code has the most Angular 2 and TypeScript focused snippets.

Winner: Visual Studio Code

 

Editing

Visual Studio Code gives us “Smart Editing” which allows you to “Go to Definition”, “Peek Definition”, “Find all References”, “Change All Occurrences”, “Rename Symbol”, etc. In short, this isn’t a glorified version of Notepad – it’s a full featured code editor in its own right. However, Visual Studio 2015 is the real standard here: it has all the features you could expect or want and it has powerful 3^rd party tools that can further improve your code.

Winner: Visual Studio 2015

 

Debugging

Most modern browsers provide a Developer Tools feature that enables debugging. However, many .Net developers may prefer to debug within their development environment. Visual Studio Code currently supports remote debugging of front end apps using extensions found in the Extension Gallery. For example there is a Chrome debugger. Visual Studio 2015 has supported Script Debugging for a long time. However, to do this you must take the separate step of attaching to the process (the browser) running the script. This is one area where Visual Studio Code provides a more tightly integrated experience than Visual Studio 2015.

Winner: Visual Studio Code

 

Build

Since we are talking about TypeScript files, the term ‘build’ is referring to code checking the source files and running a transpiler to convert them to JavaScript. Visual Studio Code has no built-in build process and delegates the build responsibility to the Developer outside of the tool. Visual Studio 2015 is tightly coupled with MSBuild. This configuration-driven process is controlled by the contents of the project file (*.csproj for example). MSBuild can compile TypeScript in place, but there are a number of reasons you may not like mixing the output of this process (new .js and .js.map files) into your application source folders. This seems like the TypeScript equivalent of mixing your C# bin output with your source files. You can turn this feature off in the tsconfig.json file using:

<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>.

Unfortunately, this just removed the basic build integration that Visual Studio 2015 provides. While it is possible to customize MSBuild for TypeScript, you are committing to MSBuild. The critical question is whether you want to commit to using MSBuild. Many developers find this configuration-based build tool to be inflexible and opt for writing their own build scripts using a tool like Grunt, Gulp, etc. The good news for that approach is the ability to run the script task from within both Visual Studio Code and Visual Studio 2015. If you prefer the command line, Visual Studio Code contains an integrated terminal. I don’t see MSBuild integration as an advantage.

Winner: Neither

 

Package & Deploy

This seems like a repeat of the build experience. Visual Studio Code does not offer a package and deployment feature. Visual Studio 2015 does have an integrated approach called Web Deploy.  Again, it is a configuration-based tool like MSBuild that many developers find limiting for front-end applications. Current industry best practices of minification, obfuscation, and bundling are more easily handled by 3td party tools like Browserify, Webpack, or JSPM. Just like MSBuild, I don’t see Web Deploy integration as an advantage.

Winner: Neither

 

Conclusion

Tallying up my scoring makes Visual Studio Code the winner. Of course, if you disagree with my assessment of MSBuild and Web Deploy, it’s a tie with the advantage going to Visual Studio 2015. Integration can be either an enabler or an obstacle.  As a final thought, I would suggest we consider where Microsoft has been spending its time and money on JavaScript development (and by extension, TypeScript). Over the last year a tremendous amount of thought attention and dollars has gone into Visual Studio Code and Open Source in general. Fewer such features have made it into Visual Studio 2015. I don’t think this means Microsoft is abandoning Visual Studio 2015 in favor of Visual Studio Code. However, in the fight for developer loyalty, Microsoft has found an effective weapon in Visual Studio Code and that’s what I’ll be using for JavaScript or TypeScript development in the future.