Project Patterns and Tools - Configuring EditorConfig

Following the previous post, today we are going to configure EditorConfig on VSCode.

That tool can help us to change the code format settings for the IDE configuration.

But how does it work? EditorConfig is a file format and collection of text editor plugins for maintaining consistent coding styles between different editors and IDEs.

Also, this plugin attemps to override user or workspace settings with settings found in .editorconfig files. No additional or vscode-specific files are required.

So, let's start to set it up.

The first thing we need to do is install the EditorConfig for VS Code extension.

When the installation has finished, we can right click on the file explorer and select the "Generate .editorconfig" option.

We will create a file named ".editorconfig" with the following content.

Editoconfig Content

root = true

[*]
indent_style = space
indent_size = 2
charset = utf-8
trim_trailing_whitespace = false
insert_final_newline = false

That file contains the configuration we want to use to keep our code with the same format for our team.

We can find indent style, indent size, charset, insert final newline and a lot of different options.

Now, we are going to change the option trim_trailing_whitespace = false to trim_trailing_whitespace = true and add a new option like this end_of_line = lf.

trim_trailing_whitespace = true will remove any whitespace characters preceding newline characters.

end_of_line = lf will control how line breaks are represented.

As a result of our change the file should be like this now:

root = true

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

Finally, to make sure our code uses the new format properly, we need to open the project's files and save them again.

That's it!

From now, our code will be formatted with this rules and we can use the same configuration for our team, doesn't matter if they are using VS Code or other IDEs. The only thing we need to do is configure EditorConfig for them using the same configuration file.

If you would like to go deep in EditorConfig check it out at editorconfig.org.

In the next post, I'm going to show how to configure ESLint for VSCode to make our code and life a little bit better.

That's it, folks!

Thanks for reading and I hope it's been useful for you. Please do comment your questions and suggestions.