in Our Authors, Tips

EditorConfig – Code Formatting Inconsistency Issue

I suppose that most of you in your daily developer lives experienced a problem of code formatting inconsistency between projects, individual developers and even teams.

Whether you were working on the outsourcing, side or general projects with developers from another company or your teammates, if the development standards were not set from the beginning, the problem starts to arise very quickly. This is a must for you and everyone around you if you want to keep your projects more humanly readable and maintainable.

Believe it or not, these problems are going on for years now. To be honest with you, two years ago when I started my journey in Web development, I was thinking like some of the people that I personally know and that haven’t changed their mind for couple of years now.

Anyways I thought, well what the hell, for the computer as a machine code is represented in 0 and 1, no matter indented or not, but for a human that’s another story. Readable and consistent code formatting is very important.

What is EditorConfig?

To jump to the point, there is a solution to this decade big problem and it’s called EditorConfig created by Sindre Sorhus. It’s a plugin for your code editor.

So you probably ask your self: “Ok, what’s so good about EditorConfig, what it is for?” For that you can visit the project page, where it’s stated that:

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. EditorConfig files are easily readable and they work nicely with version control systems.

What this means is that you create a .editorconfig file in your project repository and commit it, next you add special instructions into .editorconfig and install EditorConfig plugin for your code editor. Next you write code and your code editor will follow settings defined in .editorconfig file.

How EditorConfig file looks like?

Below is an example of .editorconfig file setting end-of-line and indentation styles for Python and JavaScript files. This example is taken from the official EditorConfig page:

# EditorConfig is awesome: http://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

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

# Tab indentation (no size specified)
[*.js]
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

You can see it this example that there are settings for all files, and settings for specific file extensions, and even specific folders.

Location of the .editorconfig?

For any project you can have multiple .editorconfig files at multiple locations.

When you are opening a project, EditorConfig plugin automatically looks for a file named .editorconfig in the directory of the opened file and in every parent directory. Search will stop if the root file path is reached or ad EditorConfig file with root=true is found.

.editorconfig files are read top to bottom and the closest .editorconfig files are read last. Properties from matching .editorconfig sections are applied in the order they were read, so properties in closer files take precedence.

Notification for Windows users: To simply create an .editorconfig file under Windows environment using Windows Explorer, you just need to create a file named .editorconfig. with a dot at the end, which will Explorer then automatically rename it to .editorconfig

Supported properties

Here are some supported properties, but there is a complete list of properties:

  • indent_style
  • indent_size
  • tab_width
  • end_of_line
  • charset
  • trim_trailing_whitespace
  • insert_final_newline

Good thing to note here is that all properties and values are case-insensitive meaning they are lowercased when in the parsing process. By default if you haven’t specified the property inside .editorconfig file, the default editor settings that you are working with will be used.

EditorConfig plugins are available for all major platforms and IDEs:

Oh and last but not least, check out this mini three part tutorial on Youtube on how to get started with EditorConfig if you haven’t figured out how to set it up using documentation:

EditorConfig Basics: Installing, Part 1/3

EditorConfig Basics: Properties, part 2/3:

EditorConfig Basics: Patterns, part 3/3

Be sure to check out our other great posts, until next time.

Cheers

 

Share this ...Tweet about this on TwitterShare on FacebookEmail this to someoneShare on RedditShare on Google+Share on LinkedInPin on Pinterest