Stefan Cosma

Visual Studio Code - Tips & Tricks

Stefan Cosma -

If you're following me on Twitter you probably know how much I enjoy using Microsoft's Visual Studio Code. So much, that one of my tweets is currently featured on their main page.

But this article is not about how much I enjoy my code editor, it's about what things you can do with this code editor. From useful extensions to shortcuts you probably didn't know about or even making your code editor more light on the eyes, this article is going to showcase some awesome stuff that I found while using it.

Extensions

We begin our showcase with some awesome extensions. Now, I'm not going to share all the extensions that I use because some of them are really project focused, but instead I'm going to share the ones that are more generic and make my life as a developer much more easier.

  1. Auto Close Tag - Automatically add HTML/XML close tag.
  2. Git History (git log) - View git log, file or line History.
  3. HTML CSS Class Completion - Provides CSS class name completion for the HTML class attribute based on the CSS files on your workspace.
  4. HTML Preview - An extension to preview HTML or Jade files while editing them.
  5. HTML Snippets - Full HTML tags including HTML5 Snippets
  6. JavaScript (ES6) code snippets - Code snippets for JavaScript in ES6 syntax.
  7. JavaScript Atom Grammar - The Atom editor's JavaScript text mate grammar.
  8. jQuery Code Snippets - Over 130 jQuery Code Snippets
  9. jshint - Integrates JSHint into VS Code. JSHint is a linter for JavaScript.
  10. Settings Sync - Synchronize Settings, Snippets, launch, keybindings, workspaces and extensions Across Multiple Machines using Github Gist.
  11. Spelling and Grammar Checker - Uses a web service to detect mistakes and suggest fixes - great for Markdown or any text file.
  12. SVG Viewer - Pretty self explanatory.

The extensions that I listed above are some of the ones that I use on a daily basis. If I were to choose that ones that I couldn't live without it would be #1, #2, #6, #9, #10.

For example #10 is a life saver because I'm always switching between my work MB Pro and the MB Air I have at home, so by having a system in place that helps me synchronize my settings is textbook awesome.

Shortcuts

Next up are shortcuts. I usually have a few shortcuts that I absolutely can't live without. For example CTRL + D for multiselect is a must have.

When VS Code came along with it's integrated Terminal and introduced shortcuts for it, I was hooked. If you're like me and hate to always have to switch between the code editor and the Terminal then you're going to enjoy this. I usually tend to avoid to use the trackpad when I write code that's why I'm going to share some shortcuts that will help you while you code and need a Terminal at the same time.

  1. CTRL + ` - with this shortcut you can toggle the integrated Terminal.
  2. CTRL + SHIFT + ` - this shortcut will add a new Terminal instance, so you can easily work with multiple things at the same time.
  3. But what if you want to switch between terminal instances? I added a few key bindings so I can easily switch between terminal instances. Of course you can customize them to your liking.
[  
   {  
      "key":"ctrl+shift+=",
      "command":"workbench.action.terminal.focusNext",
      "when":"terminalFocus"
   },
   {  
      "key":"ctrl+shift+-",
      "command":"workbench.action.terminal.focusPrevious",
      "when":"terminalFocus"
   }
]
  1. CTRL + Q - In a recent updated the team behind VS Code introduces a new feature. The ability to switch between the different views in the sidebar. Using this shortcut you can easily switch between the Explorer view or the Github view or even the search view.
  2. CMD / WIN + B - I for one like to keep things as light as possible when I'm writing code. With this shortcut you can easily show or hide the sidebar.

The shortcuts I outline above are the ones that I use most often. There are lots of them, that I didn't even mention, and if I did it would overlook the whole purpose of this article. If you know any more, that you think are really useful, let me know and I'll add them to the list.

Misc

Since I can't end the article by talking about shortcuts, here are some more cool things you can do in VS Code. Did you know you can hide the activity bar from the View menu? Well, now you do. This feature was added a recent updated and I can say that it is very helpful, even if one has enough real-estate on his/hers monitors.

What about looks? I, for one, prefer the Spacegray theme. I liked that theme ever since I first found it available while I was using Sublime Text 2. Luckily someone made it available for VS Code as well. Check it out here.

And last, but certainly not least, did you know you can compare files out of the box? I recently needed to compare two different versions of the same file and because they were not on Github, I needed another easy way to achieve this. After a few searches and some extensions later I stumbled upon an article that outlines how you can do that directly inside VS Code. And because I like to give credit where credit is due here is the article in question.

Now, don't get me wrong, I know the things I shared in this article are just a small taste of what VS Code can do, that is why I'm extending an invitation to anyone who is using VS Code to share their experience and their tips and tricks.

Until next time, code long and prosper!

Image credit: Guillaume Kurkdjian