What is .editorconfig ?
Last Updated :
07 Mar, 2024
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:
- 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.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...