VS Code Productivity Tips

I recently discovered this VS Code productivity tutorial by Free Code Camp on YouTube. It’s almost 6 hours long, which is a lot of content to sit through, so here are my top takeaways from the course for being more productive with VS Code. I’ve included links to the relevant sections of the video so you can skip straight to them.

Code Snippets & Emmet

Code snippets and Emmet are all about doing more with less. With just a few keystrokes VS Code can autocomplete commonly used code structures to save you from having to type them all out.

For example, if I want a for loop I can just type for and VS Code will display IntelliSense to prompt you to select the type of for loop you want to use and it will autocomplete it for you. VS Code has built-in snippets for a number of languages such as JavaScript, TypeScript, Markdown, and PHP, but you can add more through installing extensions or even create your own.

Jump straight to the Using snippets in VS Code section of the video to learn more about snippets.

Emmet is a plugin for many different text editors and is available in VS Code. It’s optimised for web developers and takes the idea of snippets to a whole new level. Using CSS-like expressions, you can very quickly generate the HTML or CSS you need using a much shorter abbreviation.

For example, if I want to get started with a new web page I can just use the ! abbreviation and that will produce all the HTML boilerplate you need for a new page.

1
2
3
4
5
6
7
8
9


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

Then, if I want a list, rather than typing out the HTML myself I can use the ul>li*5 abbreviation which will produce:

1
2
3
4
5
6
7


<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

These are just 2 examples showing the power of Emmet. To learn more you can jump straight to the Using Emmet in VS Code section of the video and I’d also highly recommend taking a look at the Emmet cheat sheet too.

Shortcut Keys

One of the quickest ways to become more productive in any application is to master its shortcut keys. Doing this reduces the amount of times you need to reach for your mouse/trackpad and take your fingers off your keyboard. In fact, this study by Brainscape claims that you could save 64 hours (or 8 days) per year by mastering keyboard shortcuts.

Shortcuts are used in so many places that there are several sections that cover them in the video.

There are so many that you can’t learn them all at once. Take a look at your own workflow and see which tasks you perform most frequently and start by trying to learn the shortcuts that will really help you. VS Code also has a keyboard shortcuts cheat sheet for Windows and Mac which are worth a quick look.

Extensions

VS Code’s functionality can be enhanced through the installation of extensions. There is a vibrant extension marketplace that let’s you add languages, debuggers, and tools to VS Code. In the video there are several sections that focus on extensions for specific frameworks and languages.

I personally, found the section on Markdown really useful. For instance, this blog is written entirely in Markdown, but I can see these extensions also being really useful even if the only Markdown editing you ever do is in README.md files in your projects.

The most useful extensions to me in this case are the Markdown All in One and markdownlint extensions. Markdown All in One gives you a lot of great features to make editing Markdown a bit faster. For example, you can quickly generate a table of contents for your document from the Command Palette. If hit enter when you’re working with a list, it automatically adds a hyphen to the next new line and it even works if you’re writing a list of todo items.

Typing the syntax for links is quite tedious. Markdown All in One really simplifies this. If you have a URL on your clipboard, just highlight the text you want to make a link and paste the URL. The extension automatically adds the square brackets and parentheses in the right place along with the URL.

The other extension that I’ve found to be incredibly useful is markdownlint. This will check your Markdown for style errors and provide instructions on how to fix. Take a look at the extension documentation for a list of the rules it applies when checking your Markdown.

If you find yourself working with any of the languages/frameworks covered in the video I’d really recommend taking a look at the relevant sections.

Command Palette

Before watching the video I never really paid much attention to the Command Palette. But after watching the video I will definitely try to use it more and see if it can make me a bit more efficient using VS Code. If you’ve never really used the Command Palette before, watch the VS Code’s #1 Essential Tool: The Command Palette section of the video to learn more about it.

I really think it’ll be most useful in cases where I’ve forgotten the keyboard shortcut for something (or if a shortcut doesn’t even exist), and the Command Palette can save me time trying to navigate through menus to get to what I need. One area in particular where I’ve found it useful switching the language mode of a new file. By default when you create a new file in VS Code it’s a plain text file. If you want to quickly switch this to a different language you can open the Command Palette, select Change Language Mode, and choose the language you want to start working in.

Settings

VS Code is highly customisable. If there’s any aspect of it that’s not working for you, there’s almost certainly a setting you can change to alter its behaviour and make it more to your liking.

In the video there isn’t just one section dedicated to useful settings, rather they’re covered in various sections throughout.

Some of the settings that I’ve found useful are Font Family, Font Size, and Line Height for controlling the appearance of the font to make things a bit more comfortable to read.

In the video the combination of Auto Save and Auto Format is mentioned. I’ve found the latter really useful when coupled with the Prettier extension, but I’m yet to get used to Auto Save so have left it off for now.

Appearance

I’ll admit that when I first watched the sections on themes, icon packs and fonts, I thought it was all a bit vain. But as I looked more into it I started to see that some themes and fonts and just more comfortable to look at for longer periods. Some icon packs make things more easily recognisable too. If you’ve got the time it might be worth taking a look at a few different fonts and themes and experimenting to see what works well for you.

If you do want to start looking for different fonts, the Coding Fonts website from CSS Tricks is a great place to start. It contains a large selection of monospace fonts which are great for coding.

Wrapping Up

I really enjoyed watching the tutorial and learned loads of things I didn’t already know about VS Code and I hope you will too.