Improve Your Workflow With These Tips For VS Code
Tags: vscode, workflow, coding, programming
Published: 2019-05-23 21:25:37

---
title: Improve Your Workflow With These Tips For VS Code
published: true
description: Helpful tips to improve your VS Code workflow and experience
tags: vscode, workflow, coding, programming
canonical_url: https://jonathansexton.me/blog/improve-your-workflow-with-these-tips-for-vs-code/
---
<!-- wp:image {"id":724} -->
<figure class="wp-block-image"><img src="https://jonathansexton.me/blog/wp-content/uploads/2019/05/denny-muller-1260091-unsplash-1024x683.jpg" alt="" class="wp-image-724"/><figcaption> <br>Photo by <a rel="noreferrer noopener" href="https://unsplash.com/@redaquamedia?utm_source=medium&amp;utm_medium=referral" target="_blank">Denny Müller</a> on <a rel="noreferrer noopener" href="https://unsplash.com?utm_source=medium&amp;utm_medium=referral" target="_blank">Unsplash</a> </figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Without getting into too much detail, after some exhaustive testing I went with Microsoft's <a href="https://code.visualstudio.com/">VS Code</a>.  (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.).</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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.  </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Alright, now let's dig in!</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Learn and Use Keyboard Shortcuts</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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.  </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Some of the actions I use the most in VS Code are:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li><span style="text-decoration: underline;">Creating an HTML element with a class/id</span> --&gt; <em><strong>div.container + tab</strong> = &lt;div class = 'container&gt;&lt;/div&gt; or </em><strong>div#container + tab </strong>= &lt;div id = 'container'&gt;&lt;/div&gt;</li><li><span style="text-decoration: underline;">Ctrl + Shift + E</span> --&gt; Show the File Explorer</li><li><span style="text-decoration: underline;">Ctrl + Shift + G</span> --&gt; Show Source Control (check out how to integrate Git into VS Code below)</li><li><span style="text-decoration: underline;">Ctrl + B</span> --&gt; Show/toggle sidebar</li><li><span style="text-decoration: underline;">Ctrl + ` (tilde)</span> --&gt; Show integrated terminal</li><li><span style="text-decoration: underline;">Ctrl + PageDown</span> --&gt; Move page down</li><li><span style="text-decoration: underline;">Ctrl + PageUp</span> --&gt; Move page up </li><li><span style="text-decoration: underline;">Ctrl + F</span> --&gt; Search current document</li><li><span style="text-decoration: underline;">Ctrl + P</span> --&gt; Go to document</li><li><span style="text-decoration: underline;">Ctrl + , (comma)</span> --&gt; Preferences</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>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 <a href="https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf">keyboard shortcuts</a> from Microsoft.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Integrate Source Control </h2>
<!-- /wp:heading -->

<!-- wp:image {"id":730,"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://jonathansexton.me/blog/wp-content/uploads/2019/05/image-1.png" alt="" class="wp-image-730"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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.  </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>No longer do I need to <strong><em>Alt + Tab</em></strong> to my command line to type a commit message and then commit.  It's as simple as hitting <strong><em>Ctrl + Shift + G</em></strong>, typing my message, and hitting <strong><em>Ctrl + Enter</em></strong> and then I'm back to coding.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Check out the official documentation on <a href="https://code.visualstudio.com/docs/editor/versioncontrol">integrating source control</a> into VS Code to get started.  There's also a handy video on <a href="https://code.visualstudio.com/docs/introvideos/versioncontrol">using source control</a> (Git specifically) once you've completed the integration.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>To make a long story short - integrating Git into my VS Code made my life easier and my workflow even better!</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Use the Integrated Terminal</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Speaking of integration, aside from version control we can also bring our terminal into VS Code.  It has built in support for <a href="https://gitforwindows.org/">Git Bash</a> but there are also extensions that allow you to use <a href="https://docs.microsoft.com/en-us/powershell/scripting/components/vscode/using-vscode?view=powershell-6">PowerShell</a> also.  </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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 <a href="https://gulpjs.com/">Gulp</a> tasks that need to stay active but also I need to drop in some Git commands. <em>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.</em></p>
<!-- /wp:paragraph -->

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

<!-- wp:paragraph -->
<p>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. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Below you can see I've split my terminal into 5 tabs and then an error pops up when I have no more room. </p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":738} -->
<figure class="wp-block-image"><img src="https://jonathansexton.me/blog/wp-content/uploads/2019/05/terminal-split.png" alt="" class="wp-image-738"/><figcaption>Splitting the integrated terminal into multiple tabs, each with it's own instance</figcaption></figure>
<!-- /wp:image -->

<!-- wp:heading -->
<h2>Make Use of Extensions</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>VS Code has a vibrant and lively <a href="https://marketplace.visualstudio.com/VSCode">extension community</a> 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.  </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Many of these extensions make me more productive by adding features like giving me HTML boilerplate simply by typing <strong>html+tab</strong> or by allowing me to highlight my comments with different flags/colors to draw attention to them.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>One of my favorite, and most used, extensions is <a href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode">Prettier</a>.  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.)</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Also, if you'd like to lose a few hours of your time just check out the <a href="https://marketplace.visualstudio.com/search?target=VSCode&amp;category=Themes&amp;sortBy=Downloads">themes</a> 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</p>
<!-- /wp:paragraph -->

<!-- wp:separator -->
<hr class="wp-block-separator"/>
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>This article was originally posted on my <a href="https://jonathansexton.me/blog">blog</a>.  While you’re there why not sign up for my <strong>Newsletter</strong>?  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.<br></p>
<!-- /wp:paragraph --> 

<!-- wp:paragraph -->
I also post articles on <a href="https://medium.com/@joncsexton">Medium</a> so you can find my work there as well!</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Have an awesome day filled with love, joy, and coding!</p>
<!-- /wp:paragraph -->