Why 'create-react-app' always gives me 2 instead of 4 indentation spaces?

Question

Everytime I run 'create-react-app', my initialized project is using 2 instead of 4 indentation spaces. How to automatically convert to 4 tabs?

I'm using Atom as a text editor. Under 'config.cson', the tab length is always set to 4.

Hearts

FWIW, that's more or less the current JS practice, for better or worse. Just run whatever beautifier you use and reformat if you insist on big indents. – Faintheart

That's a very broad statement. I work at some pretty big companies and the dev teams all like 4 spaces for readability. – Contredanse

Answer 1

There isn't a way to tell create-react-app to indent using 4 spaces instead of 2. This is a style that the creators of React have standardized on.

The best you can do is do a global search and replace in your source files for two spaces and replace it with four spaces.

Gimp

Answer 2

I added an .eslintrc (in the project root folder, but it could be in ./src as eslint settings used are those closer to whatever is getting linted) with the following rules (be warned - these parser/parserOption rules seem to change rapidly). https://eslint.org/docs/rules/indent

{
    "parser": "babel-eslint",
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "rules": {
        "indent": ["error", 4, { "SwitchCase": 1 }]
    }
}

Then, I ran with this command: eslint ./src/ --fix

Basically, I'm overriding whatever nested/hidden eslint settings that create-react-app comes with by default. I'm using VSCode and found I had to re-open files to get the changes to show (with visual helpers I use like indent guides).

NOTE: Edited for "SwitchCase" addition. Without this, as of today, cases get no indent in a switch statement (visually in same column as keyword "switch") per create-react-app defaults. You can just leave out that extra object in the "indent" array if you like that.

Contredanse

Does not work now - Error: Cannot find module 'babel-eslint' – Arnettearney

Answer 3

Run the following commands, (For VS Code)

First of all install Prettier extension in VS Code.

1. cd ~/my-project (Go to your current directory and open terminal)
2. npm install --global prettier
3. npm install --save-dev prettier
4. npx prettier --write --tab-width 4 --single-quote "**/*"

Then reopen VS Code the changes should reflect.

If you find error installing command 2 use this instead, sudo npm install --global prettier.

This will fix the issue in case it occurs.

Impractical

i think we only need this last line dont we? thank you – Prefect

Answer 4

Not certain about create-react-app specifically but this should help configure your indentations app wide

http://editorconfig.org/

You can choseyour editor and make the necessary configuration changes on your project to maintain common spacing and identation project wide - regardless of who is using which editor.

Vibrio

Answer 5

You can perfectly override those abusive settings (I call abusive to something that is not meant for you to customize even when you dedicate long hours to work on it),

Just go to VSCode -> Settings, type 'Indentation' in the search box and find the option 'Auto Indent' ('Auto Indent' will appear at the top of the list) and set it to 'none'.

That works for 'create-react-native' app with Expo in VSCode for Mac being September 2021.

Namnama

Answer 6

If it's VSCode, go to File-Preferences-Settings and you need to find 'Detect Indentation' and uncheck it. After that, check 'Tab Size'. There should be the number 4.

Yankee

OP mentioned in their question, they're using Atom. – Harakiri

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Rowell