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:
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.
And if you click on it you’ll see the references in a small popup window:
Intellisense
Visual Studio Code has great Intellisense support even for JavaScript projects. It can distinguish between different types in JavaScript:
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):
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.
Git Integration
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.
Learning F# can be daunting from time to time. I collected some resources which will probably help you. If you are new to programming you’d rather want to read one of the many good F# books. But if you are a developer who has experience with imperative languages like C# or Python then you might find these resources useful.
I wrote in 