Best plugins for Sublime Text 2

By josh / July 22, 2012

One of the best things about Sublime Text 2 is the hundreds of available plugins that loyal fans have written. Here’s a list of some that you should install today.

Package Control

If you haven’t set up the Package Control plugin, go do it. Right now.

Package Control allows you to browse and install hundreds of plugins, and setting it up is as easy as running a small script in the Sublime Python console.

To install a plugin using Package Control:

  • Press Command+Shift+P on Mac OS X or Ctrl+Shift+P on Windows or Linux to open Sublime’s Command Palette.
  • Type install to highlight the Package Control: Install Package command.
  • Press Enter to open the package list.
  • Type part of a package name to see a list of matching packages.
  • Highlight the package and press Enter. You’ll see a confirmation message in Sublime’s status bar when the installation is complete.

Enhance the sidebar

By default, the Sublime Text 2 sidebar is weak sauce. You can browse through open files and folders, but if you right-click on a file, you’ll get a menu with just a Close command.

The SideBarEnhancements plugin fixes this by beefing up the right-click menu, adding a number of commands that you’d expect like Copy, Paste and Delete, as well as Open in Browser, New File … and New Folder …. You can also define your own custom commands, maybe Open in Chrome or Open Command Prompt Here.

Quickly create new files

While it’s nice to have the ability to create new files with a right-click, menus are slow when you’re slinging code. The AdvancedNewFile plugin provides a simple prompt that allows you to generate new files by typing out your desired path and file name. Any nested directories that you include in the path will be generated if they don’t already exist.

Speed up HTML coding

I’ve covered Emmet in a previous post, and it’s still every bit as awesome. The basic concept behind Emmet is simple. When you’re writing HTML, XML or some similar language that consists of nested tags, Emmet allows you to define the tag hierarchy in a single line, using a CSS-like syntax. The plugin expands your one-liner to create the appropriate structure. For example, this:

 div > ul > li*3 

Becomes:

 <div> <ul> <li></li> <li></li> <li></li> </ul> </div> 

There’s a bit more to it, so install the plugin and check out the documentation on the Emmet project site.

Work with source control

I love working on the console as much as anyone, but I also prefer to avoid constantly switching apps when I’m cranking out code. Integrating version control into my text editor means fewer interruptions to my workflow.

The Git plugin brings some useful Git commands into Sublime, and SublimeHg does the same for Mercurial. The Gitignore plugin makes it easy to pull down boilerplate code>.gitignore files from GitHub, solving a problem that’s annoyed me for a while.

Help for bloggers

If you use Sublime for non-coding tasks like blogging, two handy plugins are MarkdownEditing and WordCount.

MarkdownEditing provides syntax highlighting and some handy text editing features, and WordCount tells you when you’ve gone on long enough, displaying the word count in the status bar.

Bonus Tip: View installed plugins

It’s easy to lose track of what you’ve installed, or forget the keyboard shortcut required to trigger some plugin that you only use occasionally. Fortunately, it’s easy to review your list of installed plugins and read their documentation using the Browse Packages command.

To view installed plugins, select Sublime Text 2 | Preferences | Browse Packages on OS X or Preferences | Browse Packages on Windows and Linux. The system file explorer launches, displaying the folders for all installed packages. Most packages include a README file that includes usage instructions and keyboard shortcuts.

P.S. Do you love using Sublime to get more done? Sign up for the free Sublime Text Tips newsletter to get more tips every week. As a bonus, I’ll send you a 12-page guide to Sublime’s advanced editing features so you can start using Sublime more effectively–today.

7 handy text manipulation tricks in Sublime Text 2

By josh / June 11, 2012

Note: Get this free download and see how to improve your productivity with Sublime Text (plus free email tips).

One of my favorite things about using Sublime Text 2 is that it rarely leaves me pining for other text editors. Sublime incorporates most of the must-have features I’ve come to expect from an editor.

Text manipulation in Sublime is no exception. Here are 7 of my favorite Sublime features that take the tedium out of coding.

Note: I’m using my MacBook today, so the keyboard shortcuts are the OS X friendly versions. The same commands are available for Windows and Linux, but the bindings will likely be a little different. Hunt through the menus to find the bindings for your specific platform.

Joining lines

I’ve probably wasted more hours of my life than I care to admit deleting extraneous white spaces when merging two lines of indented code. When I learned how to join lines in Vim and Notepad++, I couldn’t believe I’d been pounding Backspace unnecessarily.

Sublime Text 2 employs theCommand j shortcut to join the line below your cursor to the one you’re currently editing.

Swapping lines

Another common line operation is swapping the position of two lines, or moving a block up or down in the file. Copy and paste is one option, but if you’ll only be moving the lines a short distance, it’s quicker to hit Control Command Up or Control Command Down. This works on the current line with no highlighting required, or you can highlight multiple lines to shift an entire code block.

Duplicating and deleting lines

Deleting and copying entire lines without highlighting is simple. Use Control Shift k to delete the current line. Shift Control d duplicates the current line and places the copy below the cursor.

Wrapping paragraphs

I like to keep my lines fairly short, so I have a ruler set at column 100. This is great for manually wrapping lines, but sometimes when I’m writing blog posts, I’ll edit a paragraph and find that my original wrapping is no longer suitable. Sublime makes it painless to fix this. Just select a block of text and hit Command Option q, and Sublime will rewrap the entire paragraph to fit within the ruler.

Toggling comments

Sublime gracefully handles comments in a variety of languages. To comment out a single line of code, position the cursor on the line and hit Command /. In languages that have line-level comments, such as JavaScript, this will use a line comment; in languages that only support block comments, such as HTML or XML, it wraps the line with block comments. The same shortcut can comment out multiple selected lines as well.

For languages that support block comments, the Option Command / shortcut will wrap block comments around a selection.

Dealing with capitalization

Removing or adding capitalization manually is tedious. Sublime supports several features for dealing with capitalization chores, available under the Edit > Convert Case menu.

The Swap Case option inverts the casing of all selected text, while Title Case capitalizes the first letter of each word.

Upper, which is also mapped to Command k, Command u, capitalizes all selected letters, while Lower, mapped to Command k, Command l, does the opposite.

Reordering lines

In the past, I’ve occasionally found myself copying lines of text into a spreadsheet program to sort them. Sublime has this covered, though, with several simple sorting algorithms.

To perform a simple alpha sort, select the lines to be sorted and hit F5. This option ignores capitalization. Hitting Control F5 will sort lines starting with capital letters first, then alphabetize lines starting with lowercase letters.

The Permute Lines menu options provide a few more ways to sort, including Reverse, which sorts in reverse alpha order, starting with lowercase letters, Unique, which removes duplicated lines, and Shuffle, which sorta kinda randomizes the text.

P.S. For more editing tips and tricks enhance your workflow in Sublime, check out the Sublime Text Tips newsletter:

http://sublimetexttips.com/newsletter

Stop hand coding, start Zen Coding

By josh / May 30, 2012

This week at my day job my coding partner and I tackled a straightforward but tedious backlog item: writing an XSLT stylesheet to transform an in-memory representation of a customer’s bill into an HTML version for display on our site.

We decided that a logical first step would be to create a static HTML representation of the invoice, which we would later slice up into the XSLT file. A CSS-based layout seemed impractical, so we dusted off our old school table-nesting skills and got to work.

I’ve largely repressed the memories of my days struggling with table-based layouts in Dreamweaver’s WYSIWYG editor, but the prospect of this exercise brought them rushing back. I braced for the pain …

And then I remembered that I’d installed the ZenCoding plugin for Sublime Text 2, and thinking it might help, we gave it a try.

The Zen Coding concept is beautifully simple: You declare a series of nested HTML or XML elements using an intuitive and expressive inline syntax, and the plugin generates the markup for you.

Here’s a quick example:

div>ul>li*5

Which expands to:

<div>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

That’s nice, but when you’re doing table-based layouts, it’s stunningly productive:

table>tr*3>td>table.mysubtable>tr>td*5

Which becomes:

<table>
  <tr>
    <td>
      <table class="mysubtable">
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>
      <table class="mysubtable">
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>
      <table class="mysubtable">
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

The static template for our invoice ended up being about 500 or 600 lines of HTML, and we were able to finish it in an afternoon. An unexpected benefit of using Zen Coding was that we had very few issues with missing or incorrectly nested tags, which is usually one of the most frustrating aspects of complex table layouts.

I’ve just scratched the surface of what this plugin can do—there are CSS features that I need to explore, as well as a feature that lets you wrap tags around the currently selected text. It’s equally adept at spewing out arbitrary XML elements, as I discovered when we turned to slicing the HTML markup up into the XSLT file.

Zen Coding plugins are available for many popular editors, including:

  • Visual Studio
  • vim
  • Notepad++
  • emacs
  • TextMate
  • Aptana
  • EditPlus

You owe it to yourself to find one for your favorite text editor.

Here’s a video that demos more Zen Coding goodness:

For more text editor wizardry, get the Sublime Text Tips newsletter today:

http://sublimetexttips.com/newsletter

1 4 5 6
Page 6 of 6