Improve Your Workflow With These Tips For VS Code

Photo by Denny Müller on Unsplash

When I started the self-taught path of learning to code, one of the first things I needed to do was decide which text editor I was going to use.

Without getting into too much detail, after some exhaustive testing I went with Microsoft's VS Code. (Side note - This isn't a post about my opinions on which text editor is 'the best', so if that's what you're looking for you've come to the wrong place. Frankly, the best one is the one that you like and the one that suits your needs the most.).

After a few years of using this text editor I've compiled a list of some tips that have really helped me streamline my workflow. These range from cosmetic to small useful tips but also game changers that will take a little extra work.

Let's dig right in - with one small caveat: I work on a Windows machine so all following pertains to that operating system. My apologies to the Mac users out there as I don't know that platform.

Alright, now let's dig in!

Learn and Use Keyboard Shortcuts

This is by far one of the most effective time saving tips I give to anyone with almost all software. The keyboard shortcuts are put in place to help 'power users' get the most out of their experience with a piece of software. You'll find shortcuts in games, web applications, desktop application, etc and it's worth your time to learn and use them.

It is one of the more difficult pieces of advice ti implement as it requires you to rewire your muscle memory. If you've been using an application for a while you know what it feels like without having to think about it. Learning to use keyboard shortcuts requires you to think about actions before performing them.

I'll be honest, it will feel a little foreign for the first week or so but once you get the hang of it you'll be flying through actions at a much faster pace.

Some of the actions I use the most in VS Code are:

• Creating an HTML element with a class/id --> div.container + tab = <div class = 'container></div> or div#container + tab = <div id = 'container'></div>
• Ctrl + Shift + E --> Show the File Explorer
• Ctrl + Shift + G --> Show Source Control (check out how to integrate Git into VS Code below)
• Ctrl + B --> Show/toggle sidebar
• Ctrl + ` (tilde) --> Show integrated terminal
• Ctrl + PageDown --> Move page down
• Ctrl + PageUp --> Move page up
• Ctrl + F --> Search current document
• Ctrl + P --> Go to document
• Ctrl + , (comma) --> Preferences

These are just a few of the shortcuts I use on a daily basis. For a full list, check out the official PDF version of keyboard shortcuts from Microsoft.

Integrate Source Control

I've heard different arguments for both sides on this, but for me integrating source control into VS Code was one of the easiest and most effective changes I've made to my workflow. Before integration, I was switching between windows about every 3-5 minutes with lost time in between.

Now, that doesn't seem like a big deal (especially if you have multiple monitors and can leave the command line and VS Code up at the same time) but having it inside of VS Code has proven to be invaluable.

No longer do I need to Alt + Tab to my command line to type a commit message and then commit. It's as simple as hitting Ctrl + Shift + G, typing my message, and hitting Ctrl + Enter and then I'm back to coding.

Check out the official documentation on integrating source control into VS Code to get started. There's also a handy video on using source control (Git specifically) once you've completed the integration.

To make a long story short - integrating Git into my VS Code made my life easier and my workflow even better!

Use the Integrated Terminal

Speaking of integration, aside from version control we can also bring our terminal into VS Code. It has built in support for Git Bash but there are also extensions that allow you to use PowerShell also.

Not only is it nice to have the terminal inside the same space where your code is, it allows you to have multiple terminal tabs as well. I frequently have two or three terminal tabs open especially if I'm running a bunch of Gulp tasks that need to stay active but also I need to drop in some Git commands. Side note - if you find yourself using multiple terminals consistently you can actually set up keybindings that allow you to switch between the tabs with keyboard shortcuts.

Of course if you'd prefer to work with the external terminal that can easily be accomplished with the keyboard shortcut Ctrl+Shift+C (this is just another example where learning/using those keyboard shortcuts comes into play :D). Using this command opens your command line to the same directory that your integrated terminal was at.

The last juicy bit that drew me into using the integrated terminal is the fact that you can split your terminal section into as many tabs as your screen size will allow.

Below you can see I've split my terminal into 5 tabs and then an error pops up when I have no more room.

Splitting the integrated terminal into multiple tabs, each with it's own instance

Make Use of Extensions

VS Code has a vibrant and lively extension community around it. If you can think of a feature you'd like, chances are there's an extension for it or it's coming in a future build.

Extensions add extra functionality as well as some customization options that don't come with VS Code 'out of the box'. This functionality ranges from code snippets or making your life as a developer easier with tools like linting.

Many of these extensions make me more productive by adding features like giving me HTML boilerplate simply by typing html+tab or by allowing me to highlight my comments with different flags/colors to draw attention to them.

One of my favorite, and most used, extensions is Prettier. It allows me to format my code in an easy-to-read format by fixing my indention or adding semi colons at the end of my JavaScript. (It's important to note that I'm taking a 'syntax side' here and saying this is what I prefer. If you prefer another way that's wonderful and it's not wrong - but for me this is the style that works the best.)

Also, if you'd like to lose a few hours of your time just check out the themes that are available for VS Code. There are themes for the editor as well as file icon themes. If you're like me then you'll install as many as you can and constantly switch between them :D

---

I hope you've enjoyed this romp through the various aspects of increasing your productivity with VS Code. If you have your own tips/tricks that I didn't cover I'd love if you shared them with me.

This article was originally posted on my blog. While you’re there why not sign up for my Newsletter? I promise I’ll never spam your inbox and your information will not be shared with anyone/site. I like to occasionally send out interesting resources I find, articles about web development, and a list of my newest posts.

I also post articles on Medium so you can find my work there as well!

Have an awesome day filled with love, joy, and coding!

Comments

[Virgil]

🚦 must have extensions

• Indent Rainbow
• Bracket Pair Colorizer 2 (was Rainbow Brackets)
• EditorConfig
• Settings Sync

🦸‍♂️ superpowered snippets

Add keybindings to your code snippets

...by inserting snippets in your keybindings.

Edit keybindings.json

Run Preferences: Open Keyboard Shortcuts (JSON) command.

Add keyboard shortcuts to snippets.

• The binding Command to use: Insert Snippet
• Add an Arg parameter name with the Name of the snippet.
• Set When to "editorTextFocus"

To use snippets only specific languages:

• Append this to When : && editorLangId == 'shellscript'
• Add an Arg parameter langid with the language Id

Official docs: code.visualstudio.com/docs/editor/...

shellscript only snippet

shellscript only snippet

    {
        "command": "editor.action.insertSnippet",
        "when": "editorTextFocus && editorLangId == 'shellscript'",
        "args": {
            "langId": "shellscript",
            "name": "\"unofficial\" bash strict mode"
        }
    },

key chord combinations

Find a key chord combination that you can use to group snippets into logical sets.

For my dev environment, I use ctrl+alt+i chord to ctrl+alt+ <key>, with the number pad keys for snippets that make up shell script boilerplate.

ctrl+alt+numpad0 for shebang
ctrl+alt+numpad1 for script header (#insert a document summary)
ctrl+alt+numpad2 for shellscript ("unofficial" bash strict mode)
ctrl+alt+d for date stamp
ctrl+alt+f for filename

example keybindings.json

keybindings.json examples

keybindings.json

    {
        "key": "ctrl+alt+i ctrl+alt+NumPad0",
        "mac": "cmd+alt+i cmd+alt+NumPad0",
        "command": "editor.action.insertSnippet",
        "when": "editorTextFocus",
        "args": {
            "name": "shebang",
        }
    },
    {
        "key": "ctrl+alt+i ctrl+alt+NumPad2",
        "mac": "cmd+alt+i cmd+alt+NumPad2",
        "command": "editor.action.insertSnippet",
        "when": "editorTextFocus && editorLangId == 'shellscript'",
        "args": {
            "langId": "shellscript",
            "name": "\"unofficial\" bash strict mode"
        }
    },
    {
        "key": "ctrl+alt+i ctrl+alt+f",
        "mac": "cmd+alt+i cmd+alt+f",
        "command": "editor.action.insertSnippet",
        "when": "editorTextFocus",
        "args": {
            "name": "filename",
        },
    },

And also bind ctrl+i to Insert Snippet. (no args)

    {
        "key": "ctrl+i",
        "command": "editor.action.insertSnippet",
        "when": "editorTextFocus",
    },

---

ℹ️ Reason for edit:

• 💡 add keybinding examples and vscode doc link
• 📝 wrong bracket extension. I was on my phone when I wrote this originally, and couldn't confirm the correct extension.

[Jonathan Sexton]

Awesome list Virgil! I have 3 out of the 4 must have extensions so I consider that a win :D

Great tip on the keybindings as well, I remember setting mine up and it was a pain but worth it in the long run for sure.

[Virgil]

@jsgoose , I've just added some example keybindings and changed the bracket colorizer to the one I intended.

Thanks for the original that inspired me to contribute !