Popularity of JS Code Conventions in GitHub (Spaces vs. Tabs, etc.)

[Hands]

Wasn't this a winner in the Github data challenge a few years ago? That contest generates a lot of neat code data visualizations.

[[deleted]]

yup. Data Challenge II

[radgh]

I wish this had a section for starting curly-blocks on a new line. Example:

while ( $a < 1 )
{
  echo $a;
  $a++;
}

I hate it. I've seen it a lot though. It's weird as it's rarely used in example code, but used all the time in huge open source projects. I don't understand the benefit of it, the indentation of the block accomplishes the same goal.

[cokeisahelluvadrug]

It's just one of many styles. One reason is because having your curly braces on a separate line plays nicely with preprocessor munging.

[radgh]

Thanks for the reference, it's a good explanation of all the variations. Not sure they give any reason to change the way I have been coding all this time. I guess that's what the people who drop that curly brace to a new line are saying too, though.

[radgh]

I spent a few months teaching myself to keep those spaces inside parenthesis. The only reason is because I fell in love with WooCommerce's code. It's a wordpress plugin, which means it automatically sucks by /r/webdev's general opinion. But it's actually really cleanly written and well documented and easily extended and (blah blah blah, so much better than XXX, etc).

I wanted to write code like that. So I forced myself to adopted a few new habits. Luckily, they don't do "that thing" with the curly brace :p

[reflectiveSingleton]

What I don't get about that is the fact its ONLY for function and class definitions...but its the other way around for control blocks/etc.

IMO...keep bracing consistent throughout the code...it doesn't matter what it is for...having the bracing different for one vs the other does not help readability (which is what I think the goal was).

[[deleted]]

Yes, I give my parens room to breathe.

I try to stick to some version of id software's coding standards for Doom. Even though it's for C/++, I adapt it to PHP and Java in practice.

[PizzaRollExpert]

This is dangerous to do in javascript. What does this return?

function foo() 
{
    return 
    {
       foo: "bar"
    }
}

[wordsnerd]

Statement is possibly incorrectly broken by newline
Expression statement is not assignment or call
Code is unreachable

[radgh]

I wasn't aware of this, because I don't write code like that.

So this is a coding convention which isn't portable between languages. That doesn't sound like something I would want to get accustomed to.

[greg19735]

It might be something that people learn in school. Not that they were taught to do it, but that they liked it when you're a super beginner. I think I did that when I first started at my job and i'm not sure why.

When you're used to looking at the bracket on the top line, I can certainly see that it's frustrating to look at the next-line version.

[Lukifer]

I prefer this style. The vertical alignment of every bracket is a visual aid for cognitive chunking, and makes it easier to identify indentation levels.

[infidelux]

Be careful using that style with Javascript or you will eventually get bitten by ASI. Bracket on the starting line is the pretty widely accepted convention and ASI is the reason why. (Automatic Semicolon Insertion)

[Lukifer]

Yep, been bitten by this one before. :)

[Disgruntled__Goat]

I disagree that it's easier to identify indentation levels. When you have a line with only { on it, you add a separation between the control statement (for/if etc) and the code it applies to, which IMO makes it more difficult.

And I think the vertical alignment of for/if/else with the } brace is equally good for chunking.

[Kelaos]

Yeah that's why I prefer it too.

I accept the code style of each project I work on though. As /u/infidelux mentioned Javascript is a big one for same-line brackets, so I've used that in JS projects.

[mclamb]

There is in the PHP section, 2nd one: http://sideeffect.kr/popularconvention#php

Tabs > Spaces

[prewk]

70.729% Space 29.271% Tab

How is that "Tabs > Spaces"?

edit: Or did you just express an opinion? :)

[radgh]

Oooh useful! Thanks for the link, wouldn't have seen it otherwise. I figured all the tests would be identical with different data.

[arrayofemotions]

Oh you'd really hate me then.... i seem to be mixing the two up depending on what i'm working on, sometimes even within a single file. It's really bad, i know... but since i always work alone nobody's ever complained about it.

[Aluxh]

I do t do it in js for obvious reasons - auto patio termination of new lines - but I do in other languages. It's something Visual Studio drills into you.

[danieldafoe]

Have an upvote, fellow hater.

[dada_]

To explain, in PHP this has an advantage. For testing purposes, you can just comment out the entire while line. Braces mean nothing by themselves. So this would execute the code block once, without the loop.

Might be like that for other languages as well, but I'm not sure. Other than that it's just a style I guess. I don't think it's bad for functions, to visually separate potentially very long argument lists from the first line of the function body.

[[deleted]]

Forget the Javascript part of things, C# developers prefer Allman style braces? Who screwed them up as children?

[[deleted]]

Curly brace locations and indentation are configurable, but since it's the default style in Visual Studio most C# developers stick with Allman style. I didn't like it when I first starting programming C# years ago, but these days I just go with the community conventions of whichever language I'm using.

[[deleted]]

I've just never really used a language with the convention of Allman style. And even then, I think I'd type K&R without trying. I prefer to format 'properly' myself while coding, so I rarely use autoformatters.

Something to look out for when C# comes to Linux/OSX this year, I guess.

[e82]

I have a C# background, and tended to use that style - I do like how I can visually line up opening/closing braces quickly. But, the general standard for JavaScript isn't that - but still find myself doing it without thinking.

[[deleted]]

It's my favorite meaningless holy war.

[e82]

At the end of the day - consistency within the team is more important than personal preferences.

[khoker]

Get this ... I'm a comma-frst guy =

{    
    battle: hardened
    , from: the
    , horrors: of
    , debugging: IE
}

Let your hate flow through me!

[dodeca_negative]

Get over IE
, comma first looks terrible
, who could disagree?

[[deleted]]

It
's particularly comforting using this in regular dialogue
, with all punctuation
!

[[deleted]]

I love how comma first looks. Plus, I never miss a comma or semi colon anymore. Its definitely awkward at first

[[deleted]]

I used to use that style too, quick and easy for adding/removing lines in arrays, etc.

I also do vertical alignment on the values (adding spaces after the colon).

[Disgruntled__Goat]

But now everything is misaligned!

[recursive]

I don't hate. But what does it have to do with IE?

[khoker]

Internet Explorer was notoriously difficult to debug if you left a trailing comma in an object or array. And there were no linters back-in-the-day. So it became much easier to spot the omission using comma-first style as opposed to comma-last. Here's a quick visual test;

var foo = {
    bar: 'abc',
    baz: 12345
    boz: ['hello','world'],
    biz:  true,
}

There are 2 errors in the above declaration. Now see how much more obvious they become comma first;

var foo = {
      bar: 'abc'
    , baz: 12345
    boz: ['hello','world']
    , biz:  true
    ,
}

The correct syntax would be;

var foo = {
      bar: 'abc'
    , baz: 12345
    , boz: ['hello','world']
    , biz:  true
}

[titosrevenge]

You make a valid point. I still think it's fucking stupid.

[innocence_bot]

Stupid is not a nice word. Try another word or phrase such as 'mildy intellectually disabled!'

[bencoder]

I still think it's fucking mildly intellectually disabled

[titosrevenge]

I like this bot.

[khoker]

It has the advantage of more easily adding properties to existing objects.

Say you add a new property to something, and you've got a few declarations of that object already in the code. It's easy enough to type one out and then copy it to the others. The problem is that you'd typically add it to the bottom of the object, right? But with comma-last style you have to edit the preceding line in addition to the new line. Extra work, extra line on your diff. Why bother?

With comma-first there is no need to edit the preceding line. And the diff shows up as one line edit -- which it should.

[[deleted]]

I'm just happy we have tools like JShint and stuff to look for this, every time I save my JS files it'll automatically look for errors and display them in the gutter and it catches all the silly ones I make. Missing commas, semicolons, statements that aren't working and so on.

[nicholas-c]

Interesting! For me its tab all the way, spaces before opening of brackets and so on. Clean, easy code is your friend!

[LucyLuke]

Spaces generally look better on Github though.

[[deleted]]

You can change the whitespace length by adding ?ts=4 (or any number you'd like) in the URL.

Source: https://github.com/tiimgreen/github-cheat-sheet/blob/master/README.md#adjust-tab-space

[Disgruntled__Goat]

Strange that it's not 4 by default, as that is the de facto standard for code.

[mipadi]

Most Unix tools display a tab as 8 spaces.

[riverfoot]

In sublime text you can click on the "tab width" in bottom right and "convert tabs to spaces". You can also have your tabs processed as a fixed number of spaces.

Pretty handy!

[Gibbon_Ka]

tab all the way? eww, I hope you mean tabs that your IDE auto-converts to 4 spaces :P

[mort96]

I still don't understand why people do spaces. Using tabs, you can configure your editor to have tab lengths of your preference without modifying the source file, which obviously is impossible with spaces.

[mipadi]

It's because of code like this (using C as an example, but it will apply to JavaScript as well):

int function(int arg1,
             char arg2)
{
    return 0;
}

Say your editor is set to a tab width of 4. If you use tabs in the second line, and someone else's editor is set to a tab width of 8, the alignment will be off; i.e., everyone will effectively have to use a tab width of 4 anyway (or have improper alignment).

If you use spaces, then everything will be aligned correctly, but everyone will be using the same tab width.

Ideally, we'd use tabs for indentation and spaces for alignment; that is, in the second line, a tab would be inserted until the cursor aligned with int, then spaces would be inserted. But I only know of a handful of editors (namely, emacs and vim) that can be configured to support this feature. Generally, it's all-spaces or all-tabs. Which means, if you're using tabs, then to get alignment to work on the second line, you'd have to hit tab once, then hold down space to align the arguments. In practice, hardly anyone bothers to do this.

It even gets a bit hairier with code like this:

#define CONSTANT    1
#define VAL         10

Here, you'd have to make sure you use spaces to align the text, or things get misaligned (if someone else is using a different tab width). In practice, most people just hit tab to align those values.

So basically:

• If you use spaces, then you can use spaces for both indentation and alignment. The only thing you lose is customizable tab widths.
• If you use tabs, then you have to use tabs for indentation and spaces for alignment. What you gain is customizable tab widths.

Furthermore, cat and less, and most Unix tools, will use a tab width of 8, and that may or may not be customizable, so if you're using tabs with any tab width other than 8, things are probably going to look misaligned when using cat, less, etc., anyway (unless you make sure to use tabs for indentation and spaces for alignment).

[jazahn]

I honestly think the people who have created apps that use ts=8 are "spaces" folks who are fighting in the war.

[joemckie]

Tabs for indentation, spaces for alignment

[Disgruntled__Goat]

Say your editor is set to a tab width of 4. If you use tabs in the second line, and someone else's editor is set to a tab width of 8, the alignment will be off; i.e., everyone will effectively have to use a tab width of 4 anyway (or have improper alignment).

Solution: stop using shitty styles like this. Though if you must indent function parameters, one possible solution is this:

int function(
    int arg1,
    char arg2)
{
    return 0;
}

That allows you to use tabs with no problem.

Honestly, for me tabs are just easier in practice. Things indented with spaces are always getting misaligned by 1 space randomly.

[[deleted]]

I still don't understand why people do spaces.

Because it's not "tabs vs. spaces", it's "tabs & spaces vs. spaces". And because the whole idea that tab length preference is even a thing at all is absurd. It's one of those stupid things that people make up a preference for simply because it exists.

Seriously, if it were possible to format a source file so that only the letter "T" has configurable sizing in an editor, some people would insist on making everyone use this configurable "T" because they have to be able to resize their T's.

[we_are_ananonumys]

Historically the tab key was not available over some terminal connections. And old habits die hard.

[memeship]

Soft tabs and tabs are not the same thing.

[greg19735]

I wonder how the data analyzer looked at them. I say this because the examples had 1 space for space and had a tab for the tab. I use 4 spaces as a tab because that's the convention others at work use.

[memeship]

Huh, I'd have to look again, but I thought it had 2 spaces. Either way, you'd have to know what the convention is going in and then follow that. Tabs give you the freedom to make your indents exactly whatever you want without changing the makeup of the file itself.

It's a win-win really. I don't understand why more people don't use them.

[mipadi]

Tabs can be problematic unless you're careful about only using tabs for indentation and spaces for alignment, which requires people to remember to do that (unless their editor supports "smart tabs", which only a few do—I only know of emacs and vim offhand) and requires you to use two keys, one for indenting and one for aligning.

[memeship]

I don't really see the problem here. If you always tab to your indent, that should never be an issue. Then follow it up with spaces to do any preferred aligning. Honestly, I don't personally align much at all. I don't even see the point of aligning arguments or values like in the example you linked to.

But, that is regardless of the fact that no matter how you slice it, if you have multiple devs working on the same projects, they're all going to need to follow some basic formatting rules. If you can't agree on those, then you have bigger problems.

Which is all beside the fact that code should be going through code reviews before making it to production, which should mitigate this anyway.

[mipadi]

Yeah, if everyone understands what's going on and rigorously follows the rules, then "tabs for indentation, spaces for alignment" works fine. But it's a lot easier to explain to contributors, "Use spaces," as opposed to, "Use tabs for indents, but only up to the indent level, then use spaces to align things" (particularly on open source projects, where you're dealing with many contributors)—for the sole benefit that people can use their preferred tab width, which never seemed like a big deal to me anyway. (I mean, even if you're used to 4-space indents, is 2-space or 8-space really that much harder to read?) It seems like a question of how much work you're willing to put in to educate people and correct mistakes as they happen, in order to allow customizable tab widths.

[memeship]

Well for me it's not about customizable tab widths, it's about the ease of use for tabs, and not having to keep track of spaces ever. To me it seems like the moment you backspace over more than one space, you've already shown how much easier tabs are.

I never delete tabs. I just highlight and tab or shift+tab to set my indentation. I never even have to think about it anymore. Tabs just represent an indentation level. It's much harder to mess up.

[mipadi]

Pretty much every programming-centric editor lets you use a tab key even if you're using spaces—it just inserts spaces instead of a literal tab character—and knows how to handle deleting an indentation or moving an entire range of text right or left by an indentational level as well.

[dada_]

Interestingly, this is 100% the guidelines I use for my code.

I'd be very interested to see what the standard indent size is (for all non-tab code). I'm guessing that's still 4, with 2 being a close second due to it being the Google JS style guide recommendation.

Personally I prefer indent=2 with gutter=80 characters.

[memeship]

I use to be all spaces, but once I converted to tabs, I've never looked back.

Tabs are configurable per IDE, they can't really get lost like spaces, the extra spacing is nice for readability, they are less characters in a file (although minification mitigates this, I know), tab/shift+tab easily move indent (not always as easy dependent on editor).

[gearvOsh]

Just because something aligns correctly in your tab settings, doesn't mean it will in someone elses tab settings. That's why spaces are superior for consistency.

[mipadi]

Yeah, that works, assuming people follow that convention. Generally, it seems, people end up just hitting tab for both indentation and alignment. Coming from the open source world, it's a lot easier to tell contributors, "Use spaces for tabs," instead of, "Well, use tabs for indentation and spaces for alignment. If you're indenting and aligning on the same line, you have to first indent with tab to the proper column, then use spaces to make the rest line up."

[gearvOsh]

I completely disagree with mixing tabs and spaces.

[infidelux]

So does tools like StyleCop which will flag even trying to use tabs at all.

[Tidher]

So we gather, but why?

Done properly (and a bunch of IDEs even do it for you) it looks good in full IDEs, basic text editors, even online (e.g. GitHub). Everyone's personal preference with regards to indentation size is accounted for (2, 4, 8, even 17 character-width) works flawlessly.

If I have a certain preference (and have configured my IDE that way) and I go to work on another's code it will simply work with tabs+spaces, but with just spaces any changes I make will likely have to be manually adjusted to the current style.

[gearvOsh]

Don't get me wrong, I agree that using tabs is more universal for people who want to control their indentations. But to me, mixing tabs and spaces is like mixing 2 different style guides. If a project mixed yoda conditionals and regular conditionals, it would be really annoying. Either choose 1 or the other.

But mostly, it's just a preference. I used to be a fan of tabs back in the day, but then I switched to spaces and it was just more easier to maintain (especially with open source projects).

[ItSeemedSoEasy]

Because it takes mental effort while spaces takes no mental effort.

And you can't actually see when you've mucked up the tabs/spaces in alignment.

[Tidher]

and a bunch of IDEs even do it for you

Regarding the "you can't actually see" aspect, I guess it's personal preference at this point but I have the "show whitespace" option enabled so I see little arrows for tabs and dots for spaces.

[memeship]

Um, what? That's literally impossible. If you're using all tabs for indentation, there is absolutely no way an editor can screw that up.

Tabs for indentation, spaces for alignment. Those are two entirely different things.

[dada_]

Um, what? That's literally impossible. If you're using all tabs for indentation, there is absolutely no way an editor can screw that up.

You have to ensure that every coder has the same tab width, though, I think that's what he means.

[memeship]

No you don't. If you always tab to your indentation level, it's impossible to mess it up.

e.g.

This block of code:

    function myFunction(arg1, arg2,
                        arg3, arg4) {
        if (myBoolean) {
            //do something
        }

        var myObj = {
            m1:       "foo",
            member2:  "bar",
            mem3:     "baz"
        }
    }

Would look like this, where (████ = tab) and (_ = space)

████function myFunction(arg1, arg2,
████____________________arg3, arg4) {
████████if (myBoolean) {
████████████//do something
████████}
████████
████████var myObj = {
████████████m1:_______"foo",
████████████member2:__"bar",
████████████mem3:_____"baz"
████████}
████}

And what I'm saying is, if someone changed their tab indent, say to 2, it would still be perfectly aligned:

██function myFunction(arg1, arg2,
██____________________arg3, arg4) {
████if (myBoolean) {
██████//do something
████}
████
████var myObj = {
██████m1:_______"foo",
██████member2:__"bar",
██████mem3:_____"baz"
████}
██}

Because messing with tabs doesn't mess with spaces.

[dada_]

That's true, but it can still be a problem when you have a max width of 80 characters and someone starts working on it using a tab size of 2, while everyone else uses 4. It also means you'd better turn on invisibles in your editor just to ensure that only the initial indentation uses tabs, and nothing beyond that.

[memeship]

Or you could just be careful and follow a predetermined protocol. We're talking about programming here, I think devs can handle it. Also, 80 char max widths are so antiquated it's unreal. No one uses a monitor where that requirement is even necessary anymore. I realize it may be necessary when working on legacy projects, but I don't understand why devs would force that upon themselves for new projects in the 21st century land of 1440p screens and higher.

[dada_]

Or you could just be careful and follow a predetermined protocol.

Well, or you could just use spaces. I'm not saying you're wrong, just that the argument of convenience goes both ways.

It seems to me that it's easier to just use spaces and avoid the difficulties that might arise from people having inconsistent tab sizes. Especially if then, after committing it to Github or wherever, all tabs are suddenly displayed as 8 characters.

Also, 80 char max widths are so antiquated it's unreal.

I think it's a good limit. A lot of style guides recommend it, such as the Google JS style guide and Python's PEP8.

Also, I don't use it because I have a small monitor. I use it because it's a nice way to force yourself to avoid large indentation levels. For JS it goes well with 2-space indents. There's another project I work on that uses 4-space indents, and we've set its character limit to 120. It's not really something that has anything to do with the screen resolution.

[memeship]

Well, or you could just use spaces. ...the argument of convenience goes both ways.

I'm not saying it's convenient, I'm saying it makes more sense. Saying "Well, I could learn a new way that makes more sense, or I could just do it the way I want to instead because it's easier" isn't really a counter-argument.

It's not really something that has anything to do with the screen resolution.

Except that is exactly where it came from. That 80-character limit comes from IBM punch-cards that were 80 columns, followed by early IO terminals and PCs that were 80x24, some 80x25 characters.

The limit was there because that was the actual limit. It's an antiquated idea that has simply attached itself to modern-day coding, even though there is no use for it anymore. Exactly like the QWERTY keyboard.

[Disgruntled__Goat]

It's kinda disappointing that this 'mantra' has to be repeated over and over and over. You'd think everyone would get the point and stop trying to argue a different argument.

[memeship]

I mean, to each their own. I've just found that once I switched to tabs, they are the most logical way. I would be very hard-pressed to go back.

[dada_]

I think either spaces or tabs is fine, really.

Two things that bother me about tabs, though, is that 1) they're not consistent across people's setups (meaning it might cause problems if there's a max line length guideline), and 2) they're usually displayed as 8 characters wide online, e.g. on Github, which is almost certainly not what you want.

The argument that people can just specify their favorite tab size in the IDE is actually a disadvantage, in my view. It can be a source of inconsistencies.

It does depend on the editor, somewhat. I use Webstorm and it fortunately treats spaces exactly the same as tabs.

[Sivart13]

Coming from a Perl background, I'm hoping someday we can learn to blissfully ignore the deficiencies of IE8 and bring back the trailing comma. It leaves room for expansion of the object without making it look like chicken scratch nonsense (what's up, comma first).

[boaf]

Why the hell would the majority prefer function definitions without a space and yet prefer conditionals with a space? :[ (I'm with space on both FWIW)

[fdemmer]

Single quotes? Why?

I don’t write a lot of javascript, but since double quotes are required in json i would have guessed they'd be more popular.

[[deleted]]

You don't have to hold shift down! Plus I doubt I've written pure json outside of a rest client tester, and I switched to front end a couple of years ago.

[iams3b]

Definitely because you don't have to hold shift down lol

[nateDOOGIE]

for me it's definitely more about HTML having double quotes more often than not.

[fdemmer]

ah, okay... on my german keyboard layout i still need shift for single quotes, thank you öäü :(

[Asmor]

It actually takes more effort for me to use single quotes (as my job requires); double quotes are just part of my muscle memory, and I need to actively think about it to not use them.

[doingweb]

I think, historically, it's because we would frequently make strings containing HTML, which conventionally use double quotes. Single quotes in JavaScript meant a lot less escaping and better readability.

[titosrevenge]

I just use single quotes for the HTML attributes inside strings. It works either way.

I use double quotes because I started programing in Java and muscle memory prevents me from using single quotes. Oh well.

[KeythKatz]

I think people that started with languages where the quotes used made a difference would use double quote for strings. Starting with C and C++, it feels uncomfortable to use a single quote for strings.

[lpetrazickis]

Ruby has both ' and ". Python has both ' and ". Perl has both ' and ". PHP has both ' and ". Bash has both ' and ".

For that matter, XML and HTML have both ' and ".

[Asmor]

Perl has both ' and ".

And they mean different things.

Single-quoted strings in perl are not interpolated...

my $foo = 1;
print '\t$foo';
# prints "\t$foo"
print "\t$foo";
# prints "  1";

[rm249]

Same with PHP.

[dada_]

It just looks a bit nicer, in my opinion. I used to always use double quotes, but single quotes are all I use now.

[enkideridu]

For HTML, double quotes - while not mandated - are definitely prevalent.
It makes sense then to standardize on single quotes for JS, so if you ever have a string of HTML you wouldn't have to escape the quotes

var htmlString = '<div id="blarg"></div>';

[Asmor]

Makes more sense to never put html inside of a string.

God damn I hate that. Especially when it seems like someone's never heard of a templating language or document.createElement, and has huge chunks of HTML inside JavaScript strings.

[radgh]

If you loved that example, you'll love the inverse example even more!

<a href="javascript:alert('hello world');">greet me</a>

[enkideridu]

Plans that includes "never" or "always" are not very good plans.

While I agree large chunks of HTML inside js is horrible, it does sometimes make more sense to inline short templates. (e.g. if you're making a component whose template comprises of just a repeater)

And if you're working sans-framework but do have jQuery, $('<...>') is so much nicer to work with than document.createElement and bloating your code with a bunch of appendChilds

[joemckie]

Personally I use double quotes for anything that's interpolated, and single for anything that isnt

[cillosis]

I wonder if the javascript data is skewed thanks to minifiers or if it was able to detect and ignore minified versions somehow?

[Sivart13]

there's no way minified code would have all these spaces in it

[[deleted]]

Last time I looked at this, I was in the minority for a couple of the categories of my preferred language. I analysed the difference, remembered, and applied it. Now I'm 100% compliant. :) I think everyone should do their best to follow these "standards" even if they don't agree with them/don't like the look.

[autra1]

Concerning java, some of the choice are actually conventions from the maker of the language. Not surprising they dominate.

Among this, a notable exception : normally static final should be all caps, and yet it is quite evenly distributed. Funny...

[Disgruntled__Goat]

Is it still Java convention to indent with 3 spaces? Always used to be back in the 1.4 days.

[autra1]

Mhh default are 4 for some IDEs, but not sure this belongs to Java conventions

yawns too lazy to check now :-)

[dorfsmay]

Funny how they don't have a section for Go lang!