vscode

10 tips to supercharge VS Code and code 10x faster (0 to 100)

95% of developers are just wasting the potential of VS Code.

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

  • Copy line with Ctrl + C
  • Highlight code left & right with Shift + Left / Right
  • Move line up / down with Alt + Up / Down
  • 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 before, but it’s a great feature to stop the constant Ctrl + S’s.

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:

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

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.

Commit changes

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

Install this extension

Now install the GitLens extension for even better integration:

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

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

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.

Great ones you can try:

  1. GitHub Copilot: paid, $10/month
  2. Coding Beauty Assistant: free, $10 per month for more features
  3. Tabnine: has free version, $12 per month

4. Learn snippets to code faster

Emmet

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

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

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
  2. Atom: Install this extension
  3. Visual Studio: Install this extension

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:

6. Start auto-linting code

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

Use ESLint to quickly find and fix problems in your JS code and easily avoid poor coding practices — like unused vars:

7. Enable auto-formatting

Install Prettier to automatically format your code with consistent formatting.

With Format On Save, Prettier instantly formats your code when you press Ctrl + S.

You can enable it in Settings:

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.

Testing

These extensions will make testing much easier:

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

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 — a beautiful font from Microsoft with aesthetically pleasing code ligatures.

Ligatures:

Fira Code is another great one I’ve used:

You can easily change your font in settings:

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:

Some great themes I’ve used:

You can change themes with the Settings icon:

Icon themes

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

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.

Go from 0 to 100 in VS Code

Final thoughts

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

5 unnecessary VS Code extensions you should uninstall now (#2)

EVERY new extension you add to VS Code increases the memory and CPU power it gobbles up:

We need to keep this number as low as possible to minimize this resource usage — and stop these extensions from clashing with one another or with native functionality.

And you know, there’s a significant number of extensions in the Marketplace that provide functionality VSCode already has built-in.

Usually they were made when the feature wasn’t added yet; but once that happened they became largely redundant additions.

So below, I cover a list of these integrated VSCode features and extensions that provide them. Uninstalling these now dispensable extensions will increase your editor’s performance and efficiency.

1. HTML tag auto-renaming

A powerful feature I didn’t discover for months after I started using VS Code!

You just start editing the starting tag and the ending tag auto-updates to match:

Extensions for this

  • Auto Rename Tag (17.7M downloads): “Automatically rename paired HTML/XML tag, same as Visual Studio IDE does”.

But feature already built-in

I use this setting to easily get tag auto-rename without installing anything:

  • Editor: Linked Editing: “Controls whether the editor has linked editing enabled. Depending on the language, related symbols e.g. HTML tags, are updated while editing.” Default is false

2. Auto-trim trailing spaces

This handy feature removes ending whitespace from all the lines of your file to maintain consistent formatting.

Extensions for this

  • Trailing Spaces (2.0M downloads): “Highlight trailing spaces and delete them in a flash!”.
  • AutoTrim (35.4K downloads): “Trailing whitespace often exists after editing lines of code, deleting trailing words, and so forth. This extension tracks the line numbers where a cursor is active, and removes trailing tabs and spaces from those lines when they no longer have an active cursor”.

But feature already built-in

VSCode has a built-in setting that can automatically remove trailing spaces from a file.

It automatically trims the file when it is saved, making it a background operation you no longer have to think about.

Trailing spaces are removed from the file on save.
Trailing spaces are removed from the file on save.

Here’s the setting:

  • Files: Trim Trailing Whitespace: “When enabled, will trim trailing whitespace when saving a file”. It’s false by default.
The auto trimming setting in the VSCode Settings UI.
The auto trimming setting in the Settings UI.

Add this to your settings.json file to enable auto trimming:

settings.json

JavaScript
{ "files.trimTrailingWhitespace": true, }

You might want to turn this setting off for Markdown files since you have to put two or more spaces at the end of a line to create a hard line break in the output, as stated in the CommonMark specification. Add this to your settings.json file to do so.

settings.json

JavaScript
{ "[markdown]": { "files.trimTrailingWhitespace": false } }

Alternatively, you can simply use a backslash (\) instead of spaces to create a hard line break.

3. HTML tag auto-wrapping

I can’t count how many times I’ve needed to wrap one HTML element in a new one — usually a div.

With this feature I can instantly wrap the <p> tag in a <div> without painfully inserting one <div> above and one </div> below.

Extensions for this

  • htmltagwrap (674K downloads): “Wraps selected code with HTML tags”.
  • html tag wrapper (458K downloads): “wrap selected html tag by press ctrl+i, you can change the wrapper tag name simply too”.

But feature already built-in

Thanks to the built-in Wrap with Abbreviation command I can rapidly wrap a tag in any tag type.

Did you see how the new wrapper’s name changed according to your input?

4. Colorful indentation

Indentation guides make it much easier for you to trace out the different indentation levels in your code.

Extensions for this

  • Indent Rainbow: “This extension colorizes the indentation in front of your text, alternating four different colors on each step”

But feature already built-in

So yeah, once again VS Code has this as a built-in feature.

We just change the Editor > Guides: Bracket Pairs setting from active to always show the colorful indents.

To go from this:

To this✅:

Beautiful.

5. NPM integration

In every serious project you’ll probably have tools to automate testing, linting, building, and other tasks.

So this feature makes it easier to start those tasks with as little as the click of a button. No need to switch context whatsoever.

Extensions for this

  • NPM (6.8M installs): “This extension supports running npm scripts defined in the package.json file”. I always saw this as a recommended extension after opening any project with package.json

But feature already built-in

With the built-in NPM scripts view I can easily see all the scripts in my project’s package.json and run any I want:

Ugh, but now you have to drag your mouse all the way over there just to run a simple task.

So much better to go with the Tasks: Run Task command:

“Tari it’s still too slow!!”

Alright fine, if you know the exact script you want, then just Ctrl + ` to open the built-in terminal and feed your CLI desires:

Final thoughts

These extensions might have served a crucial purpose in the past, but not anymore for the most part, as much of the functionality they provide have been added as built-in VSCode features. Remove them to reduce the bloat and increase the efficiency of Visual Studio Code.

5 unnecessary VS Code extensions you should uninstall now

Can you count how many VS Code extensions you have right now?

Me: A whooping 56.

If you’re finding VS Code getting slower and more power-hungry with time, this number could well be the reason.

Because EVERY new extension added increases the app’s memory and CPU usage.

Coding is already challenging enough; Nobody need contend with this:

Maybe I should just give up music instead.

So we need to keep this number as low as possible to minimize this resource usage; ad also stopping these extensions from clashing with one another or with native functionality.

And you know, there’s a significant number of extensions in the Marketplace that provide functionality VSCode already has built-in.

Usually they were made when the feature wasn’t added yet; but once that happened they became largely redundant additions.

So below, I cover a list of these integrated VSCode features and extensions that provide them. Uninstalling these now dispensable extensions will increase your editor’s performance and efficiency.

I’ll be listing settings that control the behavior of these features. If you don’t know how to change settings, this guide will help.

Related: 10 Must-Have VSCode Extensions for Web Development

1. Auto closing of HTML tags

When you add a new HTML tag, this feature automatically adds the corresponding closing tag.

The closing tag for the div is automatically added.
The closing tag for the div is automatically added.

Extensions for this

These extensions add the auto-closing feature to VSCode:

  • Auto Close Tag (12.3M+ downloads): “Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text”.
  • Close HTML/XML Tag (344K downloads): “Quickly close last opened HTML/XML tag”.

But feature already built in

I use these settings to enable/disable the auto-closing of tags in VSCode:

  • HTML: Auto Closing Tags: “Enable/disable autoclosing of HTML tags”. It is true by default.
  • JavaScript: Auto Closing Tags: “Enable/disable automatic closing of JSX tags”. It is true by default.
  • TypeScript: Auto Closing Tags: “Enable/disable automatic closing of JSX tags”. It is true by default.
Settings for auto closing in the VSCode Settings UI.
Settings for auto-closing in the Settings UI.

Add the following to your settings.json file to turn them on:

settings.json

{
  "html.autoClosingTags": true,
  "javascript.autoClosingTags": true,
  "typescript.autoClosingTags": true
}

2. Path autocompletion

The path autocompletion feature provides a list of files in your project to choose from when importing a module or linking a resource in HTML.

Extensions for this

These extensions add the path autocompletion feature to VSCode:

  1. Path IntelliSense (12.5M+ downloads): “Visual Studio Code Plugin that autocompletes filenames”.
  2. Path Autocomplete (1.7M+ downloads): “Provides path completion for Visual Studio Code and VS Code for the web”.

But feature already built in

VS Code already has native path autocompletion.

When I type in a filename to import (typically when the opening quote is typed), a list suggested project files shows up for me to quickly choose from.

3. Snippets for HTML and CSS

These extensions help you save time by adding common HTML and CSS snippets using abbreviations you can easily recall.

Extensions for this

These extensions bring convenient HTML and/or CSS snippets to VSCode:

  • HTML Snippets (10.1M+ downloads): “Full HTML tags including HTML5 snippets”.
  • HTML Boilerplate (3.2M+ downloads): “A basic HTML5 boilerplate snippet generator”.
  • CSS Snippets (225K+ downloads): “Shorthand snippets for CSS”.

But feature already built-in

Emmet is a built-in VSCode feature that provides HTML and CSS snippets like these extensions. As you’ll see in the official VSCode Emmet guide, it’s enabled by default in html, haml, pug, slim, jsx, xml, xsl, css, scss, sass, less, and stylus files.

Comprehensive to say the least.

When you start typing an Emmet abbreviation, a suggestion will pop up with auto-completion options; You’ll also see a preview of the expansion as you type in the VSCode’s suggestion documentation fly-out (if it is open).

Using Emmet in VSCode.
Using Emmet in VSCode.

As you saw in the demo, this:

ol>li*3>p.rule$

turns into this:

<ol>
  <li>
    <p class="rule1">r</p>
  </li>
  <li>
    <p class="rule2"></p>
  </li>
  <li>
    <p class="rule3"></p>
  </li>
</ol>

Notice how similar the abbreviations are to CSS selectors. It’s by design; as stated on the official website, Emmet syntax is inspired by CSS selectors.

4. Bracket pair colorization

Bracket pair coloring is a popular syntax highlighting feature that colors brackets differently based on their order.

It makes it easier to identify scope and helps in writing expressions that involve many parentheses, such as single-statement function composition.

Extensions for this

Until VSCode had it built-in, these extensions helped enable the feature in the editor:

  1. Bracket Pair Colorizer 2 (6.1M+ downloads): “A customizable extension for colorizing matching brackets”. It has now been deprecated.
  2. Rainbow Brackets: (1.9M downloads): “A rainbow brackets extension for VS Code”.

I noticed Colorizer 2 has actually been deprecated since 2021 — wasn’t enough to stop millions from installing it every single year till date.

But feature already built in

After seeing the demand for bracket pair coloring and the performance issues involved in adding the feature as an extension, the VSCode team decided to integrate it into the editor.

In this blog, they say that the native bracket pair coloring feature is more than 10,000 times faster than Bracket Pair Colorizer 2.

Here’s the setting to enable/disable bracket pair colorization.

  • Editor > Bracket Pair Colorization: “Controls whether bracket pair colorization is enabled or not”. It is true by default, there’s been some debate about whether this should be the case here.
The bracket pair colorization option in the VSCode Settings UI.
The bracket pair colorization option in the Settings UI.

You can enable this by adding the following to your settings.json

settings.json

{
  "editor.bracketPairColorization.enabled": true
}

There is a maximum of 6 colors that can be used for successive nesting levels. Although each theme will have its maximum. For example, the Dracula theme has 6 colors by default, but the One Dark Pro theme has only 3.

Left: bracket pair colors in One Dark Pro theme. Right: bracket pair in Dracula theme.
Left: bracket pair colors in One Dark Pro theme. Right: bracket pair in Dracula theme.

Nevertheless, you can customize the bracket colors for any theme with the workbench.colorCustomizations setting.

  "workbench.colorCustomizations": {
    "[One Dark Pro]": {
      "editorBracketHighlight.foreground1": "#e78009",
      "editorBracketHighlight.foreground2": "#22990a",
      "editorBracketHighlight.foreground3": "#1411c4",
      "editorBracketHighlight.foreground4": "#ddcf11",
      "editorBracketHighlight.foreground5": "#9c15c5",
      "editorBracketHighlight.foreground6": "#ffffff",
      "editorBracketHighlight.unexpectedBracket.foreground": "#FF2C6D"
    }
  },

We specify the name of the theme in square brackets ([ ]), then we assign values to the relevant properties. The editorBracketHighlight.foregroundN property sets the color of the Nth set of brackets, and 6 is the maximum.

Now this will be the bracket pair colorization for One Dark Pro:

Customized bracket pair colorization for One Dark Pro theme.
Customized bracket pair colorization for One Dark Pro theme.

5. Auto importing of modules

With an auto-importing feature, when a function, variable, or some other member of a module is referenced in a file, the module is automatically imported into the file, saving time and effort.

The function is automatically imported from the file when referenced.
The function is automatically imported from the file when referenced.

If the module files are moved, the feature will help automatically update them.

Imports for a file are automatically updated on move.
Imports for a file are automatically updated on move.

Extensions for this

Here are some of the most popular extensions providing the feature for VSCode users:

  • Auto Import (3.8M downloads): “Automatically finds, parses, and provides code actions and code completion for all available imports. Works with Typescript and TSX”.
  • Move TS (810K downloads): “extension for moving typescript files and folders and updating relative imports in your workspace”.

But feature already built in

You can enable or disable auto-importing modules in VSCode with the following settings.

  • JavaScript > Suggest: Auto Imports: “Enable/disable auto import suggestions”. It is true by default.
  • TypeScript > Suggest: Auto Imports: “Enable/disable auto import suggestions”. It is true by default.
  • JavaScript > Update Imports on File Move: “Enable/disable automatic updating of import paths when you rename or move a file in VS Code”. The default value is prompt, meaning that a dialog is shown to you, asking if you want to update the imports of the moved file. Setting it to alwayswill cause the dialog to be skipped, and never will turn off the feature entirely.
  • TypeScript > Update Imports on File Move: “Enable/disable automatic updating of import paths when you rename or move a file in VS Code”. Like the previous setting, it has possible values of prompt, always, and never, and the default is prompt.
One of the auto import settings in the Settings UI.
One of the auto import settings in the Settings UI.

You can control these settings with these settings.json properties:

{
  "javascript.suggest.autoImports": true,
  "typescript.suggest.autoImports": true,
  "javascript.updateImportsOnFileMove.enabled": "prompt",
  "typescript.updateImportsOnFileMove.enabled": "prompt"
}

You can also add this setting if you want your imports to be organized any time the file is saved.

"editor.codeActionsOnSave": {
    "source.organizeImports": true
}

This will remove unused import statements and arrange import statements with absolute paths on top, providing a hands-off way to clean up your code.

Final thoughts

These extensions might have served a crucial purpose in the past, but not anymore for the most part, as much of the functionality they provide has been added as built-in VSCode features. Remove them to reduce the bloat and increase the efficiency of Visual Studio Code.

VS Code: 5 rapid file creation tips for greater productivity

From painfully slow to lightning-fast, let’s look at all the 5 ways to create a file in VS Code.

And fastest way adds new files without having to use your mouse at all! We’ll see…

5. File > New File…

I’m pretty sure very few people use this apart from those who are new to text editors.

You move your mouse all the way up to File then click New File…

Then you’ve still got to enter the filename:

THEN, a file picker dialog for you to choose the folder – never mind VS Code having its own built-in file manager.

Before finally:

Create: New File

This is almost like the first, except you use the Create: New File from the Command Palette.

4. Double-click tab bar

Not many know about this method… double-clicking the file tab bar:

Ctrl + N

Or use the faster Ctrl + N keyboard shortcut.

So after Ctrl + N you either manually select a language:

Or you just start typing and wait for language auto-detection:

It’s useful when you don’t have any open project and you just want a quick file to work on.

You’re still got to save it though:

3. New File… icon button

This is one of the more popular ways; clicking the New File... icon button in the File Explorer Pane:

2. Double-click file explorer pane

This works great for top-level files.

1. A

Opening keyboard shortcuts like this:

And editing it like this:

To create files faster than ever at the single press of a key:

They all have different speeds but they’re all useful. VS Code’s vast versatility is unmatched.

Essential VS Code tips & extensions for power zooming

As expected VS Code has the basic zoom in & out in every text editor.

But they’re some hidden gems to quickly level up your zoom game once found.

Dig into the command palette and you’ll find Font zooming – zooming just the code without the rest of the editor UI.

Pretty cool – did you know about this?

Zoom with scroll

Easily adjust zoom with Ctrl + mouse scroll:

After turning on the Editor: Mouse Wheel Zoom setting:

Powerful zoom extensions

The VS marketplace is packed full with powerful, capable extensions that boost various aspects of your workflow.

For zooming, there’s none better to start with than Zoom Bar:

The first thing you notice right away after install: the exact zoom level now shows up in the status bar:

+ and - buttons are obviously to zoom in and out.

Select the zoom percentage and this dialog appears:

Tons of pre-defined zoom options to choose from.

Just as you can see your exact zoom, you can also set it precisely with Input zoom:

Why not? 😏

And what about zooming just the terminal font?

There’s an extension for that too:

At the bottom-right you can clearly see the displayed terminal font.

My status bar has gotten semi-painfully humongous now, but it’s clear how useful these upgrades are… They were always great for taking screenshots when I used a 768p PC.

An of course: laser-precise focus on specific lines, syntax, and details without straining your eyes. Or whatever other reason you need to zoom for.

10 essential VS Code tips & tricks for greater productivity: Part 2

I’m back with 10 more powerful VS Code tricks to greatly enhance your productivity.

From rapid navigation to speedy code editing, these tips will help you achieve your coding goals faster than ever with a top-notch development experience.

1. Publish repo to GitHub in literal seconds

Do you remember this?

Or maybe you still do this?

It’s the old-school way of publishing your code to GitHub. Create a repo, enter name and details, create remotes…

With VS Code you don’t need to do this anymore. From the Source Control panel you can now quickly publish any local repo to GitHub in just 2 clicks.

And forget git init: creating the repo is even easier with a single click:

You can safely forget about git init

Quickly commit with Ctrl + Enter:

Now easily publish your repo in seconds:

Okay this is definitely more than “seconds” — but that’s because I was somewhere with snail Internet! Ideally it should be like this:

Now we can enjoy our Sigma English rant directly on GitHub:

2. Workspaces for multi-codebase coding

There was a point when I couldn’t do without this feature.

And you won’t when your project is sprawling with numerous inter-connected codebases stored in different folders that all make an important part of the system.

In one of our projects, we had at least 3 folders.

  1. One folder for Firebase-y stuff: Functions, DB security rules, and more.
  2. One folder for the Next.js website/app.
  3. One folder for the cross-platform app codebase.

Imagine the pain of having to switch back and forth between these in 3 open VS Code windows; opening terminals here and there, searching for the wrong file in the wrong codebase, mixing up your Alt + Tab sequence with other open apps, along with the mental confusion and delay it causes anytime you switch apps.

And don’t forget this 👇. This is a pain.

The pain of clicking twice and having to select the correct window based on their titles.

This is why we need workspaces — one window with all the files and subfolders you need.

Sidenote: And if you’re a Windows user struggling to manage your File Explorer you probably want to try this tiny utility (WinENFET).

Every folder is a workspace to VS Code, so you can easily add more folders with File > Add Folder to Workspace…

When everything is done you’ll have all the folders you need and their files easily accessible on the File Explorer pane.

And when you search for files with Ctrl + P or Ctrl + Shift + F, it’ll apply to every file in all the folders:

You can also rapidly create new terminals with any of the folders as the working directory.

With this and Win 11 22H2 Tabs we’ve easily cut our open windows in half.

3. Power editing with side-by-side view

And when you need to work with multiple of those workspace files at once? Split mode has you covered.

I once ported a Flutter Dart class to its JavaScript equivalent and this feature made things much easier and faster.

You can also do this with one of the View: Split Editor... commands.

Split them down or split them right:

Master coder at work.

VS Code also uses this split view to show changes between different file versions saved in the Timeline view or source control.

4. Rapidly copy any line

In most text editors you would drag your mouse over the line and Ctrl + C.

But VS Code is not like most text editors; it’s a clean productivity beast! If not for the name I wouldn’t even have believed this came from Microsoft at first glance.

To copy a line just move the cursor to it and press Ctrl + C.

Whenever you do need to highlight the line you can always use Ctrl + L:

Press it again to highlight more lines below.

And when you just want part of the line you can use Shift + Left / Right to highlight one way or the other.

You can also use Ctrl + X to quickly cut the line where the cursor is without any highlighting.

5. Move line up and down

But if you’re cutting just to paste somewhere else in the same file, then there’s no need to pollute the clipboard.

Simply use the Alt + Up/Down to move the line to wherever you want:

You can even move large selections of multiple lines up and down.

Including code folds:

6. Code folding for monstrous files

I found this invaluable for those gigantic files with tons of functions and methods. Or a huge Flutter or JSX component with unbelievable amounts of deep nesting.

Why some people hate Flutter/Dart

By clicking those down-facing arrows you can easily collapse various segments of the code you’re not currently working with.

Better still the Ctrl + Shift + [ has us covered.

And Ctrl + Shift + [ has us uncovered.

7. Bird’s eye with Outline view

The Outline View is another brilliant way to keep track of large code files.

This feature gives a broad overview of all the symbols and nested symbols in the file: variables, classes, functions… you name it.

You can sort the top-level symbols shown by their position, name, or type.

And when you’re moving around a lot you probably want to keep the Follow Cursor option turned on, to make the selected symbol in the outline match the selected symbol in the file:

Normally you’ll find this view in the File Explorer pane along with Open Editors and Timeline, but as I started using them more often for my own monstrous files I moved it to a separate pane:

8. Go to symbol quickly

And when we stubbornly refuse to split up the file and it gets HUGE; so huge that navigating through the *outline* is becoming a chore, then it’s time to: Go To Symbol.

With the Ctrl + P, @ shortcuts.

And when we finally do the sensible thing and break up the file, we can still search across all those files and more, with Ctrl + T:

9. Go to definition

And once you get to a symbol, you can easily view the definition with Alt + Click or F12:

Double-click the definition popup to fully open the file:

10. Undo cursor quickly

After going to a symbol or viewing its definition we’ll probably want to return to where we were just a few moments prior.

Instead of wasting time relying on short-term memory, you can rest assured that the Ctrl + U keyboard will take you to exactly where you were before.

This is also essential when you go to a line by Ctrl + G.

These 10 powerful tips will elevate your efficiency and make day-to-day coding life easier and more enjoyable.

Key takeaways

  1. Create and publish a GitHub repo in seconds from the Source Control Panel (open with Ctrl + Shift + G G).
  2. Manage multiple folders in a workspace with File> Add Folder to Workspace....
  3. Code with multiple files at once with the View > Split Editor....
  4. Quickly copy a line with Ctrl + C.
  5. Move a line or up or down with Alt + Up / Down.
  6. Collapse code blocks and nested JSX with Ctrl + Shift [.
  7. View all symbols in a file at once with Outline View
  8. Search all symbols in the file with Ctrl + P, @, search in workspace with Ctrl + T
  9. Go to where a symbol was definite with Ctrl + Click or F12.
  10. Revert cursor to previous location with Ctrl + U.

How to easily fix the “Command not found” error in VS Code

Are you developing a Visual Studio Code extension and experiencing the “Command not found” error? Let’s learn how to fix it in this article.

In this article

1. Register command in package.json contributes

To fix the “Command not found” error in a VS Code extension, make sure your extension registers the command under the contributed field in your package.json file:

package.json
{ ... "contributes": { "commands": [ ... ] } ... }

2. Register command in package.json activationEvents

To fix the “Command not found” error in a VS Code extension, make sure you’re added the command to the activationEvents array in your package.json file:

package.json
{ ... "activationEvents": [ "onCommand:extension.showMyExtension", "onCommand:extension.callMyExtension" ] ... }

3. Check console logs for any errors

One common cause of “Command not found” error in a VS Code extension is an undetected JavaScript error. You may find such errors when you examine the VS Code console logs.

Head to the Help menu and select Toggle Developer Tools and inspect the console for potential errors.

4. Register command in extension.ts registerCommand()

To fix the “Command not found” error in a VS Code extension, make sure you’re registered the command in extension.ts using vscode.commands.registerCommand():

JavaScript
// ... export async function activate(context: vscode.ExtensionContext) { // ... // commandAction is a callback function context.subscriptions.push( vscode.commands.registerCommand('command_name', commandAction) ); // ... }

5. Compile TypeScript source manually

The “Command not found” error happens in a VS Code extension if the TypeScript source wasn’t compiled to the out folder before launch or build.

This typically indicates a problem with your VS Code debug configuration, for example, preLaunchTask may be missing from launch.json:

launch.json should have a preLaunchTask which builds the VS Code extension's TypeScript files automatically.
launch.json should have a preLaunchTask which builds the TypeScript files automatically.

Or there may be a problem with the build script in package.json.

package.json
{ ... "scripts": { ... "vscode:prepublish": "npm run esbuild-base -- --minify && npm run build", "esbuild-base": "rimraf out && esbuild ./ext-src/extension.ts --bundle --outfile=out/extension.js --external:vscode --format=cjs --platform=node", "build": "webpack && tsc -p tsconfig.extension.json", ... } ... }

While you figure out what’s preventing the automatic TypeScript compilation, you can do it yourself with the tsc command:

Shell
# NPM npx tsc -p . # Yarn yarn tsc -p . # PNPM pnpm tsc -p .

6. Upgrade VS Code to match extension version

To fix the “Command not found” error in an extension, update VS Code to a version higher that what is specified in the engines.vscode field of your package.json file.

Or, downgrade engines.vscode to a version equal to or lower than the VS Code version you’re using to run the extension.

package.json
{ ... "engines": { "vscode": "^1.80.0" }, ... }

How to quickly toggle (enable/disable) autosave in VS Code

To enable or disable autosave in VS Code, use the File > Auto Save option from the menu bar.

The `File > Auto Save` option in Visual Studio Code enables/disables autosave.

After this, the “dirty” indicator will no longer show up when you modify a saved file.

Before:

Visual Studio Code without autosave.
No autosave.

After:

Visual Studio Code with autosave.
Autosave enabled – the unsaved indicator no longer shows.

Why do we need autosave?

So we can stop mindlessly pressing Ctrl + S.

So we can save time, increase productivity, and be much more certain that we’re working with the latest changes.

Autosave is not perfect though; it’s up to you to weigh the pros and cons – which we comprehensively cover here.

What’s not to like about autosave?

Some of the cons we talk about in that autosave article:

  1. It wastes resources because it saves even when you’re not ready to view the results of your changes.
  2. It makes it harder to recover from unexpected errors, for example, making a buggy file change and accidentally closing the file.
  3. There’s no auto-formatting with auto-save.

Enable/disable autosave in VS Code Settings

Alternatively, we can disable autosave in Visual Studio Code using the Files: Auto Save setting in the Settings page.

You can easily navigate to this page with the gear icon at the top-left of the code editor:

You can open Settings with the bottom-left gear icon.

Once you get there, you can use the search bar to find the setting.

Using the `Files: Auto Save` option in VS Code Settings.

As you can see, Files: Auto Save can be one of four possible values, namely:

  1. off – self-explanatory: disable autosave.
  2. afterDelay: – the new value enables autosave with the File > Auto Save setting. autosaves the file sometime after your changes.
  3. onFocusDelay – autosaves the dirty file when you switch windows or tabs.
  4. onWindowChange – as the name implies, autosaves the unsaved file when you switch windows in the operating system.

So there are more customization options in the Settings page than in the menu bar.

Change autosave delay in VS Code

When Files: Auto Save is set to afterDelay, you can modify the autosave delay in Visual Studio Code with the Files: Auto Save Delay setting.

Modifying the autosave delay in VS Code.

You may be better off increasing the autosave delay instead of disabling autosave entirely, so VS Code still saves your work automatically, while minimizing the impact on system resources.

Enable/disable autosave in VS Code with Command Palette

To turn autosave on or off in Visual Studio Code, you can also use the File: Toggle Auto Save command, accessible from the Command Palette:

Toggling auto save in VS Code with the Command Palette.

How to Quickly Reveal the Current File in Explorer in VS Code

You either want to reveal the current file in the VS Code Explorer sidebar view or in your OS file manager. We cover both in this article.

Reveal current file in Explorer view in VS Code

To reveal the current file in the Explorer view of Visual Studio Code, use the Reveal Active File in Explorer View command, accessible from the Command Palette.

Revealing the active file in the VS Code Explorer view.

Why is it useful to reveal the current file in the VS Code Explorer view?

When working on a project with numerous files and directories, it can sometimes be challenging to remember the exact location of a specific file. Revealing the current file in the VS Code Explorer view allows you to quickly locate the file’s position within the project structure.

  1. Context: This is particularly useful when you want to gain a broader context of where the file is located in relation to other files and folders.
  2. Navigation: And you can easily navigate to these related files.
  3. File management: VS Code’s Explorer view provides file management capabilities, such as renaming, moving, and deleting files. If you’re currently editing a file and you want to perform a management action on it, revealing the file in the Explorer view makes it easier to perform these actions without having to manually navigate through the directory structure.
  4. Version control: If your project is under version control like Git, revealing the current file in the Explorer view can help you understand the file’s status in the context of version control. You can see if the file has been modified, staged, or is part of a particular branch, which can aid in your development workflow.
  5. Collaboration: When working on a project with others, revealing the current file can help your team members easily find and access the same file you’re working on. This is especially useful if you’re discussing a specific file in a conversation or during a code review.

Use the Reveal in File Explorer View command

To reveal the current file in the Explorer view in VS Code, run the Reveal Active File in Explorer View command.

Reveal the active file in the VS Code Explorer view.

In VS Code, we have commands – defined actions that carry our various operations in the editor.

We can easily run a command with the Command Palette, which we can access with these keyboard shortcuts:

  • Windows / LinuxCtrl + Shit + P
  • Mac: Command + Shift + P

Reveal current file in Explorer with active editor context menu

You can also reveal the current file in the VS Code Explorer sidebar with the Reveal in Explorer View option in the context menu that shows up when you right-click the filename at the top.

Reveal the current file with the VS Code active editor context menu.

This item is also there in the context menu that shows when you right-click the file in the Source Control view.

This Reveal in Explorer View item is in the Source Control view context menu.

Reveal current file in Windows File Explorer / Mac Finder

To reveal the current file in your operating system’s file manager, use the Reveal in File Explorer command, accessible from the Command Palette.

The Reveal in File Explorer command in VS Code.

By the way, if you’re on Windows 11 and you’re dealing with File Explorer clutter, this tiny utility called WinENFET can help, by automatically opening File Explorer in a new tab, instead of a new window.

Why is it useful to reveal the current file in File Explorer/Finder?

When managing a project that includes many files and folders, it can occasionally become difficult to recall the precise location of a particular file. By displaying the current file in your operating system’s file manager, you can swiftly identify the file’s place within the project hierarchy.

This is useful for several reasons:

  1. Context: Helps you understand and navigate your project’s larger file hierarchy. This is especially helpful in large projects with complex file structures.
  2. External operations: You can perform actions not available in VS Code, like viewing file properties (creation date, size, etc.) or file permissions.
  3. Data transfer: Allows you to quickly locate the path for file transfers. If you need to send the file as an email attachment or upload it to a server, you can quickly find it in the operating system’s file manager.
  4. Easy access: If you’re working with a file in VS Code and you want to quickly open it in another application, revealing the file in the file manager makes this easy.
  5. Collaboration: If you’re working with a team, it’s easy to reveal the file in the file manager, zip it, and send it to team members as needed.

Use the Reveal in File Explorer command

To reveal the current file in your OS’s file manager in VS Code, run the Reveal in File Explorer command.

The Reveal in File Explorer command in VS Code.

In VS Code, we have commands: defined actions that carry out various operations in the editor.

We can easily run a command with the Command Palette, which we can access with these keyboard shortcuts:

  • Windows / Linux: Ctrl + Shit + P
  • Mac: Command + Shift + P

Reveal current file in File Explorer with active editor context menu

Alternatively, you can reveal the current file in your OS’s file manager with the Reveal in File Explorer option in the context menu that shows up when you right-click the filename at the top.

Revealing the current file in File Explorer/Finder from VS Code.

Set custom keyboard shortcuts for commands in VS Code

To set a custom keyboard shortcut for the Reveal in File Explorer or Reveal Active File in Explorer View command, change the keybinding for the command in the Keyboard Shortcuts page.

To get this page, you can click the Keyboard Shortcuts item on the Manage popup shown below or use the shortcut next to the text (Ctrl + K, Ctrl + S here).

Opening the Keyboard Shortcuts page from the Manage popup in VS Code.

Once you get there, search for the Reveal in File Explorer or Reveal Active File in Explorer View command in the search bar.

Searching for the Reveal in File Explorer keyboard shortcut.

Then double-click the command, type a new keyboard shortcut, and press the Enter key to carry out the change.

Changing the Reveal in File Explorer keyboard shortcut in VS Code.

Key takeaways

  • To reveal a file in the VS Code Explorer view, run the Reveal Active File in Explorer View command. You can do this with the Command Palette, or by setting a custom keyboard shortcut.
  • To reveal a file in your OS file manager (Windows File Explorer, Mac Finder, etc.), run the Reveal in File Explorer command. You can also do this with the Command Palette, or by setting a custom keyboard shortcut.
  • To set a keyboard shortcut for a command in VS Code, open the Keyboard Shortcuts page, select the command, type the new short, and confirm with Enter.

10 essential VS Code tips & tricks for greater productivity

73%.

Did you know that 73% of developers worldwide rely on the same code editor?

Yes, the 2023 Stack Overflow Developer Survey results are in, and yet again, Visual Studio Code was by far the most used development environment.

73% of
“Visual Studio Code remains the preferred IDE across all developers, increasing its use among those learning to code compared to professional developers”, survey.stackoverflow.co/2023

And we all know why: it’s awesome.

But are we fully exploring its potential? In this article, we unfold some compelling VS Code features that enhance productivity with local source control, animated typing, and rapid line deletion, amongst others. Let us start using them to achieve our coding goals faster than ever.

1. Timeline view: local source control

The Timeline view gives us local source control.

Many of us know how useful Git and other source control tools are, helping us easily track file changes and revert back to a previous point when needed.

So the Timeline view in VS Code provides an automatically updated timeline of important events related to a file, such as Git commits, file saves, and test runs.

The Visual Studio Code Timeline view is available by default in the Explorer pane.

Expand this view to see a list of snapshot of events related to the current file. Here it’s file saves, but also Git commits where the file was staged.

The Timeline view shows a list of snapshot of events related to the current file.

Hover over the snapshot item to view the date and time when VS Code made the snapshot.

Hover over the snapshot item to view the date and time when VS Code made the snapshot.

Select a snapshot item to see a diff view showing the changes between the file at the snapshot time and the file presently.

Select a snapshot item to see a diff view showing the changes between the file at the snapshot time and the file presently.

2. Autosave: no more Ctrl + S

Can you count how many times you’ve used this shortcut? You probably do it unconsciously now.

The Autosave feature automatically saves files as we work on them, removing the need for manual saving. With autosave, we eliminate Ctrl + S fatigue, save time, and gain certainty of always working with the latest changes to the files.

It’s not perfect though, and it’s up to you to weigh the pros and cons – which we comprehensively cover here.

Visual Studio Code without autosave.
No autosave.
Visual Studio Code with autosave.
Autosave enabled – the unsaved indicator no longer shows.

Use File > Auto Save to enable the feature easily.

File > Autosave enables autosave in VS Code.

3. Do anything with Command Palette

Almost anything you do in VS Code apart from typing is a “Command”.

Commands let us accomplish tasks within the editor, and they include file-related commands, navigation commands, editing commands, and terminal commands, each optimally designed to enhance different aspects of your editing experience.

So with Command Palette we simply search for a command and select to perform the associated action.

To open the Command Palette, use this keyboard shortcut:

  • Windows/Linux: Ctrl + Shift + P
  • Mac: Shift + Command+ P
The VS Code Command Palette.

As you guessed correctly, those keyboard shortcuts to the right are a faster way to run the commands with the keyboard.

The key benefit of the Command Palette over shortcuts is when there’s a command without a shortcut, or you’re looking for a command you’re not sure exists.

4. Go to file quickly

The mouse is too slow.

Yes, you can click on the file in the Explorer pane, but for a much faster alternative use Ctrl + P to search for and open a specific file in your project.

Use Ctrl + P to search for an open a specific file in a VS Code project.

Hold Ctrl and press Tab to cycle through the list of files currently open in an editor instance.

Hold Ctrl and press Tab to cycle through the list of files currently open in an editor instance.

You can even use Alt + Left and Alt + Right to quickly navigate between these open files.

All these are much faster ways to get to a file than using the cursor.

5. Go to line quickly

Jump, don’t scroll.

Quickly navigating to a line is invaluable during debugging when you need to encounter errors at specific line numbers. By jumping to those lines, you can examine the code in that particular context, evaluate variables, and troubleshoot the issue.

Use the Ctrl + G keyboard shortcut for this.

Use the Ctrl + G keyboard shortcut to quickly navigate to a particular line in Visual Studio Code.

6. Delete line quickly

You’ve got to the line now, what if you want to delete it?

Will you drag and drag to highlight and then press Delete? Will you tirelessly press Backspace until every character is gone?

Or, will you use the Ctrl + Shift + K shortcut to rapidly delete that and dozens more lines in a matter of seconds?

Use the Ctrl + Shift + K keyboard shortcut to quickly delete a line.

7. Enjoy typing with smooth cursor

VS Code has this smooth cursor feature that animates the cursor as it moves, like in MS Word. This makes typing feel more fluid and polished, as well as giving us a smoother and more natural feel as we navigate through the lines of code and place the cursor at different points.

Smooth scrolling in Visual Studio Code.

To turn it on, opens Settings UI in the Command Palette and search for “smoot caret”.

We are looking for Editor: Cursor Smooth Caret Animation setting, which has 3 possible options:

The "Editor: Cursor Smooth Caret Animation" setting enables smooth caret animation in Visual Studio Code.
  1. off: No smooth cursor animation
  2. explicit: Only animates the cursor when we explicitly place it somewhere in the code.
  3. on: Smooth cursor animation is always enabled – including when typing.

Set it to on to get the full visual experience.

8. Format code rapidly

Formatting is all about improving code readability by organizing it in a structured and consistent manner.

And if you’ve been doing this manually, you need to know that there’s a better way.

Yes, you need to start formatting code automatically with the Format Document command, easily accessible in the Command Palette. Depending on the current file’s language, a particular “default” formatter will be used to format the code using various rules of indentation, line length, braces and brackets, etc.

The "Format Document" command in the VS Code Command Palette.

While there’s a pretty decent built-in JS/TS formatter, for a more robust solution, I highly recommend the Prettier extension.

Format On Save in action in Visual Studio Code.
The Prettier formatter for VS Code.

After installing, you’ll set it as your default formatter.

When you use manual over autosave, there’s a feature you should enable to make formatting a bit easier:

Enabling the "Editor: Format On Save" setting in VS Code.
  • Editor: Format On Save: “Format a file on save. A formatter must be available, the file must not be saved after delay, and the editor must be shutting down”. It is disabled by default.

So with this setting on, VS Code will automatically format your code with the current default formatter when you save the file with Ctrl + S, as you saw in the above demo.

Format On Save in action in Visual Studio Code.

When you do autosave, it can get tedious to continuously open the Command Palette when you’re formatting every now and then. And that’s what keyboard shortcuts are for:

  • Windows: Shift + Alt + F
  • Mac: Shift + Option + F
  • Linux: Ctrl + Shift + I

I’m on Windows and personally, I don’t like this default keyboard shortcut; autosave makes me format every now and then, and Shift + Alt + F got agonizing after a while.

So I changed it to Ctrl + D, Ctrl + D – a keyboard shortcut chord that’s much easier to press and remember, and has no conflicting keybinding. I recommend you do the same.

9. Save time with multi-cursor editing

One of the wow moments in my earliest VS Code days, the multi-cursor editing lets you place multiple cursors at different points, and delete or insert the same text multiple times. This speeds up editing time and boosts productivity greatly, as we get repetitive tasks done efficiently with rapid code creation.

Of course, when editing, there’s always at least one cursor. Use Alt + Click to add more.

Add multiple cursors with Alt + Click in VS Code.

You can also easily add a cursor directly above or below the current line, with Ctrl + Alt + Down or Ctrl + Alt + Up.

Add a cursor below in Visual Studio Code with the Ctrl + Alt + Down keyboard shortcut.

These shortcuts call the Add Cursor Below and Add Cursor Above commands respectively.

10. Create new folder / file quickly

There’s no serious project where we don’t create new folders and files, and if there was a way to accelerate file/folder creation, all the time saved would add up to give us a significant productivity enhancement.

If you’ve been creating new files and folders in VS Code with the new file and new folder button, then yes, there is a way.

Creating a new file/folder in VS Code with the buttons take time.
Yeah, don’t do this.

Instead of constantly moving your mouse to locate those small buttons, did you know you can just double-click on the Explorer panel to create a new file?

Double-clicking to create a new file in Visual Studio Code.

How about a new folder? Well, folders are nothing without files, and when you’re creating a new file, you can easily use the / character to indicate a hierarchy and create new folders and sub-folders to contain that file.

Using the forward-slash (/) to indicate a hierarchy and create new folders and sub-folders to contain that file
The utils folder is created to contain index.js.

It would be even more efficient to use keyboard shortcuts, which is what I did.

As a former Atom fan, I had quickly gotten used to the A and Shift + A shortcuts for creating new files and folder respectively; I knew what I had to do.

Creating a new file/folder in VS Code with keyboard shortcuts.
Create shortcuts to create a new file/folder in VS Code.

Since A and Shift + A are obviously keys used to code, I included the when values here to make sure they only create a new file/folder when the Explorer pane has focus and there’s no active cursor in the current editor.

So to use these shortcuts when typing, you’ll have to focus on the explorer pane first; click on it, or use Ctrl/Command + Shift + E.

Key takeaways

  • Enable local source control with Timeline view; available in Explorer pane by default.
  • Autosave files with File > Autosave.
  • Run commands in Command Palette with Ctrl + Shift + P or Shift + Command + P.
  • Go to a file with Ctrl + P, navigate between open files with Alt + Left/Right or Ctrl + Tab.
  • Go to a line with Ctrl + G.
  • Delete a line with Ctrl + Shift + K
  • Enable smooth typing with Editor: Cursor Smooth Caret Animation setting.
  • Format code with Format Document command, use Prettier, change shortcut to Ctrl + D, Ctrl + D
  • Use multiple cursors at once with Alt + Click, Ctrl + Alt + Up/Down adds one above/below
  • Move a line up or down with Alt/Option + Up/Down in Windows/Mac
  • Create a new file by double-clicking the Explorer pane or set a custom keyboard shortcut. Create a new file in a new folder with “folder/file.ext

Check out the VS Code Key Bindings docs to learn more about keyboard shortcuts and how to customize them. It includes a complete list of all the default VS Code shortcuts in your operating system.

Final thoughts

Visual Studio Code is more than just a text editor—it’s a powerful tool that, when mastered, can significantly boost your productivity and streamline your coding workflow. The ten tips and tricks we’ve explored are just the tip of the iceberg. As you continue to navigate through VS Code, you will discover a myriad of other features and shortcuts that will further enhance your coding experience. So, keep exploring, keep learning, and remember: the key to efficient coding lies not just in the code itself, but also in the tools you use to write it.