Five VS Code Defaults You Should Turn Off

Visual Studio Code (VS Code) is very popular and widely used, with plenty of configurable options. This article will explain five options you should disable to have a smoother work experience.

VS Code, also known as Visual Studio Code, is an open-source code editor. This means it’s free to use, customize, and recreate by developers. Developers use this code editor for writing, debugging, building, and running codes.

VS Code has some beneficial features, which are not limited to:

• Cross-Platform: If you’re a user of either Windows, macOS, or Linux, rest assured that you can use this code editor.
• Extensions Marketplace: There’s a section in this code editor where you can install as many extensions as you want, depending on the programming languages or frameworks you are using.
• Built-in Git Integration: VS Code has Git tools built right into the code editor, so you can easily track changes, commit code, push updates to a repository or clone projects from remote repositories, which you can do without leaving the editor.

Enable Wrap Tabs for a Cleaner Workspace

If you open more than five files in VS Code, you’ll notice that they line up in a single row by default, and you’ll have to scroll horizontally to see the other files. The files are that way because VS Code’s default wrap tabs setting is unchecked.

We are enabling the wrap tabs setting to know exactly which tab is open, especially if you work with many tabs, and also to give you a cleaner workspace. Another benefit of wrapping tabs is that developers who usually open multiple tabs at once will find it easy to see the tab they’re currently working with.

To enable wrap tabs, do the following:

1. Go to settings.
2. Search for ‘wrap tabs.’
3. Check the box.

Here is a demo that shows how multiple tabs are displayed in a single row and how they can be better organized.

From the demo, we can see that when we check the wrap tabs setting box, our multiple tabs will be wrapped into separate rows instead of a single row.

Turn off the Preview Editor for Persistent Tabs

When you open a new file, it is opened in preview mode, which means it is replaced when you click to open another file. So, if you do not want it to be opened in preview mode, double-click on the file. 

The default setting can be advantageous because it allows you to scan different files. While some developers might like to continue with this default setting, others might want to change it as it prevents confusion. For example, when you open a file to use, you might want to open another, not knowing the new file replaced the initial file you opened.

So, to avoid this confusion, we’ll change the default setting by: 

1. Going to settings.
2. Searching for ‘preview editor.’
3. Unchecking it.

Here is a demo that shows how to disable the preview editor.

From the demo, we can see that when a file is clicked, it is slant and in preview mode, but when the preview editor is unchecked in settings, the file is no longer in preview mode.

Disable Compact Folders for Better Folder Visibility

When creating a project, you might have noticed that when you have a folder without a file and another folder without a file, VS Code stacks them together on a single line. 

We will have to change that default setting because if you have, say, four folders stacked together in a single line and you want to move a file to the second folder, it doesn’t show you where to drop the file, and also, the UI can be very confusing.

To have a clear arrangement of these folders, do the following:

1. Go to settings.
2. Search for ‘compact folder.’
3. Uncheck it.

Here is a demo that shows how to uncheck the compact folder.

Here, we can see that we had two folders lined up on a single line. Immediately after unchecking the compact folder settings, those folders became separate and more arranged.

Shift the Primary Sidebar for Better Usability

Normally, by default, the primary sidebar, which shows the file explorer, search bar, extensions, settings, and so on, is on the left. Sometimes, we close it to give more room to code. When we do this, we notice our code view or workbench shifts to the left, but when the sidebar is open, the code view contracts. 

To avoid that, we should move the primary sidebar to the right so that, even if we close it, only the sidebar closes, and we won’t notice any shifting like we did when it was on the left side.

Here is a demo showing the sidebar’s default position and how the workbench responds when closed or open.

To move the sidebar to the right-hand side, right-click on it and click on the ‘move primary sidebar right’ option in the pop-up. Here’s a demo that shows the new position of the sidebar and how the workbench responds when it’s closed or open. 

From the demo, we can see that closing or opening the primary sidebar doesn’t affect the position of the workbench.

Turn Off MDN References for a Cleaner Interface

When you hover around a CSS code, it shows you more details about that code, like the syntax, browser compatibility, and the property explanation. You’ll also see the MDN reference, which details the property you hovered over. 

We need to disable the MDN reference because whenever we want to click outside the box showing details about the CSS code, we might end up clicking the MDN reference.

To disable the MDN reference, we can:

1. Go to settings.
2. Search for ‘hover reference.’
3. Uncheck it.

Here is a demo that shows how to disable the MDN reference from showing.

The demo shows that when we disable the MDN reference from showing by default, we no longer see it when we hover over a CSS code. This prevents us from navigating to a browser by mistake.

Conclusion

We’ve seen how changing the default settings of the discussed VS Code features can help create a cleaner workspace. By turning on wrap tabs, you can monitor multiple open files at once. Disabling the preview editor keeps your tabs open as you work, while turning off MDN references keeps your UI (user interface) well-arranged. We’ve also seen how moving the primary sidebar to the right-hand side prevents unwanted shifts in your workbench and how we disabled the compact folder feature to make the file structure clearer.

There are still many changes you can make to your code editor to make it easier to use, and I hope you explore them.

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.