Open In App

What is .editorconfig ?

Improve
Improve
Like Article
Like
Save
Share
Report

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

  1. You can have a common indentation-style (Tabs/Spaces) & indentation-size
  2. EditorConfig will help in configuring character encoding and line-endings (lf/crlf)
  3. 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:

  • IntelliJ
  • Pycharm
  • Visual Studio
  • Github / Gitlab / Gitbucket

If you use the Editors listed below then you should install the plugin:

  • VS Code
  • Atom
  • Eclipse
  • CodeBlocks
  • Netbeans
  • Sublime Text

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.

A new .editorconfig file was generated with help of EditorConfig Extension in VS-Code

Configuration Syntax: 

  • 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.

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.


Last Updated : 07 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments