Visual Studio Code – My First Impressions

Standard

Microsoft presented the new Visual Studio Code editor at their annual developer conference Build 2015. It is a code editor and Microsoft’s first cross-platform development tool.

I played around with Visual Studio Code on Mac OS X. This article provides my first impressions with this new tool.

Setup of Visual Studio Code on Mac OS X

The Visual Studio Code documentation contains detailed setup instructions for every platform. For Mac OS X I recommend that you follow all steps including adding the code function to your .bashrc file.

  code () {
      if [[ $# = 0 ]]
      then
          open -a "Visual Studio Code"
      else
          [[ $1 = /* ]] && F="$1" || F="$PWD/${1#./}"
          open -a "Visual Studio Code" --args "$F"
      fi
  }
  

Language Support

Visual Studio Code supports many different programming languages with different set of features:

Features Programming Languages
Syntax coloring, bracket matching Batch, C++, Clojure, CoffeeScript, Dockerfile, F#, Go, Jade, Java, HandleBars, Ini, Lua, Makefile, Markdown, Objective-C, Perl, PHP, PowerShell, Python, R, Razor, Ruby, SQL, Visual Basic, XML
+ Intellisense, linting, outline CSS, HTML, JavaScript, JSON, Less, SASS
+ Refactoring, find all references C#, TypeScript

It looks like the editor targets web developers. I, personally, would like to see better support for F#.

More details about the language support in Visual Studio Code you can find in the official Visual Studio Code documentation.

Command Palette

Do you know the Command Palette in Sublime Text? Visual Studio Code has one, too. It looks like this:

Command Palette in Visual Studio Code

You can invoke commands and navigate to different locations in your project with it. John Papa wrote a blog post series about Visual Studio Code and he provides a detailed introduction to the Command Palette in the second post of the series.

Code Navigation

Visual Studio Code has also some other features for navigating your code. For example, you can find all references of the symbol under the cursor using SHIFT F12. If you work on a C# project you’ll see the “CodeLens” feature which means that you see how many references exist for a symbol.

CodeLens in Visual Studio Code

And if you click on it you’ll see the references in a small popup window:

Expanded CodeLens in Visual Studio Code

Intellisense

Visual Studio Code has great Intellisense support even for JavaScript projects. It can distinguish between different types in JavaScript:

Intellisense for String in Visual Studio Code

You can use TypeScript type definition files for providing more information to Code about different types in third-party libraries. Code can reference those files automatically for you if you use a Code Action (CMD+. on an underlined symbol):

Code Action in Visual Studio Code

If you choose Add /// reference to 'node/node.d.ts' Code will add a comment line at the beginning of the file which is a reference to the TypeScript type definition.

With this line you added Intellisense support for Node even if you don’t write your code in TypeScript.

Code has Intellisense support even for package.json, bower.json, and project.json.

Debugging

Debugging C# applications on Mac OS X or Linux is not supported at time of writing. But the support for Node applications work perfectly.

The first step is to add a launch.json file by clicking on the gear icon on the Debug pane in the sidebar.

After that you can set breakpoints somewhere in your code, e.g. by clicking with the mouse left to the line number, and start debugging by pressing F5.

Debugging an Express App in Visual Studio Code

Git Integration

Git - Changes in Visual Studio Code

Visual Studio Code has Git integration.

After initializing a new Git repository you can commit your changes. You should provide a proper .gitignore file first.

Again, John Papa has a great introduction to Code’s Git integration in a blog post of his series.

Architecture

Visual Studio Code is based on Github’s Electron, the former Atom Shell. Electron allows developers to build cross-platform desktop applications with web technologies. Other applications built with Electron are Atom, Slack, Facebook’s new IDE Nuclide or Kitematic, a GUI application for managing Docker containers.

Code uses a newer and faster version of the same HTML-based editor that was used for the “Monaco” cloud editor, and other projects. And Code uses a tools service architecture that enables it to use Roslyn for .NET, TypeScript, the Visual Studio debugging engine, and more.

Still Missing

Visual Studio Code is still a preview at the time of writing. This means that there are still some features missing. Here is a short list what I’d like to see in the future:

  • Extensibility Features – Microsoft plans to add a public extensibility model to Visual Studio Code that let developers build and use plug-ins.
  • Source Code – I think that a code editor in 2015 should be open source like Emacs, Vim, Atom, or Brackets.
  • Better F# Support – There is syntax highlighting for F# code, but that’s it. I’d like to see more integration with an F# REPL, building F# code, etc.
  • Debugging on Mac OS X/Linux – ASP.NET 5/Mono projects still cannot be debugged on Mac OS X or Linux at time of writing.

Conclusion

I liked working with the preview of Visual Studio Code. It’s fast and it has a minimal set of features required for working with code, like code navigation, debugging and intellisense.

If the missing parts, above all the extensibility features, are added, then I think that Code can be a successful code editor.

Update: As Tim van Wassenhove and Isidor wrote in the comments, Mono applications can be debugged on Mac OS X and Linux. I wrote a blog post how you can configure VSCode for debugging Mono applications.

3 thoughts on “Visual Studio Code – My First Impressions

  1. Isidor

    Visual Studio Code: Preview currently supports mono debugging on Linux and Mac and Node debugging on Windows, Linux and Mac.
    Debugging ASP.NET 5 is planned for the future.

Leave a Reply

Your email address will not be published. Required fields are marked *