When you’ve hit that flow state, your brain often travels at a hundred miles per hour. You type out your code as quickly as you can, working hard to capture your thoughts before they disappear into the ether or recesses of another thought.

Visual Studio Code has been the rising star of code editors since it came out. For a long time, I resisted — not because it’s another code editor to try out, but rather because I had my entire workflow in Sublime sorted.

While the code and work are essentially the same — no matter which editor I ended up using — my productivity and output plummeted in the first week when I made the move to Visual Studio Code.

This, in part, was because my brain needed to readjust to the new way of working. There were shortcuts to figure out, keybindings to remember, ways to look at the code and extensions to install in order to make life easier.

Eventually, I got my workflow up to speed again, and it’s unlikely that I’ll switch editors again. Visual Studio Code itself is a robust and lightweight piece of software that’s free, with a strong extensions community. It’s one of the best things to come out of Microsoft.

Here are the 9 things I did to boost my coding speed and how it can help you code faster.

1. Snippets

Snippets is a major productivity booster because it takes the manual work out of coding. It may feel like cheating at first, but once you’ve typed out a switch statement in the view for Angular so many times, you kind of get over it.

Coding is very much mostly knowing what patterns to use and where. Snippets make your coding workflow move faster because pre-configured bits of code become readily available at your fingertips.

As a result, you’re spending more time thinking about how the code fits and works together rather than the actual act of coding itself. I know it sounds weird — but if we’ve got a finite number of hours to work on a project, the more time we have to think about the structures and architecture, the higher the chances of delivering something that is robust and scalable.

Using snippets can also help you learn a particular framework or library quicker. This is because you’re spending less time trying to figure out what went wrong and more time getting things right on the first go.

Angular TypeScript Snippets for VS Code by John Papa is a good one for writing faster Angular code. ES7 React/Redux/GraphQL/React-Native snippets by dsznajder is the one I use for my React related projects.

I haven’t worked with Vue yet, but Vue 2 Snippets by hollowtree has over 900k installs and looks like a promising snippets extension for Vue.

2. IntelliSense

IntelliSense is a fancy word for auto-complete. However, it’s a lot smarter than your usual auto-complete.

IntelliSense is being touted as one of the core productivity features in Visual Studio Code — a feature that many people picking up the editor don’t utilize enough.

When you hover over something in your code, it will give you additional typing details with the ability to track down the origin of the source. While this information can be useful if you’re working with unfamiliar objects created by other people, the main power of IntelliSense is in its ability to predict what you want to do next.

When you start writing an object, for example, it gives you a dropdown list of what potential methods you can use. As you give the editor more letters, it will filter down the available methods, and you can just navigate through the shortened list and hit enter for the one you want. If you’re unsure, the documentation for that particular method is also readily available at your fingertips.

If you’re coming into VS Code as a Java or C++ developer, this may not feel like a groundbreaking feature. I’ve used something similar during my time with Eclipse. But for JavaScript-based projects, this feature and the ability to tab your way through the code makes coding a lot faster.

3. Integrated Terminal

Having an integrated terminal can save you time navigating between multiple screens. It also means that you can easily spot errors during automated compiling without the need to disrupt your workflow.

To open up the terminal, the shortcut keys are ctrl + the backtick symbol `.

When you open it up, it will initially start at the root directory of your current workspace.

To open up another terminal, add shift to ctrl and the backtick `.

4. Peeking, References, and Update Symbol

When you’re working on a large project, a particular class, method, or property can be used in numerous places and spaces. Visual Studio Code lets you peek by compiling a list where you’ve used that reference and trace down the original source quickly and effectively.

To do this, you simply right-click on a particular method, function, or piece of reference that you want to track down and select Peek References. Alternatively, you can just highlight it and use shift + f12 for Windows-based machines.

The Update Symbol feature lets you make changes to your references as well. This is particularly useful during refactoring or when you find that the name no longer fits its purpose or scoped domain.

5. Key Bindings

Every time your fingers come off the keyboard, it adds a few seconds to your entire code creation process. While it may not seem like much, changing the location of your hands and switching to a completely different task may be just enough to break out of your flow state.

Many developers tend to prefer doing everything from the keyboard — simply because it’s faster.

Key bindings let you perform most tasks directly from your keyboard, meaning less time having to search through the different menus and files to get to what you want to achieve.

These key bindings are essentially keyboard shortcuts, and you can view a list of them via ctrl + k + s.

Or, if you prefer to not learn a completely new set of keyboard shortcuts or create your own, you can create custom key bindings. Alternatively, you can import key bindings from other popular editors. This will save you from having to learn an entirely new set of keyboard shortcuts.

You can find these extensions for remapping the default Visual Studio Code shortcuts here.

6. Zen Mode

Who doesn’t like a bit of zen?

Zen mode essentially turns your editor full screen and requires two key cords to work. This means you’re pressing a series of commands rather than just smashing all three buttons down.

You’ll need to check in the key bindings list to make sure what your one is. This is because there are a few tutorials on how to do this floating around, but they’re slightly different from each other.

By default, my particular editor is set to ctrl + z and k.

What this means is that I press ctrl + z and then k as two separate actions rather than all down together.

Zen mode can be useful for your flow state, and it gets rid of any potential distractions, like your browser or emails.

7. Git

You can perform git commits right from your Visual Studio Code editor. It turns out that git is supported and you can stage, commit, rollback, make comments, and everything else you’d do in the command line — but right inside the code editor.

All you have to do is click on the plus sign to add and right-click on a particular file to access more options.

While you can technically do all this via the console or through GitHub’s Desktop application, being able to commit and make changes without the need to navigate away from your editor can help speed up your process.

This is because you’re still inside the editor, and if you need to make changes to the code, you can do so in an efficient manner, without the need to break your flow and figure out where things are.

8. Debugger

Visual Studio Code comes with a debugger that allows you to run your code and put breakpoints at where you want it to stop. This allows you to pause your code at particular points and observe what’s going on.

Debugging involves more than just checking Chrome’s developers’ console to figure things out. Perhaps you’ve managed to pinpoint where the issue is happening and have a suspicion towards a particular line, function, or method.

The ability to stop your code at particular points means that you can hone in and resolve the issue as it runs, allowing you to inspect the local state, call states, and related things.

All you have to do is navigate to the debugger via the bug icon down the side and click on the play button to start the application.

You can also go down to the console and observe the current state by typing it in the command line.

By default, Visual Studio Code runs your debugger based on Node.js — but you can also run the debugger on Chrome itself. Under normal circumstances, you wouldn’t be able to pause the running of your application. But with the debugger, you can create breakpoints and see what’s happening.

While it’s doing that, you can also highlight over your code in order to see what the current state of something is at any particular breakpoint.

And if you install the GitLens extension, it gives you more information about the commits — like who did what, remote repositories, tags, and staged and unstaged changes. It’ll also annotate your code with messages from git — like commit time, changes made, who wrote what, and commit IDs. All you have to do is hover over a piece of code and it will tell you. This comes in handy in a team environment, and it makes accountability highly visible.

9. Live Share

Have you ever edited a Google Doc with someone else before? Live share is essentially the same concept — except connected through your Azure or GitHub account — and for code.

Live share is like the Google Docs of writing code, and it can be super useful for collaborating with team members. It enables faster debugging of problems, and it allows for peer programming and rapid development of code.

Live share isn’t a native feature, but you can download it as an extension. You can do so here.

Parting Words

The effectiveness of a developer isn’t just based on well they can code — it’s also based on how well they can use the tools they’re given.

Visual Studio Code is a fantastic piece of free and open-source software that can help speed up your coding process. So it’s good to dive its features and functionality in order to make yourself a bit more productive.

While it doesn’t prevent bad code from happening, there are enough things and extensions available to help you down the right path.