The Open Source in Visual Studio Code

Standard

open source handwritten with related word cloud on blackboardIan Battersby commented at Twitter on my recent blog post about my first impressions on Visual Studio Code that I didn’t mention OmniSharp which partly powers Visual Studio Code. And he is right. I forgot to mention it. But Code actually builds on many open source projects. So I thought that I write a blog post which lists some of them. Please write a comment if you know about a project I forgot in the list.

Open Source Software, Visual Studio Code is built on

  • Electron from Github – formerly known as Atom Shell. It is used to write cross platform desktop applications with web technologies.
  • Chromium from Google. Electron uses Chromium, the open-source browser project behind Google Chrome.
  • io.js, a fork of Node.js which is a JavaScript platform.
  • Blink from Google. Blink is the rendering engine used by Chromium.
  • OmniSharp provides language services for C#. Visual Studio Code uses for features like code navigation and refactoring. There are plugins for other editors like Emacs, Vim, Sublime Text or Atom which use OmniSharp for the same purpose.
  • Roslyn from Microsoft. Roslyn is the .NET compiler platform with C# and VB compilers. OmniSharp uses its C# compiler for its code analysis features.
  • TypeScript from Microsoft. Visual Studio Code uses it for JavaScript and TypeScript code analysis to provide features like code navigation and refactoring.
  • Node.js, a JavaScript platform
  • V8 from Google. V8 is the JavaScript engine used by io.js, Node.js and Chromium.
  • Squirrel, an installation and update framework for Windows desktop applications. Used for installing Visual Studio Code on Windows
  • DefinitelyTyped, the repository for TypeScript type definitions. Code uses it for getting the type information for third-party JavaScript libraries in JavaScript and TypeScript projects.

Someone on Stackoverflow wrote another list of open source software used in Visual Studio Code.

Microsoft released software which includes open source components, some of them written by Google. This shows that Microsoft today is not the Microsoft we knew in the past. Although Visual Studio Code builds on all those awesome open source projects, Code itself is not open source. There are components like the “Monaco” code editor or the debugging services that are not open source. Microsoft contributes back to the open source projects, at least to some of them. So even if Microsoft won’t open source VSCode they give back to the community.

There is already an issue in Microsoft’s issue tracker about open sourcing VSCode. If you want Code to be open source vote for it.

Debugging Mono Applications with VSCode on Mac OS X

Standard

Debugging a Mono AppI wrote in a recent post that Visual Studio Code does not support debugging Mono and ASP.NET 5 applications on Linux or Mac OS X in the preview version which was released last week. As Isidor Nikolic pointed out I’m wrong about Mono. VSCode supports debugging Mono applications. In this post I show how you must configure your launch settings.

When you click on the gear icon on the debug pane VSCode opens .settings/launch.json. Just add the following launch settings and adapt it to your Mono project:

{
    "version": "0.1.0",
    // List of configurations.
    // ONLY "node" and "mono" are supported, change "type" to switch.
    "configurations": [
        {
            // Name of configuration
            // Appears in the launch configuration drop down menu.
            "name": "Launch <PROJECT NAME>",
            // Type of configuration. Possible values: "node", "mono".
            "type": "mono",
            // Workspace relative or absolute path to the program.
            "program": "<PATH TO EXECUTABLE FILE>",
            // Automatically stop program after launch.
            "stopOnEntry": true
        }
    ]
}

After building your Mono application you can set a breakpoint and launch the debugger.

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.