EditorConfig¶

Overview¶

EditorConfig is a lightweight configuration tool to maintain consistent coding styles within the project.

The name of tool is targeted to [Editor] and [Config]

The logo of the tool is very cool, which attractive me in the first place.

Features:

• Easy to config: a text configuration file, an optional plugin with IDE

• Easy to write configuration rule and supported wildcard patterns and properties

• Supported multiple IDEs: from native support (such as: GitLab, GitHub, Visual Studio)

Goals:

• Same config for multiple developer in the same project for text editor

Usecase:

• Add EOL for selected file format, like Python (.py convention)

• Indent with space 2 for all YAML file

Implement¶

Steps to implement into project with following view:

flowchart TB

  %% Component
  s1[Step 1 - Init file in directory, or root level]
  s2[Step 2 - Add section configuration based on glob file format]
  s3[Step 3 - Optional - Install required plugin]

  %% Flow
  s1 --> s2 --> s3

Step 1: Add .editorconfig (has dot in the head) into directory

Example:

.                             # Root Project Folder
...
.editorconfig                 # Format file (Root) [Can set root=true]
...
src/
  nested/
    folder/
      .editorconfig           # Format file (Children)
...

Note: This file has the same style to write like an ini file.

Step 2: Add configuration rule for targeted file format

File format: the file convention for specific language. Example: Python is .py, markdown is .md, yaml is .yml or .yaml

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

# Matches multiple files with brace expansion notation
# Set default charset
[*.{js,py}]
charset = utf-8

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

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

Step 3: [Optional] Install related plugin that support with IDE.

Native Support	Required Plugin

In my case, I need to install plugin for my Visual Studio Code (my choosen IDE).

Question and Answer¶

Question: How the editorconfig process their rule

• Performed all file in the directory file (named .editorconfig by default) and the parent directories until hit root=true

• Files are read top to bottom and the most recent rules found take precedence.

Question: Is the configuration supported glob?

Yes, it's supported glob expressions on section names. The format similar to the format of .gitignore and glob pattern support by Unix shell-style wildcard.

Futher Reading¶

• The EditorConfig Specification: Spec about Terminology, File Format, Parts of an EditorConfig file, Glob Expressions and so on,...

• The GitHub wiki about Editor Properties: Introduction about properties (aka: "declarations") such as: indent_style, indent_size, tab_width, end_of_line, ....

Reference¶

• [1] Official Editorconfig website