By josh / August 7, 2014

Sublime Text power user tricks (plus how to debug your PHP like a boss)

One of my favorite programming jokes of all time goes something like this:

Some people, when confronted with a problem, think “I know, I’ll use regular expressions.” Now they have two problems.

It’s funny because it’s true.

But … Sometimes the alternative is painful enough that it’s worth figuring out a regular expression that will do the trick.

A few days ago, I got this email from Peter, a newsletter subscriber:

I need to find and replace several hundred of this list items. Each one is custom and each one needs only to be <li>. Here’s what they look like:

<li class="post-284 product type-product status-publish hentry first taxable shipping-taxable purchasable product-type-simple product-cat-8-botanical-wrap-tapers product-cat-beeswax-candles in stock">

It’s from WordPress. Each item starts out custom and ends with various custom classes. I don’t want to manually edit all 270 of them. I will go nucking futs.


Here’s my response to Peter’s plea:

Hey Peter! That sounds … horrible. 🙂

I think I’ve gotcha covered:

  • Open the Replace panel.
  • Enable Regex mode by clicking the little button on the far right with the *. symbol on it.
  • Enter this regular expression in the Find What field: class="[^>]*
  • Leave the Replace With field empty
  • Hit Replace All.

That regular expression matches the text class= plus all the text up to the closing > character.

It worked, and Peter was able to adapt the regex to remove several other obnoxious bits of HTML as well.

You don’t have to be a regex wizard to use them occasionally for editing tasks like this. Read a few intro-level blog posts to give you an idea of what they’re capable of, then just Google your way through when you have a specific problem to solve.

Sublime’s realtime search highlighting is a big help. You’ll see your results change as you modify the regex.

Add a color picker to Sublime

I’ve been a big fan of GutterColor since I first learned about it several months ago, but there’s a new plugin that picks up where GutterColor left off.

Like GutterColor, ColorHighlighter lets you preview hex colors in your stylesheets by putting colored dots in the gutter of your file. But it also provides inline highlighting of the hex color in your code using the appropriate hue.

And … It lets you launch your system’s color picker with a right click. Sublime users have been clamoring for a built-in color picker, and this looks like a good way to add one.

ColorHighlighter is available for ST2 and ST3. If you want to use the gutter icons, you’ll need to install an external tool.

Want better documentation for Sublime? Here’s your chance.

Sublime’s (lack of) documentation has always been a sore spot.

The team behind the Unofficial Sublime Text Docs has done a lot to improve that, and they’re looking to expand the docs and include better coverage of ST3.

To fund the writing, they need to collect $4,000 by August 9.

They’ve already raised more than $1,000. Think we can put them over the top? If everyone who gets this email gave just $1, we’d raise more than $150,000.

You can donate here:

As a bonus, through the end of the week, I’m going to donate $10 from every sale of Sublime Productivity to the Unofficial Sublime Text Docs project.

To become a more efficient developer today and support a great cause, go here:

Power user tips, debugging PHP and more

Wes Bos’ Sublime Text Power User slide deck

How to debug your PHP code in Sublime with Xdebug

Best of Sublime Text 3: Features, Plugins and Settings

Sublime Text packages for front-end web development

Sublime Text Tips & Tricks

About the author


Mark Hanna - August 28, 2014

That regular expression would also throw out a whole bunch of false positives if you have other tags that also have the class attribute, or if the class attribute isn’t the first attribute. It may have worked in this case, but a better approach would be to make use of the fact that the ? operator makes a regular expression non-greedy:

That will always select the entire opening tag of an element, without generating any false positives when other types of tag are also present.

Phunky - July 29, 2015

You don’t even need to resort to regex with ST, he could have just selected “<li" with his cursor then pressed ctl+cmd+d (or alt+f3 for non-OSX) to select all instances and then edited them all in one go.

ST's Multiple Selection is very powerful and something you should learn to abuse regularly.

Click here to add a comment

Leave a comment: