Jaa

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

  • Artikkeli

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

  • Anonymous
    September 05, 2017
    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.
    • Anonymous
      September 05, 2017
      I am glad to hear that you enjoyed the article.
  • Anonymous
    September 05, 2017
    Link to Terminal Emulator is not working. I guess it is this one https://marketplace.visualstudio.com/items?itemName=DanielGriffen.WhackWhackTerminal
    • Anonymous
      September 06, 2017
      Thanks for pointing that out Harry. Its has been fixed.
  • Anonymous
    September 15, 2017
    But VSCode is free for any team size. What about VS2017? It is up to 5 only isn't it?
    • Anonymous
      September 16, 2017
      HI Bruno. I think you are mixing Visual Studio with VSTS. Visual Studio Community edition is free.
      • Anonymous
        September 28, 2017
        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.)
  • Anonymous
    September 15, 2017
    I am using angular cli project in vs 2017 and have no problem, even when I am using class library project
  • Anonymous
    September 28, 2017
    Great read! Your article is for VS2017 for Windows, does it also hold true for VS2017 for Mac? Thanks.
  • Anonymous
    October 19, 2017
    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.
    • Anonymous
      October 19, 2017
      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.
  • Anonymous
    October 25, 2017
    The comment has been removed
  • Anonymous
    April 14, 2018
    The comment has been removed
    • Anonymous
      April 15, 2018
      I personally prefer VS Code when I am building Angular since I am spending most of time using the cli. So having a light editor like vs code is a huge advantage. I also love the extension ecosystem for JS under VS Code which is think is richer. Now regarding your second question the answer really depends on what you are doing. If you are building UWP or Xamarin then you are going to use Visual Studio for sure. If I am building an Angular application I typically use VS Code as I find it to be a better experience. If I am building an Asp.Net core I could go with either although I still prefer Visual Studio especially when it comes to the diagnostics tools. So really at the end of the day they are not contending with each other but I look at it as complementing each other.
      • Anonymous
        April 16, 2018
        Thanks. Your experience seem to be similar to mine.