In this video I’m going to introduce you to my new favorite code editor: Visual Studio Code. Visual Studio is a Microsoft product, which may come as a surprise to many of you, but put your preconceptions aside for a moment and join me as I show you around.
Visual Studio Code
Over the years I’ve used a range of different code editors; TextMate, Coda, Sublime Text, Atom, and each one has had its pros and cons. Visual Studio Code, however, is absolutely my favorite so far, so let’s take a look at some of its features.
Start by downloading the version for your system (Windows, Mac OS, Linux) at code.visualstudio.com (it’s free too).
UI
One of the reasons I like Visual Studio Code so much is its interface; it’s really simple.
It has a couple of sidebars, which can be positioned left or right according to your preference. The first gives you some icons to switch between panels. Choose from Explorer, Search, Git, Debug, and Extensions. Go to View to change the type of display (full screen, zen mode etc.)
Hovering over folders in the Explorer gives us a couple of options: New File, New Folder, Refresh, and Collapse All. Right-clicking brings up a context menu.
Command Palette
Hit Shift-Command-P to bring up the Command Palette.
Within this panel you can search for whatever you like for quick and easy action; Git commands, changing themes, installing extensions–it can all be done via the Command Palette.
Similarly, Command-P will bring up the Go to file... palette.
Terminal
Holding Command-` will open the built-in terminal, which I love.
This opens the terminal directly in the root of your project, saving you from having to navigate. Clicking the + icon opens more terminal windows which can be switched between using the dropdown. This all adds up to a really useful feature, especially if you use compilers when coding.
Git
Another feature I’m a huge fan of is the Git integration. Changes you make in your files are highlighted in various places so you know exactly what’s going on:
In the figure above you can see the sidebar notification telling me of an uncommitted change, the change listed in the Git panel, and a line highlight to show me where the change is in the file itself.
VSC will also show version comparisons side by side, just for extra clarity.
Other standard Git commands such as sync, pull, and so on, are available from the Git panel.
Emmet (Zen Coding)
Great news: Emmet is already built into VSC. No setup or configuration is required, you can just start using it (with Tab being the predefined hotkey to trigger your snippets) as soon as you open the editor for the first time.
Multiple Cursors
When you highlight a piece of code in your file, VSC will automatically highlight all other occurrences of that string. You can then hit Command-D to add another cursor to the next instance, or Shift-Command-L to add a cursor to all instances. Mass-editing, easily.
Settings
The Settings page in VSC is very intuitive. Like Sublime Text, settings are stored in a file (JSON in this case) which allows you to browse all the defaults. By hitting the edit icon next to each setting, you’ll copy it to a custom file where you can make changes:
Hit Save and see your changes take immediate effect.
IntelliSense
IntelliSense is a feature within VSC which I was very keen to try out as soon as I first opened the editor. It’s a super-charged auto-completion, syntax-highlighting assistant and goes a little further than you would expect this sort of feature to go.
Hovering over CSS selectors will give you an example of how you might use the corresponding HTML (very useful for beginners):
Hovering over the properties reveals documentation about what they do, and color values are prepended with little swatches to show you how they appear on screen. Code suggestions when you’re typing are extremely thorough too.
Extensions
Code > Preferences > Color Theme will open up (you guessed it) the color theme palette. Scroll through the examples and you’ll see the UI change accordingly. Hit Enter to make those changes permanent.
Beyond the default themes, there’s also a huge marketplace of other (currently free) examples available, plus extensions of all kinds to play with.
Conclusion
That just about wraps up some of my favorite features in Visual Studio Code, suffice it to say there are many, many more features available for discussion. In terms of my experience using VSC thus far, I can only say it’s been positive. Previously I was using Atom, and I don’t regret making the switch one bit. Of course, you may disagree with me, but in my personal opinion, you won’t go far wrong downloading and taking this code editor for a spin.
Useful Links
