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
    JavaScript Promise API

    While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready?  Promises are becoming a big part of the JavaScript world...

  • By
    CSS Gradients

    With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements.  CSS gradients are another step in that direction.  Now that CSS gradients are supported in Internet Explorer 8+, Firefox, Safari, and Chrome...

Incredible Demos

  • By
    Duplicate the jQuery Homepage Tooltips Using Dojo

    The jQuery homepage has a pretty suave tooltip-like effect as seen below: Here's how to accomplish this same effect using Dojo. The XHTML The above HTML was taken directly from the jQuery homepage -- no changes. The CSS The above CSS has been slightly modified to match the CSS rules already...

  • By
    MooTools Accordion: Mouseover Style

    Everyone loves the MooTools Accordion plugin but I get a lot of requests from readers asking me how to make each accordion item open when the user hovers over the item instead of making the user click. You have two options: hack the original plugin...

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!