Repository: TypeScript
Issue: Feature request: set JS output indentation to 2 in next major release
Labels: Suggestion,Awaiting More Feedback

# 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](https://prettier.io/docs/en/options.html#tab-width) 
        > tabWidth default is 2, useTabs default is false 2️⃣
      - [StandardJS](https://standardjs.com/rules.html#rules) 
        > Use 2 spaces for indentation. 2️⃣
       - [node style guide](https://github.com/felixge/node-style-guide#2-spaces-for-indentation) 
         > Use 2 spaces for indenting your code. 2️⃣
       - [Idiomatic JS](https://github.com/rwaldron/idiomatic.js/#idiomatic-style-manifesto)  
         > 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](https://airbnb.io/javascript/#whitespace--spaces) 
         >19.1 Use soft tabs (space character) set to 2 spaces 2️⃣
       - [MDN code style guide](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Writing_style_guide/Code_style_guide/JavaScript#spacing_and_indentation) 
         > Mark indentation with 2 spaces. 2️⃣
       - [Google JavaScript Style Guide](https://google.github.io/styleguide/jsguide.html#formatting-block-indentation) 
         > Each time a new block or block-like construct is opened, the indent increases by two spaces. 2️⃣
       - [jQuery](https://contribute.jquery.org/style-guide/js/#spacing) 
         >Indentation with tabs. 
    - **All of the documentation for the well known APIs below**:
      - [Stripe](https://stripe.com/docs/js/elements_object/create) 2️⃣
      - [Twilio](https://www.twilio.com/docs/voice/sdks/javascript/twiliodevice) 2️⃣
      - [Sendgrid](https://docs.sendgrid.com/for-developers/sending-email/quickstart-nodejs#complete-code-block) 2️⃣ OK they're also owned by Twilio now. 
      - [Firebase](https://firebase.google.com/docs/web/setup) 2️⃣
      - [Mixpanel](https://docs.mixpanel.com/docs/tracking/reference/nodejs) 2️⃣
      - [Mailchimp](https://github.com/mailchimp/mailchimp-marketing-node) 2️⃣
    - The vast majority of [npm modules](https://npmsjs.com) 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](https://npmjs.com), **7 of the top 10 use 2 spaces**, 1 uses tabs, **tslib and moment** are the only projects that use four spaces.
       - [Lodash](https://github.com/lodash/lodash/blob/master/fromEntries.js) 2️⃣
       - [react](https://github.com/facebook/react/blob/main/packages/react/index.stable.js) 2️⃣
       - [axios](https://github.com/axios/axios/blob/v1.x/lib/axios.js) 2️⃣
       - [tslib](https://github.com/microsoft/tslib/blob/main/tslib.es6.js)  4 spaces 
       - [chalk](https://github.com/chalk/chalk/blob/main/source/index.js)  tabs
       - [react-dom](https://github.com/facebook/react/blob/main/packages/react-dom/client.js) 2️⃣
       - [commander](https://github.com/tj/commander.js/blob/master/index.js) 2️⃣
       - [express](https://github.com/expressjs/express/blob/master/lib/express.js) 2️⃣
       - [vue](https://github.com/vuejs/core/blob/main/packages/vue/index.js) 2️⃣
       - [moment](https://github.com/moment/moment/blob/develop/moment.js) 4 spaces
    - **Well known JS playgrounds**:
       - [codepen](https://codepen.io/) - 'Save' -> 'Format code on Save' uses 2 spaces. 2️⃣ 
       - [jsfiddle](https://jsfiddle.net/) - 'Tidy' button uses 2 spaces. 2️⃣ 
       - [jsbin](https://jsbin.com/) - 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](https://github.com/Microsoft/TypeScript/wiki/TypeScript-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.