Per-Project Whitespace with EditorConfig

By  on  

Standards can change from project to project.  Single quotes or double quotes?  MooTools, Dojo, or micro-frameworks?  And then the question that has started wars:  spaces or tabs?  I'm a tab guy myself but the team that I work on has set a two-space standard.  It's not my preference but it was a team decision so I have to drink the Kool-Aid.  I still want to use my typical tab whitespace on other projects but just this one project should use spaces.  I thought this would be a nightmare but enter EditorConfig, a utility with plugins for several text editors which allows developers to specify settings per project.

Start by creating a .editorconfig and placing it at the root of the project which you'd like to create whitespace for:

touch .editorconfig

Once the file is in place, it's up to you to set the spacing settings per file type as you wish:

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

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

# Tab indentation (no size specified)
[*.js]
indent_style = tab

# Indentation override for all JS under lib directory
[lib/**.js]
indent_style = space
indent_size = 2

So not only can you set spacing per project but you can set them per file too.  I've found EditorConfig to be a lifesaver as I can code per usual without having to think about spaces or tabs.  EditorConfig made my day!

Recent Features

  • By
    Page Visibility API

    One event that's always been lacking within the document is a signal for when the user is looking at a given tab, or another tab. When does the user switch off our site to look at something else? When do they come back?

  • By
    CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

Incredible Demos

  • By
    Sliding Labels Using MooTools

    A week back I saw a great effect created by CSSKarma: input labels being animated horizontally. The idea is everything positive: elegant, practical, unobtrusive, and requires very little jQuery code. Luckily the effect doesn't require much MooTools code either! The HTML A...

  • By
    LightFace:  Facebook Lightbox for MooTools

    One of the web components I've always loved has been Facebook's modal dialog.  This "lightbox" isn't like others:  no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much."  With Facebook's dialog in mind, I've created LightFace:  a Facebook lightbox...

Discussion

  1. MaxArt

    In Notepad++ you can change the indent behaviour clicking on Preferences / Tab Settings and defining the tab width and characters as a general behaviour or on a per language basis.

    • RC

      Yeah, nearly every editor and IDE worth its salt can do this.

      But you’re missing the point. EditorConfig is most useful in a COLLABORATIVE development project, where you have a multitude of devs and a multitude of IDEs/editors. EditorConfig attempts to establish a common standard for IDE/editors to enforce whitespace rules.

  2. I recently started a repo of my editorconfig, lint config, and sublime text user preferences, this way I always have them and can keep several machines in sync.

    https://github.com/PeteSchuster/dot-config-files

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!