Understanding EditorConfig

What is EditorConfig

EditorConfig is a configuration file format and a collection of text editor plugins for maintaining consistent coding styles between different editors and IDEs.

https://editorconfig.org/

You describe your settings in a file named .editorconfig placed in the root directory of your project. Editors read this file to allow you to edit code in a consistent style.

EditorConfig supports various programming languages, file formats, and editors. It helps multiple developers in a project follow the same coding style and improves overall code quality across the project.

In the software engineering community, it's fairly common knowledge, so there might be a sense of "it's too late to ask now." (However, regardless of the topic, I hope people feel free to ask anything without hesitation. Searching for phrases like "Asking questions is not a shame and it's helpful" should lead to some good articles—though I didn't write them myself.)

When working with senior engineers, it's quite common for an .editorconfig file to be quietly present in the repository without any explanation. Well, once the file is there, supported editors will work automatically, so it's convenient that it gets applied without needing a detailed explanation.
Having to point out issues like indentation or things unrelated to the essence of the code to someone who submitted a PR wastes the motivation of both parties. 😣
(That being said, I don't think writing code without understanding why it's structured this way helps beginners grow. Understanding the background and mechanisms of things that work automatically is very important as a foundation.)

What can be configured

You can define rules related to code formatting, such as tab width, line endings, and indentation styles.

As mentioned in the Supported Properties section at:
https://editorconfig.org/#file-format-details

Constraints

It can be used if your editor is on the list of supported editors:
https://editorconfig.org/#pre-installed

Or if it is an editor included in the list of editors that can support it by installing a plugin:
https://editorconfig.org/#download

Let's try it out

Preparation

This time, we will use VSCode. (You can also try it with another supported editor you have on hand.)
Since VSCode supports it through a plugin, install it from Extensions.

https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig

Creating your first .editorconfig

Create a file named .editorconfig in your working directory or project root and save it with the following content.

.editorconfig

# EditorConfig is awesome: https://EditorConfig.org

# top-most EditorConfig file
root = true

# Unix-style newlines with a newline ending every file
[*]
end_of_line = lf
insert_final_newline = true

# Matches multiple files with brace expansion notation
# Set default charset
[*.{js,py}]
charset = utf-8

# 4 space indentation
[*.py]
indent_style = space
indent_size = 4

# Tab indentation (no size specified)
[Makefile]
indent_style = tab

# Indentation override for all JS under lib directory
[lib/**.js]
indent_style = space
indent_size = 2

# Matches the exact files either package.json or .travis.yml
[{package.json,.travis.yml}]
indent_style = space
indent_size = 2

# My config
[*.txt]
indent_style = space
indent_size = 2

Note that this content is based on a copy from https://editorconfig.org/#example-file.
(I have specifically separated it as My config to make the additions easier to understand, but of course, it is no problem to integrate it with the items above.)

By the way, it seems VSCode can generate a template by right-clicking in the file tree.

Let's try editing the files

Let's create and edit demo.txt and demo.py in the directory where you created .editorconfig.

Try and see if the number of spaces inserted when pressing the Tab key matches the settings.

Additionally, you should be able to visually confirm that a blank line is automatically inserted at the end of the file when you save with Ctrl+S or ⌘+S.
Also, redundant trailing spaces will be automatically deleted (trim_trailing_whitespace = true).
Try changing other settings as well to see how the editor behaves.

Let's leverage EditorConfig 👍🏻

Let's set it up right now!

If you have a project you're currently working on, definitely try setting it up.

Copy the contents from https://editorconfig.org/#example-file and paste it. If you have specific preferences, customize it to your liking. ✍🏻

Also, for those using Unix/Linux/WSL as their work environment, it might be a good idea to just create an .editorconfig in your home directory for the time being.
(Use this as a fallback so you don't forget to have settings in place when you create a new project ⚠️)

If placed in the home directory, if an .editorconfig is not found in the working directory, or if there is no root=true setting, the editor will automatically search through all parent directories until it finds one and applies it.

If you're unsure about the settings, borrow them from official repositories

EditorConfig is widely adopted even in major OSS projects.

If you're unsure about what settings to use, it's a good idea to look for a repository containing the source code for the language or framework you use and reuse its configuration.

If there are sample projects published for a framework, it's also worth looking at those. (The settings for the framework's own source code and the settings for projects that use it can differ slightly.)

For Django, you can find a configuration file in the Django repository itself that seems to be specialized for Python and Django!
https://github.com/django/django/blob/main/.editorconfig

I found one for TypeScript as well.
https://github.com/microsoft/TypeScript/blob/main/.editorconfig

In this way, let's use the settings from official repositories as a reference!

Make it a habit to include .editorconfig in new repositories!

When creating a new project, I recommend getting into the habit of creating an .editorconfig at the same time you create your .gitignore and README.md. 💪🏻