vscode

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:

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.

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.

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).

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.

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.

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:

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.

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

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.

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 have been added as built-in VSCode features. Remove them to reduce the bloat and increase the efficiency of Visual Studio Code.

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?

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:

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.

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:

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:

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.

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.

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.

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.

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.

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.

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.

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.

Stop autosaving your code

Use File > Auto Save to enable the feature easily.

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

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.

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.

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?

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 typing in VS Code! 💡

Enhance your typing experience with this delightful cursor animation 😊

No extensions needed…

Here's how you enable it 👇🧵 pic.twitter.com/z7v4HQZYXk

— Coding Beauty (@codingbeautydev) June 5, 2023

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:

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.

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

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:

• 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.

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.

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

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.

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?

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.

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.

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.