Skip to content

Instantly share code, notes, and snippets.

@cowboy
Created May 3, 2012 19:18
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save cowboy/2588448 to your computer and use it in GitHub Desktop.
Save cowboy/2588448 to your computer and use it in GitHub Desktop.
JavaScript: tab indents
// Coders, if your goal is to align foo and bar, using a <tab> character is
// incorrect. If your goal, however, is to create an additional level of
// indentation, then go you. Either way, with a tab size other than 4, this
// looks like shit.
var foo = 1,
bar = 2;
Copy link

ghost commented May 4, 2012

David Desandro wrote a nice post explaining why he uses multiple vars.

http://dropshado.ws/post/17210606192/varry-var-var

"At first I gawked at this style, but after using it for two months, I’m sticking with it. Using multiple vars have a couple benefits:

Easier to add more variables, no need to change any trailing comma or semi-colon.
Eliminates unnecessary git commit diffs, where a line has changed only because you changed a trailing semi-colon or comma.
Easier to read (IMO). var is a reserved keyword, so it jumps out when syntax highlighted.
Eliminates awkward tab spacing underneath the var. It only lines up if your tabs are 4 spaces wide.
[Per JFSIII] Helps collaboration, other devs might miss the change of semi-colon and accidentally add a global variable.

If you’re worried about bloating your code with all the superfluous vars, that should be taken care of when using a proper minifier."

Copy link

ghost commented May 4, 2012

I, personally, go with Desandro on this. After all, it's only a preference, not a coding convention.

I think people are forgetting that a preference differs slightly than a convention, in that you're adopting your own style, not a codified "way" of doing things.

Google for "coding conventions javascript" and you'll see many codified ways of writing JS.

@ajpiano
Copy link

ajpiano commented May 4, 2012

i recently just tried doing:

var
foo = "bar",
baz = {
  bat: "bam"
},
etc = [ "etc" ];

i'm not sure how i feel about it.

@rwaldron
Copy link

rwaldron commented May 4, 2012

// Initialize program vars
var foo, baz, etc;

// Some useful comment
foo = "bar";

// Another useful comment
baz = {
  bat: "bam" + foo
};

// Moar useful
etc = [ "etc" ];

@cowboy
Copy link
Author

cowboy commented May 4, 2012

I wish I could lock gist comments.

@alejandroiglesias
Copy link

First semi-colons, now tabs or spaces... Are these the meaningful topics to discuss? What a community we have JS people...

@kflorence
Copy link

Every topic is meaningful.

@beaucharman
Copy link

I know this is a year old now, but I still find this topic very interesting. I kind of like the stack way of declaring variables if you must comma separate a group of variable declarations, such as:

var
foo = 'bar',
baz = 'qux';

This way, indentation dosen't matter, and there is kind of a visual hierarchy which is important (The var acts as a heading, giving purpose to the following lines).

On the other hand, with the more common comma separated declaration, just one var is visually flagged as a newly declared variable, and the others could look like they may have been previously declared... until you notice that there is a , there, not a ;

Why not just take the ambiguity away? Just add a 'var' keyword to purposely identify each new variable declaration. Superfluous? No. Considerate, good for readability, future proofing and collaboration. Yes.

var foo = 'bar';
var baz = 'qux';

It's just not that bad.

@valtih1978
Copy link

To everybody who writes “mixing spaces with tabs is evil” and "tabs are semantic, spaces are presentation" to fix that. At first, using both does create the mixture, "which is evil". Secondly, you, as big experts in presentation, tell me: isn't HTML a special presentational format? How do you use spaces for indentation in HTML? What?

Spaces are for (inter-word) spaces, tabs are for indentation. As of github, it has a perfect solution to "set the tab size". It just stops to work outside the Ace editor, http://stackoverflow.com/questions/8833953/how-to-change-tab-size-on-github. The solution is to save the option along with edited post.

The same answer in StackExchange http://programmers.stackexchange.com/a/72/63834. These are you, spaces people, who confuse presentation with data and create chaos.

@valtih1978
Copy link

BTW, I have made a tabs <-> spaces conversion utility, http://valjok.blogspot.com/2014/07/indentation-correction-for-exposing.html. I was forced to create it intentionally for gist formatting.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment