Taming Whitespace with Editorconfig

Code formatting is one of those topics where you’ll likely get ten different answers when asking ten developers about their preferred style. In fact, the tabs vs. spaces discussion is as old as time itself. (Almost, at least.) Even when you get developers to agree on indenting code using spaces rather than tabs, some prefer an indent size of 4 while others like to use only 2 spaces.

On its own, none of the above styles is wrong. What is wrong, however, is mixing tabs and spaces (or different indent sizes) within the same project. Having some parts of the code base indented more than others leads to a horrendously inconsistent look and feel. Additionally, code can easily get misaligned due to varying tab widths configured in different editors and IDEs. Avoid this and strive for a uniform formatting style.

While a single team can usually agree on a formatting style and configure their editors accordingly, things get more complicated when switching between different projects. Some might use tabs, others 2 spaces, and even others 4—and who knows, maybe some project owner insists on indenting with 3 spaces. On top of that, some people like to end their files with a blank line while others don’t. And then there’s the question of how to deal with trailing whitespace.

This formatting problem manifests itself particularly frequently in the highly diverse world of open-source software. Reconfiguring the editor or IDE on every project switch is cumbersome, error-prone, and downright annoying. This is where Editorconfig comes to the rescue:

EditorConfig helps developers define and maintain consistent coding styles between different editors and IDEs. The EditorConfig project consists of a file format for defining coding styles and a collection of text editor plugins that enable editors to read the file format and adhere to defined styles. […]

When your editor or IDEs finds a file named .editorconfig in your project folder, it will format your code according to the styles defined therein. All popular editors and IDEs support the Editorconfig format, although most of them require a plugin to be installed.

Here’s an exemplary .editorconfig file, taken from my gulp-iife project:

root = true

[*.{js,json}]
indent_style = space
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.js]
indent_size = 4

[*.json]
indent_size = 2

This file specifies that I’d like to use 4 spaces when indenting JavaScript files and only 2 spaces when indenting JSON files. Additionally, it states that the text editor should remove whitespace at the end of each line and insert a newline at the end of the file.

If you’re the author of an open-source project, make your life (and the lives of your contributors) a little easier by providing an .editorconfig file with the format of your choice. Even if you’re not, make sure you have the Editorconfig plugin installed within your editor of choice so that your contributions to other open-source projects are formatted correctly. Let’s all agree on this and not discuss whitespace in pull requests anymore!