Monthly Archives: December 2013

Eliminating Distracting Duplicate Files From Sublime Text

Sublime has some super-cool productivity features: the Sidebar, GoTo Anything, site-wide search, etc. But they run smack into the modern web dev workflow reality that we often have multiple copies of everything sitting around. You’ve got your `app` folder perhaps, where your source lives. Then you’ve maybe got a `dist` for building into, and you may have that weird `.tmp` folder that lives in the hellscape purgatory between the two. And therefore, there might be a `main.css` file in all three of those places.

Which means you’ve got a problem if you just <CMD-P>, take the first `main.css` you see there, and edit away. Or, you’ve got a ton of files and folders in the sidebar, and you just glance over and open the one that *looks* the one you need, only it turned out to be nested inside the totally wrong folder, because you had been checking out the success of your build a couple minutes before. Etc. Shit Happens.

But, lo: you can reduce the incidence of such shit! You can make Sublime ignore those folders – and their non-authoritative contents – entirely, without needing to change the way you organize your project, or the folders you add to it. You’ll still be able to access them whenever you need them, via the magic of the `Open` command, but they’ll no longer be cluttering your view – and your mind – the vast majority of the time.

To disappear them from Sublime (which I thought would bother me, but doesn’t in the least now, as I can always get them with File >> Open), just add a single line to your *User* Settings file. Here’s the original line in the Default Settings:

"folder_exclude_patterns": [".svn", ".git", ".hg", "CVS"],

So, Sublime is by default hiding all your files and folders related to source-control metadata. We’re going to add a couple more items to that, which will then really allow you to de-clutter, and focus in on just what matters: the source code you’re actually writing:

"folder_exclude_patterns": [".svn", ".git", ".hg", "CVS", "dist", ".tmp", "node_modules", "bower_components"],

No surprises here, but a quick explanation for anyone just getting used to these items: my Yeoman/Grunt-based workflow tools build distributable files into the `dist` folder; and they use `.tmp` as a staging area for pre-compilation during development and build. `node_modules` is where Yeoman and Grunt themselves live (along with all their other handy workflow cousins). And Bower is an amazing package manager that handles Javascript dependencies like Libraries and Frameworks. `bower_components` is where it stores them all.

All of those things are files that I most certainly need and want in my project. And yet they’re also stuff that I need to see and interact with only occasionally. When I need to do that, <CMD-O> takes care of it. But if this isn’t your exact cup of tea, take this basic idea, and customize it to your heart’s content. Cheers.

BONUS HINT ON FILE NAVIGATION: Lots of folks already know this, but don’t forget that you can use Sublime (and many other apps) to view invisible files in the Open Dialog using a simple key-stroke: < CMD – SHIFT – . > I use this most often when I need to add stuff to ~/.bash_profile, but it comes in handy any other time you want to poke around and find a hidden file in an environment more visual than Terminal.