Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon


1. May 2015

 

Yesterday Microsoft announced the released of Visual Studio Code, a cross platform code editor.  Today I have decided to take a closer look.  I certainly wouldn’t call this a review, I have barely used the application.  Instead this is more of a first impressions tour, just a quick heads up of what the Visual Studio Code experience is like.  Also keep in mind, this is only a preview release and is by no means a finished product.  Since the cross platform nature is the big selling point, I’ve run this entirely on Mac OS.  Getting started is simple… go to https://code.visualstudio.com/Download and download for your appropriate platform:

 

Ss1

 

In the case of OS X, the installer is simply a zip file.  Download and extract, then run the executable inside.  If you want to do additional configurations, such as making code run from the terminal read this.

 

Now a caveat, if you want debugging, and you probably will, you also need to have Mono or C# installed.  You can download it here.

 

Ss3

 

 

I suppose we should set the expectations properly right away.  Despite the branding, this is not a cross platform version of Visual Studio.  Instead it’s more of a lightweight code editor, along the lines of, um, the sublime Sublime Text.  Visual Studio Code is actually based off of Github’s open source extensible Atom code editor ( actually, based on Electron, which was used for Atom and rebranded at some point ).

Oh and C++ developers, at least right now, you are out of luck.  VSC currently supports C#, ASP.NET, and Node (JavaScript or TypeScript) only. 

 

Welcome to Visual Studio Code

 

When you first launch the application, you are greeted with this sparse Window:

Ss2

 

Wow, that is pretty minimal isn’t it?

 

Again like Sublime Text, there isn’t really a project file, VSC works at the folder level.  It does however recognize a couple different project formats including package.json, project.json, tsconfig.json and ASP.net projects files.  If there is one of these files in a folder that is opened, that project file is automatically parsed.

 

Let’s try VSC out with a trivial existing Javascript project.  Heroku’s minimal Node sample available here.

 

We need to clone the repository then install the express dependency if not already done.  The following commands should do the trick:

cd /path/to/directory/to/install/to

git clone https://github.com/heroku/node-js-sample.git

cd node-js-sample

npm install express


With those steps performed, you should be able to open the directory in VSC.  If you added code to your bashrc profile, you should simply be able to type code ./  otherwise load up Visual Studio Code and select the menu File->Open… and pick the folder.

 

The Interface

 

Now that you’ve got a project loaded, the interface is pretty minimal:

Ss4

Across the left and side you have tabs for dealing with files/folders, searching, git integration and finally debugging and that’s about it.

 

On the right hand side if the code editor, with line numbers, syntax highlighting and code completion, although it seems to do a fairly lousy job of parsing javascript classes so far.

Ss5

 

Editing HTML is slightly nicer:

Ss16

 

There is also a markdown preview option tucked away in there.

 

You can split code editing windows as many times as you wish, although you can only do it vertically.  A light bulb icon appears offering quick tips for fixing common errors when clicked:

Ss6

 

There are a couple interesting omissions, the most obvious of which is the lack of code folding.  There is also very little in the way of code refactoring tools, the closest you get is the replace all occurrences option, such as here with the app variable selected:

Ss7

 

It does have a basic code beautifier included and that’s about it.  For the most part its a pretty bare bones code editor.

 

Running and Debugging

 

One of the big sales features is the integrated debugger, so let’s take a look at the process.  As I mentioned earlier, you need to have Mono or C# installed to use the debugger, so heads up there. To debug your code go to the debug tab and hit play.

Ss8

 

Since this is the first time you’ve run it will create a Launch.json configuration file.  Modify it accordingly to match your project:

Ss9

 

Click run again and your application should launch:

Ss10

 

By the way, it’s CTRL +C to terminate a Node application.  Of course you can stop using the controls from VSC too

Ss11

 

You can set a breakpoint by clicking to the side of the line of code in the editor

Ss12

…. but… they don’t work.  Not sure if I am making a mistake, this is an unimplemented feature, or possibly a bug, but I couldn’t get server side breakpoints to fire.  On the other hand, you can step through code:

Ss13

Or you can use F10, F11, SHIFT + F11 to step over in and out of code.

 

Down the left hand side you’ve got your standard debug functionality, including local variables, the callstack, etc.

Ss14

 

Although inspection into Javascript objects is nowhere near where i’d like it to be yet ( unlike for example WebStorm ).

 

Command Palette

 

Another nice productivity feature of VSCode is the Command Palette, which if you’ve used Sublime Text will look instantly familiar.  Opened by pressing CMD + SHIFT + P, it brings up a quick menu of all commands available in VSC:

Ss15

 

As you can see there is also a list of shortcuts for each command.  For keyboard warriors such as myself, these quick filterable menus are a godsend for productivity.

 

Conclusion

 

Right now, Visual Studio Code is clean, simple, focused and incredibly immature.  Of course, it is also free, so you’ve got very little to use to check it out.  Some fairly essential functionality is currently missing, but going forward VSC could be a great environment for editing Node and C# applications, although frankly I will stick to WebStorm personally.  I will however probably keep using Code as a quick code editor.  As a straight up quick text editor, it is pleasant to use.

 

For the most part, this is a preview and it shows.  I will take another look in a couple months and see how useful it has become.  If you are a C++ developer looking for a cross platform Visual Studio, you certainly should look elsewhere.  I don’t think this will ever be the product you are looking for, it is focused at web and cloud developers.  For developers working on web apps, using git in JavaScript or TypeScript, this is certainly a tool to keep an eye on.

 

I can’t help but think Microsoft might have made a bit of an error with the branding on this product.  So many people are going to expect a cross platform Visual Studio, and they are going to be disappointed.  However if they came in looking for a light weight code focused cross platform editor, they will most likely be delighted… eventually.

Programming

blog comments powered by Disqus

Month List

Popular Comments