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
    9 More Mind-Blowing WebGL Demos

    With Firefox OS, asm.js, and the push for browser performance improvements, canvas and WebGL technologies are opening a world of possibilities.  I featured 9 Mind-Blowing Canvas Demos and then took it up a level with 9 Mind-Blowing WebGL Demos, but I want to outdo...

  • By
    Facebook Open Graph META Tags

    It's no secret that Facebook has become a major traffic driver for all types of websites.  Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly.  And of course there are Facebook "Like" and "Recommend" widgets on every website.  One...

Incredible Demos

  • By
    iPhone Click Effect Using MooTools or jQuery

    One thing I love about love about Safari on the iPhone is that Safari provides a darkened background effect when you click a link. It's the most subtle of details but just enforces than an action is taking place. So why not implement that...

  • By
    Sexy Opacity Animation with MooTools or jQuery

    A big part of the sexiness that is Apple software is Apple's use of opacity. Like seemingly every other Apple user interface technique, it needs to be ported to the web (</fanboy>). I've put together an example of a sexy opacity animation technique...

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!