Should I Use Visual Studio 2017 or VS Code For My Next Angular Application?


I engage with a lot of our customers that work on Angular applications and I frequently get asked the following question: Should we use Visual Studio 2017 or VS Code for our next application? The short answer is doesn't matter because both provide similar capabilities for the most part. In this blog post I will show you how to setup both environments to allow you to be productive when building your next Angular application.

Before I start let me debunk couple myths:

  • Myth 1: Visual Studio 2017 doesn't support folder based projects which is essential for Angular applications that are built using the Angular-CLI. Thus, it is easier to work with VS Code when it comes to Angular projects.
  • Reality: Visual Studio 2017 now supports folder based projects which makes the experience similar to that provided by VS Code.

 

  • Myth 2: Visual Studio is a better choice for back-end piece whereas VS Code would be a better choice for the front-end piece.
  • Reality: Both are equipped to handle both scenarios. With the new Asp.Net CLI tools for example you can now easily build Asp.Net WebApi projects with VS Code as the tools are disconnected from the IDE.

 

  • Myth3: Use VS Code only if you are working against git based repositories as VS Code doesn't support checking into repositories using TFVC as the version control.
  • Reality: Both support Git and TFVC.

 

In this post I will focus on debunking the first myth while addressing the other myths in future posts.

In this example I will assume that you have already created an Angular application using the Angular-CLI. As you can see in the following figure, Visual Studio 2017 allows loading folder based projects. As a matter of fact Visual Studio 2017 installation adds a context menu where it allows you to simply right click inside the folder and load it with Visual Studio 2017.

Here is an Angular project loaded and being served from the terminal using the ng serve command. In this example I am using the Whack Whack terminal emulator extension for Visual studio which can be found here.

The same code loaded with VS Code provides a similar experience. Just like Visual Studio 2017,  you can add a context menu ( you have to opt in during installation of VS Code) which allows you to right click inside the folder and load it with VS Code. Here is an Angular project being served from the built in terminal using the ng serve command.

As you saw above, VS Code and Visual Studio 2017 are not meant to replace each another, but rather complement each other. Some people like the experience of a full fledged IDE like Visual Studio 2017 while others prefer the experience of a code editor like VS Code. Regardless of which one you pick you will be productive while developing your next Angular application. Note that at the time of writing this post Visual Studio 2017 is only available on Windows and Mac while VS Code is available on Windows/Linux/Mac as its built using an electron shell.

 

 

Comments (12)

  1. Bydia says:

    Great article. I’m in the process of moving from an Asp.net MVC 4/WebAPI with ExtJS(terrible) frontend to a more frontend based web like Vue.js and WebAPI on the backend.
    Still got a lot of new tech. to learn and I’m not excited about npm.
    Hoping that my next web can work both with from a backend and as a PWA or Cordova app.
    Looking forward to your next article.

    1. Wael Kdouh says:

      I am glad to hear that you enjoyed the article.

  2. Harry Pfleger says:

    Link to Terminal Emulator is not working. I guess it is this one https://marketplace.visualstudio.com/items?itemName=DanielGriffen.WhackWhackTerminal

    1. Wael Kdouh says:

      Thanks for pointing that out Harry. Its has been fixed.

  3. But VSCode is free for any team size. What about VS2017? It is up to 5 only isn’t it?

    1. Wael Kdouh says:

      HI Bruno. I think you are mixing Visual Studio with VSTS. Visual Studio Community edition is free.

      1. Not exactly free, at least from what I found here https://www.visualstudio.com/vs/compare/

        Non-enterprise organizations, for up to 5 users (Enterprise organizations are defined as >250 PCs or > $1 Million US Dollars in annual revenue.)

  4. Mehdy says:

    I am using angular cli project in vs 2017 and have no problem, even when I am using class library project

  5. Marvin says:

    Great read! Your article is for VS2017 for Windows, does it also hold true for VS2017 for Mac? Thanks.

  6. Manish Jain says:

    I think myth 2 is not really a myth. VS 20XX works best for traditional .NET apps whereas UI projects work well with VSCode. I agree recent versions of VS 20XX gotten better with UI frameworks but I prefer VS Code lightweight editor for my UI projects especially if you are on a mac. Myth 3: Need better support for TFS integration for VSCode and VS for Mac as of October 2017 before mass migrates from traditional VS 20XX IDE. VS Code git support needs to improve to support all advanced scenarios also need good git/tfs explorer within the editor.

    1. Wael Kdouh says:

      Manish I agree that VS Code seems to be a better match for JavaScript frameworks in general. As a matter of fact I find myself using it more often when it comes to my Angular projects. The point worth pointing out here though is that VS 2017 supports folder based projects which is great for projects like Angular where you don’t need a solution.

      Thank you for the great feedback regarding the TFS integration. I will make sure to relay your feedback to the product team. Have you checked GitLens extension for VS Code by any chance? Its my go to extension for all my git projects.

  7. Dustin Horne says:

    I use and prefer VS2017 however it does have some real annoyances when it comes to auto formatting that can’t be completely fixed. Editor.config support helps but the merge tool doesn’t honor it for instance and will jack up your line endings from LF to CRLF.

Skip to main content