10 essential tips to supercharge VS Code and code faster
Tags: vscode, productivity, programming, webdev
Published: 2024-07-12 04:39:04

![](https://archive.ph/ZtiT2/44c67131a1ed537edcab3a35bb84d18480b744a0.webp)

95% of developers are just wasting VS Code’s potential.

It has so many hidden gems that upgrade your productivity and quality of life — but they’re not using them.

Use these 10 solid tips to gradually supercharge VS Code and code faster: with powerful extensions, little-known keyboard shortcuts, beautiful fonts & colors, and so much more.

# 1\. First things first

Starting with the essentials.

# Learn important keyboard shortcuts

You will code so much faster once you learn these

-   Highlight code left & right with **Shift + Left / Right**

![](https://archive.ph/ZtiT2/b8e4fc673d702b34acbe1ed62425eedc24241cdf.gif)

-   Copy line without highlighting with **Ctrl + C**

![](https://archive.ph/ZtiT2/75fc4cd7bbdfee318be597d354281a5ed19bb57d.gif)

-   Move line up / down with **Alt + Up / Down**

![](https://archive.ph/ZtiT2/14b1e26749d6ab126b12bba48ef66189a9476cec.gif)

-   Delete line with Ctrl + K
-   Close file with Ctrl + W
-   Close all files with Ctrl + K, W

# Enable autosave

To save your files automatically.

I’ve talked about why **I dislike autosave** here, but it’s a great feature to stop the constant Ctrl + S’s.

![](https://archive.ph/ZtiT2/d7c8da1cb072799955d0ad172078b08e718e234a.webp)

# Set up outline view

The Outline View gives you a quick overview of all the symbols in your active file from the File Explorer Pane:

![](https://archive.ph/ZtiT2/09d9ba71c05341a087b844194a2ab32dcea18750.webp)

But I recommend you move to a separate pane to have more space:

![](https://archive.ph/ZtiT2/7bbedeaefd6ea97744872cbc28f43450e26a0f1a.gif)

# 2\. Set up source control

You need to set up integrations for Git to **easily track your changes**.

# Init repo with VS Code

Use the Source Control Pane to initialize a new local repo.

![](https://archive.ph/ZtiT2/ac100406903c576dd6f5a5c921df9046c6f964b7.webp)

# Commit changes

You can quickly stage your files and press Ctrl + Enter anytime you need to commit:

![](https://archive.ph/ZtiT2/e94737813e2f6edc75e9c7332e50122f9546aca4.gif)

# Install this extension

Now install the [GitLens extension](https://archive.ph/o/ZtiT2/https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens) for even better integration:

GitLens will show you essential repo data and info on your current file — file history, commits, branches, and more.

![](https://archive.ph/ZtiT2/85faa2e5136fc5c115152e4ee43f02205d09e42d.webp)

Place the cursor on any line in the editor and GitLens will display info on the latest commit where the line was changed:

![](https://archive.ph/ZtiT2/773626936bca2d204febbb460015d702c63991b0.webp)

# 3\. Code faster with AI

GenAI has booming recently and now we have extensions that give you intelligent AI code completions as you type.

And IDE-integration chatbots, some of which use context from your codebase.

![](https://archive.ph/ZtiT2/72cf36596497a938a4be327ddbf2be2f72493f7a.webp)

Great ones you can try;

1.  [**GitHub Copilot**](https://archive.ph/o/ZtiT2/https://marketplace.visualstudio.com/items?itemName=GitHub.copilot): paid, $10/month
2.  [**Coding Beauty Assistant**](https://archive.ph/o/ZtiT2/https://marketplace.visualstudio.com/items?itemName=coding-beauty.coding-beauty-assistant): free
3.  [**Tabnine**](https://archive.ph/o/ZtiT2/https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-vscode): has free version, $12 per month

# 4\. Learn snippets to code faster

# [Emmet](https://archive.ph/o/ZtiT2/https://code.visualstudio.com/docs/editor/emmet)

With this I type much faster when working with JSX, CSS, HTML, and more.

![](https://archive.ph/ZtiT2/414089f5266dfb88f5ababf44d325f297dcd7ed1.gif)

One thing you’ll notice is how similar the abbreviations are to CSS selectors.

This is by design: Emmet syntax is inspired by CSS selectors.

# Install this extension

[JavaScript (ES6) code snippets](https://archive.ph/o/ZtiT2/https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets): fully loaded with heaps of time-saving code snippets for JavaScript.

See how the `imp` and `imd` snippets quickly import the modules with the ES6 syntax:

![](https://archive.ph/ZtiT2/c185b0de60204d488abb79aab762330a08717d54.gif)

# 5\. Install keymaps and feel at home

Priceless if you’re used to another code editor.

So if you’re coming from:

1.  Vim: [Install this extension](https://archive.ph/o/ZtiT2/https://marketplace.visualstudio.com/items?itemName=vscodevim.vim)
2.  Atom: [Install this extension](https://archive.ph/o/ZtiT2/https://marketplace.visualstudio.com/items?itemName=ms-vscode.atom-keybindings)
3.  Visual Studio: [Install this extension](https://archive.ph/o/ZtiT2/https://marketplace.visualstudio.com/items?itemName=ms-vscode.vs-keybindings)

For example in Atom, you could easily press `A` and `Shift + A` to create a new file or a new folder.

Installing the Atom keymap instantly brings this shortcut to VS Code — no need to manually edit hotkeys:

![](https://archive.ph/ZtiT2/10daf63472f258d32f11ecbba1a7ae580c3ef468.gif)

# 6\. Start auto-linting code

You should install a linter to avoid errors and enforce style.

Use [ESLint](https://archive.ph/o/ZtiT2/https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) to quickly find and fix problems in your JS code and easily avoid poor coding practices — like unused vars:

![](https://archive.ph/ZtiT2/4343e61c6fd07b5fa36816b7d3e2b92ff91b85f0.webp)

# 7\. Enable auto-formatting

Install [Prettier](https://archive.ph/o/ZtiT2/https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) to automatically format your code with consistent formatting.

With _Format On Save_, Prettier instantly formats your code when you press Ctrl + S.

![](https://archive.ph/ZtiT2/7ac2afa77e1d509968ea5a8066668f8ed76f0476.gif)

You can enable it in Settings:

![](https://archive.ph/ZtiT2/277421ecbd11d9a4e0e2a7b35643ad3706d09da3.webp)

# 8\. Set up debugging and testing

So VS Code already gives you fantastic debugging features.

Set breakpoints, inspect the call stack, watch variables and more.

![](https://archive.ph/ZtiT2/96bfe00f6885827db2424fd8b2deca93ee3b75c1.webp)

# Testing

These extensions will make testing much easier:

-   [Jest Runner](https://archive.ph/o/ZtiT2/https://marketplace.visualstudio.com/items?itemName=firsttris.vscode-jest-runner) for Jest testing
-   [Mocha sidebar](https://archive.ph/o/ZtiT2/https://marketplace.visualstudio.com/items?itemName=maty.vscode-mocha-sidebar) for Mocha testing

Clicking _Run_ runs the particular test case with no need for the terminal.

![](https://archive.ph/ZtiT2/e102eee29d83f88186863d78e3202c5fada53c61.webp)

# 9\. Use a more code-friendly font

If you look closely you’ll see that I’m NOT using the default Consolas font.

I’m using [Cascadia Code](https://archive.ph/o/ZtiT2/https://github.com/microsoft/cascadia-code) — a beautiful font from Microsoft with aesthetically pleasing code ligatures.

Ligatures:

![](https://archive.ph/ZtiT2/8cc12cd682b97904220107c8c2ea2bb46e803026.webp)

[Fira Code](https://archive.ph/o/ZtiT2/https://github.com/tonsky/FiraCode) is another great one I’ve used:

![](https://archive.ph/ZtiT2/61bb86754ad6e08fa7aad14962f816ebcc74d491.webp)

You can easily change your font in settings:

![](https://archive.ph/ZtiT2/5be15a4f25afb1ffcd032ca1ed443b42cecb43bc.webp)

# 10\. Beautify your editor with colorful themes

# Color themes

Set up a beautiful theme to easily modify the colors of all the aspects of the UI.

Including your code’s highlighting:

![](https://archive.ph/ZtiT2/07cef47eac7c548408b3328c21aac78db9249f40.gif)

Some great themes I’ve used:

-   [Atom One Light](https://archive.ph/o/ZtiT2/https://marketplace.visualstudio.com/items?itemName=akamud.vscode-theme-onelight) & [Atom One Dark](https://archive.ph/o/ZtiT2/https://marketplace.visualstudio.com/items?itemName=akamud.vscode-theme-onedark) — The main two I switch between.
-   [One Dark Pro](https://archive.ph/o/ZtiT2/https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme)
-   [Night Owl](https://archive.ph/o/ZtiT2/https://marketplace.visualstudio.com/items?itemName=sdras.night-owl)

You can change themes with the Settings icon:

![](https://archive.ph/ZtiT2/9f73c73d26a178ccb9344d0cb96cb4ac7dd00207.webp)

# Icon themes

The way VS Code displays icons in the File Explorer Pane is pretty underwhelming:

![](https://archive.ph/ZtiT2/d69d0d47721d8fba346f7be85a49cddd052d4fbc.webp)

That’s why you should install VS Code Icons and spice things up:

The distinct icons make it much easier to understand every file and the purpose they play in the codebase.

# Final thoughts

With all these new settings & extensions, you’re all set up to build rapidly and achieve your dev goals much faster.