×
Get in touch

Get in touch with Binary

Binary Studio website uses cookies to enhance your browsing experience. By continuing to use our site, you agree to our Privacy Policy and use of cookies.

Learn more more arrow
Agree
Nikita Semenistyi Ex-CTO 20.08.2014

Taming coding style with help of Editorconfig


Long ago the list of text editors consisted pretty much of Vim or Emacs, but with the growth of software development there also appeared plenty of them. Currently you use in your everyday work either advanced IDE, which is most probably optimized for a particular language (JetBrains has a lot to offer you) or plain “swiss-army knives” text editors (Vim, SublimeText, upcoming Atom from Github team).

The chances are that some of the guys in your team use another editor, which of course has another configuration throw pillows and in case if you want all of you to follow the uniform code style, it will be quite painful to configure all the editors similarly and even to force everyone to do this.

That’s when the Editorconfig may seem to you very handy. Trey Hunner and Hong Xu are the guys who came up with the idea of universal configuration for all of the text editors. All the properties you need should be placed into the file named .editorconfig which should be placed in the root of your project or in any folder which needs separate set of rules. Plugin for the editor will look for this file in the same directory as the file or in any parent directories.

smart developer binary studio software.png

The only irrespective to files' property is root. If truthy, it tells plugin to stop searching for the config.

root = true

Next goes the pattern which will match the files you need to define config for. Editorconfig supports wildcard matching: [*], [*.py], [*.js], [lib/**.js] or names listing [{package.json,.travis.yml}].

Next goes the most meaningful part which represents the actual rules for files defined. I will list the properties supported by most of the plugins, which are taken from the official docs, but there were also my own observations added to some of them.

indent_style: tab or space.

indent_size: a whole number defining the number of columns used for each indentation level and the width of soft tabs (when supported). When set to tab, the value of tab_width (if specified) will be used.

tab_width: a whole number defining the number of columns used to represent a tab character. This defaults to the value of indent_size and doesn't usually need to be specified.

end_of_line: lf, cr, or crlf to control how line breaks are represented. As a windows user I wasn’t able to find it important until worked with npm modules which are intended to be installed globally. You may take it as a rule that for cross-platform development you’ll need lf line endings.

charset: set to latin1, utf-8, utf-8-bom, utf-16be or utf-16le to control the character set. Use of utf-8-bom is discouraged.

trim_trailing_whitespace: set to true to remove any whitespace characters preceding newline characters and false to ensure it doesn't.

insert_final_newline: set to true to ensure file ends with a newline when saving and false to ensure it doesn't. True may be helpful if you expect this files to behave fine with Unix tools as cat.

I tried Editorconfig on SublimeText and Visual studio and both worked very well for me. In order to show you what they do for you, I will compare .efitorconfig properties to editors’ ones.

Sublime

The plugin is initially created by Sindre Sorhus. It can be installed via Package Control for both Sublime 2 and 3.

editor web binary studio.png

The corresponding properties of Sublime config are:

Editorconfig Sublime
indent_style translate_tabs_to_spaces
indent_size tab_size
end_of_line default_line_ending
charset default_encoding
trim_trailing_whitespace trim_trailing_white_space_on_save
insert_final_newline ensure_newline_at_eof_on_save

Visual Studio

 

visual studio binary outsourcing.png

VS does not assume that you specify properties in the text file and instead gives you the possibility to define it in GUI:

Tools -> Options->Text Editor -> All Languages

Editorconfig Visual Studio
indent_style Tabs->Indenting checkbox
indent_size Tabs->Indent size
tab_width Tabs->Tab size

I’m  not sure if other properties could be even set with the same meaning and not just checkboxing ‘Save documents as Unicode when data cannot be saved in codepage’. Nevertheless, I believe that you understand all the complexity Editorconfig solves and I personally think that such projects help us to build beautiful code in all its meanings.