Hannah Gooding

Posted on Aug 12, 2020 • Edited on Aug 21, 2020

VS Code shortcuts and tricks that I wish I knew sooner

#vscode #codenewbie #html #productivity

Introduction

After teaching myself for a year I started coding full time when I joined the Founders and Coders web development bootcamp in March 2020. Two weeks into the course we went into lockdown in the UK and our cohort had to go remote for the remaining 16 weeks. Thanks to the collaborative power of the VS Code Live Share extension we were still able to pair program and go through the syllabus as planned, but one of the things we missed out on from not being in person was organically sharing the little tips and tricks that you would normally pick up from working next to each other.

You can watch someone demonstrate something while sharing their screen, but unless you see them typing on the keyboard you don't necessarily pick up on the key presses that could also save you seconds of your day! As a result there are a lot of nifty VS Code tricks that I have learned since starting my first role as a Full Stack Developer that I wish I had know during the course.

I compiled these into a talk for the next Founders and Coders cohort, entitled "Why The F*** Didn't I Know This Sooner?!", and I also wanted to share them here for those starting out on their own coding journeys.

VS Code shortcuts

Emmet gives you some default abbreviations for a range of file types including .html and .css which expand into useful code snippets. Emmet support is built into VS Code so it does not require downloading an extension.

HTML boilerplates

If you type ! into an html file in VS Code and then press enter, you get the following HTML skeleton:



<!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>

A lot of my frequently used HTML tags are missing from this boilerplate so I have configured my own.

I made !! into a custom shortcut for my VS Code editor that includes the <meta> tag for SEO, as well as the tags for for linking CSS stylesheets and JavaScript files, and a few other frequently used semantic tags.

To do this you need to navigate to Code > Preferences > User Snippets and search for 'html.json'. Then you add your custom snippets into this file.

I would recommend writing out the desired structure into an HTML file first, and then you can copy it into a tool like this to parse your HTML file into a JSON string with escaped characters to get the right indentation.

My html.json file looks like this:



{
  "HTML boilerplate": {
    "prefix": "!!",
    "body": [
      "<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n  <meta charset=\"UTF-8\">\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n  <meta name=\"description\" content=\"\">\r\n  <link rel=\"stylesheet\" type=\"text\/css\" href=\"styles.css\">\r\n  <title>Document<\/title>\r\n<\/head>\r\n<body>\r\n  <header>\r\n  <\/header>\r\n  <main>\r\n  <\/main>\r\n  <footer>\r\n  <\/footer>\r\n  <script src=\"scripts.js\"><\/script>\r\n<\/body>\r\n<\/html>"
    ],
    "description": "HTML boilerplate with custom tags"
  }
}

And the finished boilerplate looks like this:



<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <link rel="stylesheet" type="text/css" href="styles.css">
  <title>Document</title>
</head>
<body>
  <header>
  </header>
  <main>
  </main>
  <footer>
  </footer>
  <script src="scripts.js"></script>
</body>
</html>

HTML abbreviations

Sometimes you can spend longer learning to type out shortcuts than if you just manually typed the code. I personally don't find Emmet abbreviations a time saver for writing CSS, but some of the HTML abbreviations I find useful include:

Nested elements

The shortcut nav>ul>li creates:



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

Multiple elements

The shortcut li*5 creates:



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

Tags with text

The shortcut a{Click Me} creates:



<a href="">Click Me</a>

Elements with multiple classes

The shortcut div.first-class.second-class creates:



<div class="first-class second-class"></div>

Elements with IDs

The shortcut div#main creates:



<div id="main"></div>

A full list of shortcuts for can be found on the Emmet Docs Cheat Sheet.

VS Code Source Control Tab

Using VS Code's built in Source Control feature, you can stage your files and write commit messages with the VS Code UI, rather than using the terminal.

What I like about this is:

You can stage particular files easily without having to type out the file path into your terminal.
You can format your commit messages more easily.
When you write a commit message, it warns you if you go over the "recommended" character count in a line.
If you are using the Live Share extension, your collaborator's co-authoring credentials appear (they have to be signed in with their GitHub account).

Useful VS Code extensions

Bracket Pair Colorizer 2

This extension colorizes matching opening and closing brackets in your code so you can scope your functions and statements at a glance.

Without extension:

With extension:

Edit: This article originally linked to Bracket Pair Colorizer v1, thank you to @indcoder for pointing out in the comments that there is a v2 out there which is faster and more accurate!

Relative File path

This extension gives you a shortcut for getting the relative filepath of another file from your current file. This is really helpful in a large codebase with lots of nested folders where you have a lot of imports and exports between files, for instance in a React.js project.

Use the shortcut to bring up the file search (Windows Ctrl+Shift+H, Mac Cmd+Shift+H):

Search for the file you want the relative path for:

The relative path will appear:

GitLens

This extension is Git supercharged for your editor with loads of features that I don't yet know how to use.

What I do use it for is the Git blame feature, which annotates the most recent commit history for each line in your files. This is especially useful when working on a group project so you can see at a glance when the last changes were made, who made them, and the relevant commit message.

Prettier

Prettier is a lifesaver because it automatically formats your code! You can download it as an extension on VS Code, and it will run your settings that you configure in the application (go to Settings and search for 'Prettier').

To format your current file, right click and select Format Document, or to turn on automatic formatting when you save your files go to Settings and search for 'format on save' and tick the checkbox.

It's a good idea to have a .prettierrc config file in the root folder of your group projects where you specify how many spaces you want for intentation, single or double quotes, whether all lines should finish with a semi-colon, etc.

The config file overrides your local VS Code Prettier settings so everyone on the team will have the same formatting rules applied to their code - avoiding nasty conflicts!

I use this Prettier Config Generator to generate the JSON for the file, and the Prettier docs explain more about what each of the format options mean.

The following JSON in a .prettierrc file:



{
    "printWidth": 80,
    "tabWidth": 2,
    "useTabs": false,
    "semi": true,
    "singleQuote": false
}

Reformats this:

Into this, with consistent spacing, an average line width of roughly 80 characters, 2 spaces for indentation and not tabs, semicolons printed at the end of every statement, and double quotes instead of single quotes:

This is just an example to demonstrate the formatting changes Prettier applies, and is not a recommendation of code style. Most of the time you won't have to play around with the settings too much and you can go with the basic config to keep your codebase consistent, or when you start working as a developer your company will already have a "house style".

Top comments (32)

miku86 • Aug 19 '20

learn the shortcuts for Add Cursor Above and Add Cursor Below
learn the shortcuts for Move Line Up and Move Line Down
learn the shortcuts for View: Toggle Side Bar Visibility
learn the shortcuts for View: Toggle Integrated Terminal
learn the shortcuts for View: Show Search
learn the shortcuts for Search: Replace in Files
learn the shortcuts for File: New Untitled File
learn the shortcuts for View: Open Next Editor
learn the shortcuts for View: Open Previous Editor
learn the shortcuts for View: Close Editor ...

VSCode is quite mouse-less to use.

Hannah Gooding • Aug 21 '20

Great tips! Learning that alt moved lines up and down also blew my mind! Luckily I learned that quite quickly through pairing with someone over Liveshare :)

vaskrist • Aug 24 '20

These also tremendously help my productivity since they operate not only on the current line, but also on all lines with any selection:

learn the shortcuts for Copy Line Down and/or Copy Line Down
learn the shortcuts for Delete Line

Konstantin Tarkus • Aug 12 '20 • Edited

Setting up VS code snippets does definitely pay off.

github.com/kriasoft/nodejs-api-sta...

Hannah Gooding • Aug 14 '20

I know, I can't believe how long I spent manually counting nested folders when it took 2 seconds to Google the extension haha!

YvetteLau • Sep 1 '20

Thanks for sharing!

I want to translate it into Chinese to help more developers, Can I get your authorization?
I will give credit at the top of the article.

Hannah Gooding • Sep 2 '20

Hi Yvette, sure that's fine with me. Please can you send me the link afterwards?

YvetteLau • Sep 3 '20

Yes, of course

Kevin Lewis • Sep 17 '20

It might be useful to know that you can do multi-line snippets in VS Code by providing multiple strings to the body array:

"Setup Express & Body Parser": {
    "prefix": "expressBodyParser",
    "body": [
      "const app = require('express')()",
      "const bodyParser = require('body-parser')",
      "app.use(bodyParser.json())",
      "app.use(bodyParser.urlencoded({ extended: false }))",
      "",
      "$1",
      "",
      "app.listen(3000)"
    ]
},

Jeff Trusty • Aug 13 '20

I got a lot of tips from this article a year ago:

dev.to/jsmanifest/21-vscode-shortc...

Hannah Gooding • Aug 21 '20

All so helpful - thank you for sharing!

Andrew Hill • Aug 12 '20

I'd never even looked at Enmet and those shortcuts seem like they'll be such a QoL improvement. Bracket Pair Colorizer is a godsend!

Augustine Correa • Aug 18 '20

Please use Bracket Pair Colorizer 2 which is much better & faster than the 1st edition but the developer cant change because there are breaking changes between the two editions

github.com/CoenraadS/Bracket-Pair-...

Hannah Gooding • Aug 21 '20

Thank you for pointing this out Augustine, I have edited the article to link to v2 and added an editorial comment :)

Amir Hameed • Aug 18 '20

Emmet was better in Sublime Text. In VS Code there are many conflicts with other extensions, so often Emmet directives do not work properly .

Hannah Gooding • Aug 21 '20

I'm curious which you extensions you find Emmet conflicts with?

Hannah Gooding • Aug 21 '20

To be honest, I haven't used Emmet shortcuts that often since learning about them; I haven't written code in HTML files in a while since I mainly work in React.js. But I just Googled how to make Emmet work in React and this article helped me set it up for JSX in minutes! Yay! ✨

Amir Hameed • Aug 21 '20

I am not exactly sure what causes conflict but I know if configured properly Emmet can do wonders with JSX too. It worked fine few times but then it started messing up. I could not push much time into finding the cause.