What is .editorconfig ?
EditorConfig is a simple configuration file that contains a list of rules which can be applied to any IDE’s or code editors for proper formatting of code. But why use EditorConfig? Consider a scenario where your team is working on a project but the individual members of the team use a different IDE or code editor, these differences might result in inconsistent formatting applied to the code as each IDE/editor has its own configurations. EditorConfig solves this problem by having a single config file that is readable by all IDE’s and code editors with the help of some plugins/extensions. This tool is used extensively in many big projects including Angular, Bootstrap, Django, Nodejs, React, Vuejs, and a lot more.
Advantages of using EditorConfig
- You can have a common indentation-style (Tabs/Spaces) & indentation-size
- EditorConfig will help in configuring character encoding and line-endings (lf/crlf)
- It can also enforce the editor to have a new line at end of each file and many more.
Setting up EditorConfig in your projects:
To set up EditorConfig, you need to install the plugin/extension respective to your IDE/editor.
Following editors doesn’t need any plugins as they come with native support for EditorConfig:
- Visual Studio
- Github / Gitlab / Gitbucket
If you use the Editors listed below then you should install the plugin through their respective links:
Once the respective plugin/extension is installed create a file named `.editorconfig` in the root of your project directory
If you are using VS Code you can generate a new editorconfig file via the Explorer sidebar’s context menu by right-clicking in the folder where you’d like it to be and selecting Generate .editorconfig.
- root = true : Whenever you open your Editor, the EditorConfig plugin will look for a file named `.editorconfig` in the directory of opened files and in every parent directory, but this search can be stopped if it reaches the root file path which can be specified with root=true.
- Comments : Comments in `.editorconfig` starts with ‘#’ or ‘;’.
- Section Headers : They start with ‘[‘ and end with ‘]’, they are used to select the specific files and apply rules to them. For example ‘[*.js]’ will apply all the rules to any file which has `.js` as an extension.
- Key-Value pairs : These key-value pairs are the rules(supported properties) that are located under Section Headers. For example ‘indent_size = 4` will set size of indentation to 4 space/tabs. You may find all the supported properties on their wiki page.
Example configuration file:
# EditorConfig is awesome: https://EditorConfig.org # top-most EditorConfig file root = true [*] charset = utf-8 end_of_line = lf indent_size = 4 indent_style = space insert_final_newline = true max_line_length = 80 trim_trailing_whitespace = true [*.md] max_line_length = 0 trim_trailing_whitespace = false
Here the root=true specify to the editor that it is the top-most EditorConfig file, any rules specified under this section header- [*] will be applied to all the files including your *.js, *.css, etc. You can have specific rules for specific files for example [*.md] section header has the rules which should be applied on only files having .md as an extension.