Feature request: set JS output indentation to 2 in next major release

[mikemaccana]

Suggestion

Rather than make indention configurable per #4042 and #2768, this feature request is to change the default output of the TypeScript compiler to be 2 spaces, in the next major release.

• This is not asking for a configuration option per #\4042 and #\2768, and hence not a duplicate of that feature request or that PR. Rather it is asking for TS to have sensible defaults in its JavaScript output.
• People do occasionally need to look at TypeScript output hence TypeScript output should look like idiomatic JavaScript.
• 2 spaces is a sensible default for JavaScript output because:
  • 7 of the 8 most popular JavaScript style guides use 2 spaces. The jQuery guidelines use tabs:
    • Prettier

      tabWidth default is 2, useTabs default is false 2️⃣

    • StandardJS

      Use 2 spaces for indentation. 2️⃣

    • node style guide

      Use 2 spaces for indenting your code. 2️⃣

    • Idiomatic JS

      For readability, I always recommend setting your editor's indent size to two characters — this means two spaces or two spaces representing a real tab 2️⃣

    • AirBnB style guide

      19.1 Use soft tabs (space character) set to 2 spaces 2️⃣

    • MDN code style guide

      Mark indentation with 2 spaces. 2️⃣

    • Google JavaScript Style Guide

      Each time a new block or block-like construct is opened, the indent increases by two spaces. 2️⃣

    • jQuery

      Indentation with tabs.

  • All of the documentation for the well known APIs below:
    • Stripe 2️⃣
    • Twilio 2️⃣
    • Sendgrid 2️⃣ OK they're also owned by Twilio now.
    • Firebase 2️⃣
    • Mixpanel 2️⃣
    • Mailchimp 2️⃣
  • The vast majority of npm modules use 2 spaces. I can't find stats here but I'd be surprised if it was lower than 97%. Going through the npm js top 10, 7 of the top 10 use 2 spaces, 1 uses tabs, tslib and moment are the only projects that use four spaces.
    • Lodash 2️⃣
    • react 2️⃣
    • axios 2️⃣
    • tslib 4 spaces
    • chalk tabs
    • react-dom 2️⃣
    • commander 2️⃣
    • express 2️⃣
    • vue 2️⃣
    • moment 4 spaces
  • Well known JS playgrounds:
    • codepen - 'Save' -> 'Format code on Save' uses 2 spaces. 2️⃣
    • jsfiddle - 'Tidy' button uses 2 spaces. 2️⃣
    • jsbin - doesn't have a format button.

Summarizing the above, the other well known 4-space style guides, APIs and projects asides from TypeScript are:

• moment JS

This is the end of the list.

🔍 Search Terms

I searched for TS output indentation and came up with #4042 and #2768, which do not propose the same thing as this feature request, which is a sensible value in TS's output JS where 'sensible' is defined as looking like JavaScript.

✅ Viability Checklist

My suggestion meets these guidelines:

• [🤔] This wouldn't change input TS, but would change output JS. Not sure whether that's considered a breaking change, hence 'next major release'.
• [✅] This wouldn't change the runtime behavior of existing JavaScript code
• [✅] This could be implemented without emitting different JS based on the types of the expressions
• [✅] This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, new syntax sugar for JS, etc.)
• [✅✅✅✅✅] This feature would very much agree with the rest of TypeScript's Design Goals! Specifically "Emit clean, idiomatic, recognizable JavaScript code.". Right now the JS output by the TS compiler is not idiomatic or recognisable.

⭐ Suggestion

Change the number from 4 to 2 so it matches JavaScript. Not asking for a configuration option. TS should have sensible defaults. Sensible defaults for JavaScript include looking like the vast majority of other JavaScript.

📃 Motivating Example

See the links above.

💻 Use Cases

I and many others (according to #4042 and #2768) often look at outputted JS. For example, right now I want to throw debugger into some dist JS in my node_modules folder to see why a third party library is behaving oddly. I have to read some very odd-looking JavaScript since the TS compiler doesn't use a sensible default for the indentation value.

[fatcerberus]

I don’t think changing the default indentation counts as a breaking change.

That said, the default indent is, IIRC, 4 spaces, which I would consider sensible. If it was, say, 8 spaces, I’d be inclined to agree with you, but arguing for 2 spaces instead of 4 on the basis of sensible defaults just feels like pointless bikeshedding.

[jakebailey]

See also #50855 #2306 (moderately relavent, in that the PR does most of this I believe).

[fatcerberus]

Right now the JS output by the TS compiler is not idiomatic [or] recognisable.

I’m pretty sure emitting 4 spaces instead of 2 doesn’t make the code unrecognizable or even non-idiomatic. 🙄 Please don’t be overdramatic.

[mikemaccana]

@fatcerberus as discussed in the feature request, the vast majority of JavaScript uses two space indentation - using four space indentation does not look like standard JavaScript. Calling other people ‘dramatic’ for pointing that out and posting eye roll emoji is rude and doesn’t help discussion.

Speaking of idiomatic, from idiomatic js:

For readability, I always recommend setting your editor's indent size to two characters — this means two spaces or two spaces representing a real tab.

JavaScript has two spaces. In a fictional world where the compiler was outputting Rust code, and the compiler was outputting two spaces, Rust users would be asking to have the compiler output four spaces - because that's what idiomatic Rust looks like.

[fatcerberus]

I’ve seen lots of indent wars but I’ve never heard anyone claim code was “unrecognizable” as a particular language just because it used a different number of spaces. That’s the part I was calling dramatic, and I stand by it.

I always recommend setting…

This is someone’s opinion and is openly presented as such. I personally find 4 spaces more readable. Neither opinion is more valid than the other. So we’re ultimately just arguing whether we should paint the bikeshed blue or green.

I would also like to point this out: https://github.com/rwaldron/idiomatic.js#i-do-not-intend-to-impose-my-style-preferences-on-other-peoples-code-or-projects-if-an-existing-common-style-exists-it-should-be-respected

idiomatic-js is a style guide. It happens to be a well-known one and have “idiomatic” in its name. It is explicitly not a mandate nor a standard like the ECMAScript specification that needs to be followed religiously, and using a different style doesn’t make the resulting code suddenly “not JavaScript”.

Anyway, I’ve said my piece. I fully expect this issue to generate much more heat than light but I’ve been surprised before, so let’s see what happens.

[mikemaccana]

@fatcerberus this isn't an 'indent war' or bikeshedding.

Rather than being about anyone's personal preference, this feature request is about collecting data for what recognizable, idiomatic JavaScript looks like, so the TS compiler can output idiomatic, recognizable JavaScript code.

idiomatic-js is a style guide. It happens to be a well-known one and have “idiomatic” in its name.

Yes I am aware of this. The point I was making was that since the word 'idiomatic' also happens to be the name of a JavaScript style guide, it uses...surprise, 2 spaces. 😁

The intro to this feature request now has been updated to include the recommendations from 8 well known different style guides.

Results so far are 7/8 well known guides use two spaces, the jQuery guidelines uses tabs.

using a different style doesn’t make the resulting code suddenly “not JavaScript”.

Nobody in the thread has claimed this. However the uncommon indentation does make the resulting code unusual-looking JavaScript and that's what the request hopes to resolve. 😊

[mikemaccana]

I've added stats for the top 10 npm projects by downloads to the top of this post, and expanded the stats for well known APIs.

[MartinJohns]

If your aim is to improve readability of the generated code, then it should be tabs instead of spaces, allowing users to configure their preferred display width (especially visually impaired people).

And the logical conclusion to the 2 vs 4 spaces dispute is to simply use 3 spaces.

[mikemaccana]

Have added codepen, jsfiddle and jsbin results to top of the PR.

[lvlte]

Let say we have an .editorconfig with :

indent_style = space
indent_size = 2
end_of_line = lf

Our source code is formatted with the settings above obviously.

tsc allows us to set the EOL char in the emitted code via newLine, nice. But it doesn't allow us to set the indent style in the emitted code, 😢.

Why would tsc arbitrarily impose 4 spaces indentation in the emitted files, regardless of the source code / .editorconfig or whatever, while there is no tsconfig option to control/override this ?

The best would be imho to either :

• let developers be able to override it (reopen #4042, review PRs), or,
• at least keep it the same as in the source code / .editorconfig, or,
• at least impose the most used/popular preference.

Why not ?