DEV Community

Jesse M. Holmes
Jesse M. Holmes

Posted on

4 Spaces or 2?

Let's pretend we aren't going to argue Tabs vs. Spaces. Is 4 spaces really more legible than 2 spaces? It seems to be the default everywhere I look, and I suspect it has to do with Tab size.

I've always preferred two spaces.

Top comments (41)

Collapse
 
avalander profile image
Avalander • Edited

I prefer 4 spaces because they take up more screen space, which means that I can fit fewer indentation levels before it starts to feel uncomfortable, so in general it means that I start addressing some potential spaghetti code issues earlier.

(although tabs are better because anybody can configure their editor to show as many or as few spaces as they want to, I had to say it)

Collapse
 
mortoray profile image
edA‑qa mort‑ora‑y

The argument about "how many spaces" is really an argument in favour of tabs.

It goes beyond how many as well, since the moment you use spaces, you start having people align code with them as well. :/

Collapse
 
sifatul_rabbi profile image
Sifatul Rabbi

@avalander
You can use prettier cli to format the files. Install prettier dependency and add this script in package.json of any javascript/typescript projects
{
"scripts" : {
"format:two": "prettier --tab-width 2 --write \"src//*.ts\" \"test//.ts\",
"format:four": "prettier --tab-width 2 --write \"src/
/.ts\" \"test/*/.ts\"
}
}

then run:
$ npm run format:two
or
$ yarn run format:two

for more info you can checkout prettier official website

Collapse
 
nektro profile image
Meghan (she/her)

vs code can auto format an entire file to use the number of spaces one desires, and always uses spaces

Thread Thread
 
avalander profile image
Avalander

Yeah but at my work we use two spaces, can I configure vscode to display four spaces but actually save the file with two?

Thread Thread
 
nektro profile image
Meghan (she/her)

not that I'm aware of. you'd just have to change it before you commit

Thread Thread
 
mortoray profile image
edA‑qa mort‑ora‑y

Auto-formatting causes trouble with source control. You end up having large patch-sets than desired. It can be hard to locate what was actually changed in a file.

Collapse
 
sudiukil profile image
Quentin Sonrel

Fibonacci Indentation or nothing.

Collapse
 
kriyeng profile image
David Ibáñez

I'd vote for inverted Fibonacci Identation! 😂

Collapse
 
link2twenty profile image
Andrew Bone

That's amazing!

Collapse
 
joelnet profile image
JavaScript Joel

We will argue 4 vs 2 spaces until we are blue in the face. God forbid someone to suggest a compromise of 3 spaces, for they will be murdered before they finish their sentence.

3 spaces is the most logical compromise. But because humans are illogical, we'll never see a 3 spaced code file.

Collapse
 
avalander profile image
Avalander

I bet you set the TV volume to odd numbers.

Collapse
 
joelnet profile image
JavaScript Joel

I use the Fibonacci sequence to set my volume.

Collapse
 
link2twenty profile image
Andrew Bone

I think you'll find the volume should be changed in increments of 5... 😉

Thread Thread
 
threedogs1 profile image
Three Dogs

The reason volume is adjusted in increments of 3dB is bc changes less than 3dB are imperceptible to the human ear.

Collapse
 
nektro profile image
Meghan (she/her)

how dare you suggest we do something that is not a multiple of 2?? /s

Collapse
 
devhead profile image
dev-head

we tried that at a previous gig; made everyone unhappy and uncomfortable. if it's code, IMHO, it's a tab (4 spaces!); if it's markup or documentation or config, two is perfect.

Collapse
 
jsbeckr profile image
Jens Becker

3 spaces

const test = () => {
   console.log("three is the best");
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
binarypatrick profile image
BinaryPatrick

Monster

Collapse
 
wolfhoundjesse profile image
Jesse M. Holmes

You rebel.

Collapse
 
ozzythegiant profile image
Oziel Perez

This one, officer, right here

Collapse
 
goyo profile image
Grzegorz Ziemonski

Tabs, people, use tabs. Then you can choose however many spaces you wish.

Collapse
 
wolfhoundjesse profile image
Jesse M. Holmes • Edited

I started contributing to a project last night, and after asking this question an issue appeared a few hours ago that is pretty relative to your point!

Tabs are breaking YAML

Collapse
 
mortoray profile image
edA‑qa mort‑ora‑y

This is unfortunate that YAML chose not to accept tabs. There's no practical reason not to allow it.

Collapse
 
wolfhoundjesse profile image
Jesse M. Holmes

In VSCode there are options like setting the tabs equal to a number of spaces, or you can even have tab insert spaces, I believe.

In other words, I’m not sure what you mean. 😂

Collapse
 
avalander profile image
Avalander

If the line starts with the tab character, I can configure VS Code to show it as either two or four (or any other number) spaces, so the same code can have different indentation space in your machine than in mine.

If I configure VS Code to set two spaces every time I press tab, it is unfortunately not possible for somebody who prefers four spaces indentation to visualise the code that way.

Thread Thread
 
wolfhoundjesse profile image
Jesse M. Holmes

This is the first time any part of this discussion has made sense to me. 🤩

Collapse
 
nektro profile image
Meghan (she/her)

or use vs code and still be able to pick the number of spaces you want

Collapse
 
terabytetiger profile image
Tyler V. (he/him)

My preference for 4 spaces comes from starting out with Python.

Since starting to use Prettier in VS Code, I've been having issues with the setting being changed to 4 spaces in the interaction with the Rainbow Indent extension, and as such have been moving to using 2 space instead.

I don't think either is "more readable" than the other. When there's a bunch of indent widths, even the rainbow indent/bracket colorizer isn't enough to stop me from needing to use my finger/piece of paper to figure out where the matching curly brace is/should be.

Collapse
 
elanid profile image
Daniel J Dominguez • Edited

8

I used to prefer 4, but I figured, if I find myself indenting too much, then it should probably be refactored. Sort of learned about this by reading about the Linux style guide.

Collapse
 
qm3ster profile image
Mihail Malo

Am I the only person that Bracket Pair Colorizer just annoys and distracts?
I'm not sure if I should set violent colors or something, but any time I try it it only harms me.
I just have "editor.renderWhitespace": "boundary" and the default indent guides and it seems enough for me.
Ditto for Indenticator and indent-rainbow.
indent-rainbow also doesn't autodetect the tab settings, which are a builtin VSCode thing, why this :v

Collapse
 
vergeev profile image
Pavel Vergeev

I use 4 for Python code (it's PEP8) and 2 for html/css/js.

Collapse
 
curtisfenner profile image
Curtis Fenner

I prefer four because its much easier to quickly scan for what braces match and where blocks end and begin.

Deeply nested code is usually to be avoided, so I don't miss the space is takes up.