Programming

How To Fix GitHub’s Weird Issue With Wrong Indentation

Switch from tabs to spaces

Source: the author

You might know the pain with an indentation on GitHub like in the above picture. In your editor, your code looks great. Then you push it to a GitHub repo, and suddenly, the indentation is messed up.

The same problem applies to Gists on GitHub too — when copying from your editor, the indentation is messed up.

It took me a while to figure out, what is going wrong there. Finally, I realized, this isn’t a problem that can be fixed on GitHub itself.

The problem seems to be using tabs for indentation on your machine. Instead, switching to spaces helped me get rid of this problem.

So, to fix this:

• Make sure your code editor uses spaces instead of tabs.
• Make sure your formatting tool uses spaces instead of tabs too.

Having a look at your formatting tool is essential. Switching the editor to use spaces instead of tabs wasn’t enough. On every save, my formatting extension fills everything with tabs again.

Since I use VS Code, and many others do:

Open the settings. Enter “editor.insertSpaces” in the search bar. Make sure to have a check on the option “Insert Spaces”.

To change your formatting tool:

Press right-click somewhere in your code. The context menu should appear. Click on the option “Format document with”. Then, the standard formatting tool should be highlighted.

Mine is Prettier. So I search for this option in the settings:

And make sure it isn’t checked.

Since I don’t know which formatting tool you are using, you have to figure out where this option is in your editor.

Thank you for reading!