VS Code: Tabs Vs Spaces – How To Change Indentation

The debate over whether to use a tab or a space for indention has been long-running for many years in the programming community.

This is one of the most trivial areas of coding that people argue over, often bringing up very nitty, and picky points as a point of reasoning.

I use tabs for indentation myself, originally because that was what our senior developers used at my first software job, and to this very day for various reasons, most of which are logical and mathematical in nature.

In this article, I will outline these reasons and shed light on this topic.

Code Indentation (Tabs Vs Spaces)

We indent source code to make it more readable for humans, and for no other reason. This is fundamentally no different than indenting a list on a page in an old-school textbook or other document, for which the tab key was developed and included in every major typewriter design in history.

The spacebar key, on the other hand, was not developed for the purpose of indenting content on a page, but for separating words in a sentence.

So, when we inspect the tab versus the space when it comes to typing content in a readable fashion, the tab wins by virtue of having been designed for the specific purpose of indenting text in order to make it more readable.

So now that we have examined the true purpose behind each character and reached the conclusion that the tab exists for the sole purpose of indenting content while the space does not.

Now let’s examine the efficiency of using each.

Efficiency (Tabs Vs Spaces)

There is an unspoken concept among many senior developers who grew up in the 80’s and 90’s with limited tech resources, that many programmers today have a bad habit of taking for granted the kind of power and bandwidth that are available to the modern software developer.

While it’s a good thing that we have the kind of resources we have today on modern client, server, and networking machines, it’s still a bad habit to assume that raw power will make up for a lack of efficiency on the part of the developer.

While the machine doesn’t actually care if you use tabs or spaces but remember the size of your source code will increase by the use of spaces over tabs, especially if you indent by four spaces.

If you are five levels deep in a nested function and you are indenting an expression like String str = '' with 20 spaces, that line of source code contains more indentation characters than it does code, which is truly absurd by any standard.

Multiply that by hundreds (or thousands) of files, with hundreds of lines of code each, and you are going to have MBs upon MBs of spaces everywhere.

The one real reason to use tabs over spaces

On Reddit Chase explains his own experience of using spaces at his workplace, and the negative effects it had on co-workers with visual impairment.

One of his co-workers uses a tab-width of 1, to avoid huge indentations when using a large font-size.

Another co-worked of his is using a tab-width of 8 because that works best for his situation with a wide monitor.

By using tabs in our projects, we allow these kinds of customizations that are essential for people with visual impairment. Custom tab-widths might seem like an unnecessary thing to most, but some people rely on it—and we can not ignore that.

In other words, there’s just no counter-argument that even comes close to outweighing the accessibility needs of valued coworkers.

How Do I Change the Tab Spacing in VS Code?

Step 1: Open VS Code and go to File > Preferences > Settings or use shortcut: CTRL + ,.

Step 2: Under the user section replace the default tab size number with your preferred one. I am using 2 as my tab size.

Step 3: Do repeat the same process for workspace section.

Step 4: Also, untick detect indentation option on both user and workspace.

Your setting will be applied and reflected immediately. If this doesn’t happen just reload or restart your VS Code.

If using Prettier?

If you are using prettier, things may be different again, prettier has 2 level of setting for this:

• User level, which you can click the extension and click setting find the keyword tabWidth
• Project level, which you can add/update from the root project level in file .prettierrc

Or try adding this to the settings.json file.

"prettier.tabWidth": 2,
"prettier.useTabs": true  

Multiple Language Specific Editor Settings

Is there a way to change tab size per language in VS Code? e.g. when editing multiple files with different languages in the same Workspace (e.g. Ruby, JavaScript, CSS, etc.)

Open settings.json (Left-bottom gear > Settings > top right Open Settings.

Then set tab size as per your need, following is an example:

"[ruby][html]": {
    "editor.insertSpaces": true,
    "editor.tabSize": 2
},
"[csharp][typescript]": {
    "editor.insertSpaces": true,
    "editor.tabSize": 4
},

If using EditorConfig?

We can control tab size by file type with EditorConfig and its EditorConfig for VS Code extension.

We then can make Alt + Shift + F (format code shortcut) specific to each file type.

EditorConfig overrides whatever settings.json configures for the editor. So there is no need to change editor.detectIndentation.

Conclusion – Accessible first, personal preference second

So, at the end of the day, tabs versus spaces is truly a matter of preference, however the tab is still the character specifically designed for indentation, and using one tab character per indentation level instead of 2 or 4 spaces will use less disk space / memory / compiler resources and the like.

Also, by defaulting to tabs, we make sure that everyone has a great experience working together with others, no matter their own abilities.

Thankfully I use tabs. As usual, let me know your views in the comments below! Happy coding folks!

Reference

• How can I customize the tab-to-space conversion factor?
• Setting tab size/ space size as default in VS Code
• Is there a format code shortcut for Visual Studio?
• Options text editor all languages tabs

Similar articles you may like

• How to Use Flaticon as Font Icon
• How to copy any website using HTTrack
• Best VS Code Shortcuts for Faster Programming
• What is Emmet? How to Use Emmet in VS Code for Faster Web Development