I’ve been doing a whole lot of work on Ubuntu Linux lately, mostly with Docker and Apache Solr. It would be nice if my development environment was similarly nice. Since Microsoft released Visual Studio Code at this years BUILD conference, I figured I should play with it.
The instructions on the web site leave a little to be desired. They amount to:
- Create a directory
- Unpack the ZIP file
That’s ok. It works. However it is hardly a good clean install. Every other package comes in RPM or DEB format (Ubuntu uses DEB packages). This isn’t the clean packaging I was hoping for. I wanted:
- Go to the Ubuntu Repository
- Search for Visual Studio Code
- Click on Install
- Run by clicking on a nice icon in my launcher
You know – like other good UI based packages. If I wanted to drop down to the terminal all the time, I’d use vi. Anyhow, enough of the rant – how do we get to the point where there is a nice icon in the sidebar and the package is not cluttering my environment. I’ll assume that you have already downloaded the ZIP file from visualstudio.com and it’s sitting in your Downloads folder as you read this.
Unpack on a System Drive
I like to separate my programs from my data. I don’t have any other programs just lying around in my home directory. They are all squirreled away in /usr/bin or /usr/local/bin. I’m going to make a leap of faith that Microsoft will eventually have an rpm or debian package where the code lives in the right place. In the mean time, I’m going to put all the Visual Studio Code pieces in /usr/local.
Open up a terminal (Ctrl+Alt+T) and type the following:
cd /usr/local/lib sudo mkdir vscode cd vscode sudo unzip ~/Downloads/VSCode*.zip
At this point, the package will be unzipped into the /usr/local/lib/vscode directory and you can run it if you want. If you run it from the Terminal then you will note a couple of errors – these aren’t serious and don’t affect the running of the program.
Create a bin object
When I want to run stuff from the terminal, I generally just want to run it without needing to specify the path of the binary. I’m going to create a file called vscode in my HOME directory with the following contents:
#!/bin/sh VSCODE=/usr/local/lib/vscode $VSCODE/Code $*
Once you have created the file, make it runnable with the following:
chmod 755 ./vscode
You should now be able to run ./vscode and get the Visual Studio Code window going. That still has path information in it. I need to place this script in a well-known place. If you look at the PATH variable (echo $PATH), you will see /usr/local/bin is in the list of places to look. I can place it there with this line:
sudo install -m 0555 vscode /usr/local/bin
This command takes the “write” bit off the script permissions before installing in the right place. You could also copy it and use chmod – I like the all-in-one install command a little better.
Create a Launcher Icon
Two pieces are needed for a launcher icon. The first is a desktop file. This file is located in /usr/share/applications (globally). Create a file called vscode.desktop with the following contents:
[Desktop Entry] Name=Visual Studio Code Comment=Node and ASP.NET Editor Exec=/usr/local/bin/vscode Icon=vscode Terminal=false Type=Application Categories=Development;
Copy the file into the /usr/share/applications directory (use sudo for this). You can now go into the launcher and search for “Visual Studio Code” – it will come up with a standard document icon:
It’s not really appealing – I want a nice icon for it. Visual Studio Code comes with a nice icon, but it’s in PNG format. The Launcher requires XPM format. Fortunately, we can convert it. First, we need to download and install imagemagick – a great package for scripting image manipulation. You can install imagemagick like this:
sudo apt-get install imagemagick
Let’s first of all take a look at what we need:
Looks like we need a 32×32 XPM file. The file we are provided in /usr/local/lib/vscode/resources/app/vso.png is a 1024×1024 PNG file, so we need to resize and convert the file:
convert /usr/local/lib/vscode/resources/app/vso.png -resize 32x32 ~/vscode.xpm sudo cp ~/vscode.xpm /usr/share/pixmaps
Open up the launcher again and search…
Add the Icon to the Launcher
Once you have the right desktop launcher and icon in place, you can add Visual Studio Code to the launcher sidebar. To do this, launch Visual Studio Code from the launcher (just click on the icon you just found). This will bring up the VSCode icon in the sidebar. Right click on that icon and choose Lock to Launcher.
I hope that Microsoft puts Visual Studio Code in the standard repositories for Ubuntu, CentOS, Debian, Fedora and others. I also hope that they clean up the icon and provide one that is xpm format out of the box. The current one is ugly on transparent backgrounds like that which Ubuntu uses.