EditorConfig: The Best First Step Towards a Consistent Codebase

What is EditorConfig?

EditorConfig is my default choice for all the projects. This tool ensures the code follows a specific style guide, no matter what editor you use. It allows defining basic formatting rules used while writing code, for instance, two spaces indentation for CSS files, four for PHP files, max line length, and a few more.

You can check all the possibilities in the official docs. There aren't a lot of them, but it's powerful enough. We can keep it simple as f*ck, or even build more custom configs for formats defined with wildcarts.

How to configure EditorConfig?

Its biggest advantage is minimal setup and flexibility. I don't need to install a lot of additional packages, perform complicated configurations, and use millions of rules to follow. It allows configuring a few of the most important formatting rules easily and works. That's why I love to work with it.

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true

[*.php]
indent_size = 4

[*.md]
trim_trailing_whitespace = false

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true

[*.php]
indent_size = 4

[*.md]
trim_trailing_whitespace = false

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true

[*.php]
indent_size = 4

[*.md]
trim_trailing_whitespace = false

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true

[*.php]
indent_size = 4

[*.md]
trim_trailing_whitespace = false

To use this tool we simply need to create .editorconfig in the root of the plugin, configure the basic rules for all files or for specific extensions and that's almost all! By default, all the files in my plugin's codebase should use 2-space indentation, utf-8, don't have whitespace at the end of the lines, and always have one empty line at the end of the file. For the PHP files I want to use 4-space indentation so I can define it too.

How to use EditorConfig?

Depending on the editor, you might need to install a plugin that reads the configuration and formats the code while saving a file. Some editors handle this by default, but some don't. If you use VS Code or PHP Storm, you need to install a plugin to make it work.

class Hooks
{
  public static function init(): void {
    $foo = array();
  }
}

class Hooks
{
    public static function init(): void {
        $foo = array();
    }
}

Once installed, the coding rules are automatically detected and applied while writing or while saving a file. You might be surprised, but That's all! It's so simple yet powerful.

How it differs from other popular formatters?

You might be wondering now how it differs from other popular formatters. Let's say that you use Prettier for handling CSS or JS code. You work, work, work, and hit save button once finished. Prettier will take the content of this file and format it based on the defined rules. This process will happen after you finish the writing (after saving a file or after running the format command).

Unlike other formatters like Prettier which format code after writing, EditorConfig tries to adjust formatting as you type, on the fly, immediately applying formatting rules. For instance, if you hit tab, EditorConfig immediately formats indentation according to your settings defined in the .editorconfig file. So if you open a PHP file, you'll see that 4-space indentation is used, for all other, 2-spaces.

Is EditorConfig worth using?

Totally! Its biggest advantage is simplicity. Not all the projects use advanced linting configurations and sometimes it's not worth investing time to fight with them. If we have simple projects that need simple formatting rules just to have a basic code style without a lot of manual work - that's the best tool to use.

And what's great, is if you define basic config style with this tool and decide to use Prettier in the future, your original config will be handled too. Prettier supports this.