Advertisement
Tools & Tips

Sublime Text 2 Project Bliss

by

One of the many things that led me to decide that Sublime Text was going to be my text editor of choice was the way you could customize what's shown in the file list on the left. I had no idea that this level of customization was available. Here's a short tutorial that I hope will help you as much as it did me.


Step 1 - Adding a Folder

Note: If you already have a project set up, skip to Step 3.

Upon opening up Sublime Text, add a folder to the project by pressing Ctrl+Shift+P (Cmd+Shift+p on Mac) to bring up the über handy Command Palette, typing "Add", and then hitting Enter.


Step 2 - Save the Project

Now that you've added a folder to the project, bring up the command palette again, and type "Save" (or Project: Save As) to save your project. We're going to be editing this file in the next step.

Don't forget to give your project file the .sublime-project extension. Likely, this will be provided for you.


Step 3 - Get to Know the Project File

From the menu, select Project -> Edit Project to edit the project file you saved in Step 2. Or, of course, access this from the command palette.

You should now see something similar to the following in your editor window:

{
	"folders":
	[
		{
			"path": "/C/wamp/www/wordpress"
		}
	]
}

Fairly self explanatory, right? You'll notice that, as with all Sublime Text goodies, this file is formatted as JSON. Don't stress too much, if you don't know much about JSON. You should be able to figure it out as you go along.

3.1 - Displaying a Particular Folder

Let's now update it so that it points to our theme folder/directory:

{
	"folders":
	[
		{
			"path": "/C/wamp/www/wordpress/wp-content/themes/twentyeleven"
		}
	]
}

Now, keep an eye on the sidebar on the left and hit Ctrl+S (Cmd+S on a Mac) to save the file. The sidebar will be updated instantly with the new folder.

The next thing worth pointing out (if you haven't already noticed) is that the folders object is made up of an array literal (notated by the square brackets). If you've figured out that this means that we can specify more than one folder for our project, then you'd be absolutely correct. Let's go ahead and give it a go.

3.2 - Adding Multiple Folders

Fear not plugin developers, we care about you too, so let's add our plugins directory as well as the theme folder:

{
	"folders":
	[
		{
			"path": "/C/wamp/www/wordpress/wp-content/themes/twentyeleven"
		},
		{
			"path": "/C/wamp/www/wordpress/wp-content/plugins"
		}
	]
}

Save the file again, and you should see the following:


Step 4 - What Else Can We Do?

Sublime Text 2 is an amazing tool in your web development arsenal

I'm glad you asked! For starters, within each object in the folders array, there are a few different options available to us:

  1. path (string): As we've seen, lets you specify the folder/directory to show in the sidebar
  2. (string): Specify a name for the item in the sidebar
  3. file_exclude_patterns (array): Specify files to exclude
  4. folder_exclude_patterns (array): Specify folders to exclude

The path is already familiar to us, and the name is self explanatory, so let's dig in to the last two.

4.1 - Excluding Files

Admit it: there are some files that you will simply never edit, and these files are probably cluttering your project view. Instead, why don't we hide them, and then, on the very odd occasion that you actually do need to edit them, open them manually.

This bit comes down to preference, but here are the files that I typically exclude: '._', .bak, .ico, .sample, .swf, .tar, .tgz, files beginning with 'wp-' (let's not go editing the WordPress core files), and finally, .zip files. To do this, our file_exclude_patterns array should look as follows:

"file_exclude_patterns":[
	"._*",
	"*.bak",
	"*.ico",
	"*.sample",
	"*.swf",
	"*.tar",
	"*.tgz",
	"wp-*.php",
	"*.zip"
]

4.2 - Excluding Folders

If you don't want to specify each file individually, you can instead choose to exclude folders. This is the list that I generally use:

"folder_exclude_patterns": [
	"cgi-bin",
	"wp-admin",
	"wp-includes"
]

Note: You need to specify the file_exclude_patterns and the folder_exclude_patterns for each folder (see the final example below).


Step 5 - But Wait... There's More!

Other than the folders option, you can also specify two others:

  1. settings: Any of the usual list of settings that you would like to apply on a project specific basis can go in here (for example: tab_size).
  2. build_systems: This allows you to add project-specific build system (which is beyond the scope of this tutorial).

Our Final Project File

Here is an example of what your final .sublime-project file might look like (shortened slightly to be more succinct):

{
	"folders":
	[
		{ // theme
			"path": "/C/wamp/www/wordpress/wp-content/themes/twentyeleven",
			"name": "Twenty Eleven Theme",
			"file_exclude_patterns":[
				"._*",
				"*.ico",
				"*.swf"
			],
			"folder_exclude_patterns": [
				"images"
			]
		},
		{ // plugins folder
			"path": "/C/wamp/www/wordpress/wp-content/plugins",
			"name": "Plugins Folder",
			"file_exclude_patterns":[
				"._*", // you need to specify this *again*
				"*.bak",
				"*.sample",
				"*.tar",
				"*.tgz",
				"*.zip"
			],
			"folder_exclude_patterns": [
				"akismet"//,
				// add any other plugins you wish to exclude
			]
		}
	],
	"settings":
	{
		"tab_size": 4
	}
}

To Conclude

Note: If you're itching to further harness your Sublime Text 2, stay tuned for "Perfect Workflow in Sublime Text 2" - a free-to-all course from Tuts+ Premium, coming late September.

Sublime Text 2 is an amazing tool in your web development arsenal, and it's features and possibilities reach way beyond this tutorial. For more on what it can do, be sure to dig around in the documentation... you're guaranteed to find some real gems hiding away in there.

Links:

Related Posts
  • Code
    Tips
    New wp-config Tweaks You Probably Don't Know8 new wp config tweaks you probably didnt know about 400
    The wp-config.php file: One of the most loved WordPress feature for some, one of the worst nightmares for others. There are countless tips and tricks in a plethora of articles, and you can't get enough of them; however, this article is aiming to be different. In this article, we're going to get familiar with eight new wp-config tricks that are less known than functionality such as turning off post revisions, increasing the memory limit, or other similar features.Read More…
  • Code
    WordPress
    5 Quick Beginner-Friendly CSS Customizations That Make Your Blog Stand OutCssblog
    In this tutorial, we'll cover how to do five quick CSS customizations that make your blog stand out. Even if you don't know what CSS is, you'll be able to follow the instructions and change the standard look of your theme.Read More…
  • Code
    WordPress
    An Introduction To Deploying WordPress with MinaImage400
    As a PHP application, WordPress is usually deployed by a very old method: uploading files via FTP. We have some deployment tools, but they often requires some type of Ruby skill. For example, one popular, powerful tool is Capistrano, but it's also very heavy with many Ruby/Rails related features. I also think that it's little bit tricky to install Capistrano for a PHP developer without any Ruby knowledge. So what options do we have as WordPress developers? In this tutorial, I will introduce you Mina: A small, light tool aims to fast deployment and server automation.Read More…
  • Code
    Creative Coding
    Creating a TextMate Bundle to Easily Package Your WordPress ProjectTextmate bundle 400
    If you've developed a WordPress theme or plugin, then you know how fast your codebase can grow in just a short amount of time. You start off with just a few PHP, JavaScript and CSS files. Then you find yourself creating image assets and adding them to your codebase together with their Photoshop file counterparts. After a while you'll be including other third-party PHP libraries as well. Then when you're finally ready to ship your WordPress project, you'll end up having a web of multiple file types like *.php, *.css, *.scss, *.js, *.min.js, *.png and *.psd, maybe you'll have some hidden files like .DS_Store. You would eventually need to clean your codebase up before zipping them all up for your users. Normally, this just means that you duplicate your files, then scan each and every directory deleting all the unwanted files. You'd then archive your project then perhaps use a third party app to remove the hidden files. This article will teach you on how to automate this packaging process by building a TextMate Bundle that would do everything for us with a single shortcut key. [tip]This article teaches about some tips regarding TextMate, an awesome code editor for Macs. You can find more information on TextMate from MacroMate's website[/tip]Read More…
  • Code
    Theme Development
    Creating a WordPress Theme from Static HTML - Adding WidgetsCreating wordpress theme from html 400
    In this series, you've learned how to convert a static HTML file to a WordPress theme and edit the header file. So far you've: prepared your markup for WordPress converted your HTML to PHP and split your file into template files edited the stylesheet and uploaded your theme to WordPress added a loop to your index file added meta tags, the wp_head hook and the site title and description to your header file added a navigation menu. Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Uploading Your Theme to WordPressCreating wordpress theme from html 400
    In the first two parts of this series, you learned how to prepare static HTML for WordPress and to split your HTML file into a set of template files. You now have the beginnings of a theme, but unfortunately your files won't work as a theme just yet. For any theme to work, you need to tell WordPress about the theme, and you do this in the stylesheet. In this tutorial, you'll do that. Next, you'll upload your new theme to a WordPress installation and test it. Additionally, you'll create a screenshot of your theme so it's easier to work with in the WordPress admin.Read More…