Overriding Sublime’s default syntax highlighting

By josh / September 5, 2013

Sublime does a decent job of guessing what syntax highlighting to apply when you open a file, but it can’t quite read your mind. (Although I’m thinking of submitting a UserEcho request for ST4 … anybody with me?)

So it has no way of knowing that you want .txt files to always open with Markdown highlighting.

Or that those .html files are really Twig templates, and you want Twig syntax highlighting, dangit.

Fortunately, there’s a simple fix: Sublime allows you to specify what syntax to use for a given file extension.

To force Sublime to open all .txt files with Markdown highlighting, open a file with a .txt extension, then click View | Syntax | Open all with current extension as … | Markdown.

P.S. For more Sublime Text power user tricks, go to:

http://sublimetexttips.com/newsletter

Get unlost with Sublime’s new Jump Back and Jump Forward commands

By josh / August 24, 2013

It’s easy to get lost when you’re navigating code. You’re working your way down a trail of function calls, skimming, scanning, getting the lay of the land, when …

Bam. One wrong keystroke and you’re in the middle of an unfamiliar file, buried deep in who-knows-what folder.

The new Jump Back and Jump Forward commands in Sublime Text 3 are perfect for this situation. They make it easy to retrace your footsteps and see how the foreign code relates to what you already know.

Jump Back and Jump Forward work like the back and forward buttons in a web browser, but you’re navigating between edit points rather than web pages. Every time you open a new tab or insert your cursor on a line of code, Sublime adds that location to a history stack.

To use Jump Back to return to a previous edit point, click Goto | Jump Back. To navigate forward, click Goto | Jump Forward.

Better yet, learn the keyboard shortcuts: Alt+- and Alt+Shift+- on Windows and Linux or Ctrl+- and Ctrl+Shift+- on OS X.

Jump Back and Jump Forward are also great for toggling back and forth between related sections of code in a long file, such as when you’re simultaneously modifying a function’s definition and its usage in that massive jQuery plugin file, or to switch between multiple related files, such as an HTML file and its style sheet.

For more Sublime time-savers, get the newsletter today:

http://sublimetexttips.com/newsletter

Make Goto Anything even more awesome with this simple trick

By josh / August 15, 2013

Goto Anything lets you open any file in a project with just a few keystrokes—it’s undeniably one of Sublime’s best features. But it gets better.

You can combine Sublime’s file-specific Goto commands like Goto Line and Goto Symbol with Goto Anything to instantly navigate to any line of code in your project.

You know how some of the Goto commands just open an input overlay with a prefix character, like the : for Goto Line?

By entering that special character when you’re using Goto Anything, you can open a file and jump right to a line, symbol or search term.

Typing a : after the file name opens the file at the specified line number, so entering index:42 would open index.html at line 42.

When you enter an @ after a file name, the options list changes to display a list of symbols available in the file. For example, typing script@ren might open script.js and jump to a function named render.

If you append the # symbol to a file name, the options list displays a list of keywords in the file. So inputting mailspec#send runs a search in mailbox.spec.js and jumps to the first match for the term send.

And naturally any Goto commands that you combine this way support the fuzzy matching goodness you expect from Sublime.

For more tips and tricks like this, get The Sublime Text Tips Newsletter:

http://sublimetexttips.com/newsletter

Quick text cleanup with Sublime’s new Invert Selection command

By josh / July 30, 2013

Sublime Text 3 introduces the new Invert Selection command, and by combining it with multi-select or regular expressions and a little creativity, you can quickly accomplish tasks like zapping unwanted lines in a data file or stripping HTML tags from a block of text.

Invert Selection is useful in scenarios where you want to delete more text than you want to keep, or where it’s just simpler to select the text you’d like to retain.

As its name implies, the command will deselect any text that was highlighted and simultaneously select the text that was not highlighted.

Let’s look at a few scenarios where Invert Selection might be handy.

Clean up CSV data

Even with Sublime’s multi-select, it’s often a pain to select text for deletion. To extract first names from the following CSV list, you could use multi-select to carefully highlight the last name and comma in each row:

Knope,Leslie
Swanson,Ron
Haverford,Tom
Perkins,Ann
Ludgate,April

But a simpler alternative is to highlight all the first names by double clicking them while holding down Ctrl (Windows and Linux) or Command (OS X). Then click Selection | Invert Selection to highlight the unwanted text for deletion.

Filter unwanted lines

By combining Find and Invert Selection, you can easily filter out lines that don’t match a pattern, such as deleting everyone not named Josh in the following list:

Knope,Leslie
Earl,Josh
Swanson,Ron
Haverford,Tom
Perkins,Ann
Turner,Josh
Ludgate,April

Open the Find panel and enable the Regular expression option, then enter the following regular expression, which matches all lines containing the word Josh:

^.*Josh

Click Find All to highlight the two matching lines. Run Invert Selection, then click Edit | Text | Delete Line to eliminate the non-matching lines.

Strip HTML tags

With another regex, Invert Selection can remove HTML tags from a block of text. Let’s clean up a section of the Sublime release notes:

<span style="font-size: 10pt">Release Date: 8 July 2013</span>
    <ul>
  <li>
    Removed expiry date
  </li>

  <li>
    Backported various fixed from Sublime Text 3
  </li>

  <li>
    Improved minimap click behavior. The old behavior is available via the <tt>minimap_scroll_to_clicked_text</tt> setting
  </li>

  <li>
    Added <tt>copy_with_empty_selection</tt> setting, to control the behavior of the copy and cut commands when no text is selected
  </li>

</ul>

Launch Find and make sure the Regular expression option is enabled. Enter the following regex, which matches text that’s wrapped with HTML tags:

(?&lt;=>)(.+?)(?=&lt;)

Click Find All to select the text between the tags. Then run Invert Selection, highlighting the tags for deletion.

Now that your text is all fresh and clean, sign up for the Sublime Text Tips newsletter to learn what else you can do with it:

http://sublimetexttips.com/newsletter

Sublime Text 3: Worth the upgrade?

By josh / July 25, 2013

You’ve heard the buzz about the Sublime Text 3 beta: Goto Definition and Goto Symbol? Across whole projects?

Yes, please!

But when you head over to the Sublime site, you realize those new features come at a cost: You’re going to have to fork over your hard-earned cash to get the upgrade. And the cost has increased to $70.

Gulp.

Is the upgrade worth it?

In the process of updating Sublime Productivity for Sublime Text 3, I’ve combed through the release notes and compiled a list of new features, tweaks and improvements that have already been released.

This checklist isn’t exhaustive, and I haven’t yet explored all these changes.

But since there’s so much curiosity about ST3, I decided to put the list out there anyway to help you make the decision about whether to upgrade.

So let’s see what’s new, shall we?

You’ve probably already heard about the major new features

Most of the buzz surrounding the release of ST3 has focused on these big headliners:

  • Faster startup. Like way, way faster.
  • Symbol indexing across projects, which allows you use Goto Definition and Goto Symbol to jump to related code in other files. Pretty huge.
  • Python 3.3 update. (Yay?)

But there are dozens of small improvements that you’ll appreciate day to day

While those are welcome additions, the Sublime team has added dozens of less flashy features and improvements that’ll make Sublime nicer to work with.

Here’s a partial list:

  • Support for high DPI screens
  • PHP formatting improvements
  • atomic_save setting that respects file permissions on OS X and Linux
  • Improvements to the side bar right-click menu
  • New Jump Forward and Jump Backward commands
  • Better HTML support, including attribute completion, auto indentation, and automatic tag closing
  • New Invert Selection command
  • Fields in find and replace panels auto resize for multi-line strings
  • Auto updating for Windows, OS X
  • More OS-native look for dialogs
  • Support for deleting files from the sidebar and closing any associated open tabs
  • New Paste from History command
  • Find panel preserves a history of previous searches and allows you to view them via a dropdown arrow
  • Right arrow will open file in Goto Anything overlay
  • Better performance for Replace All command
  • Transposed character matching in Goto Anything, autocomplete
  • Better pane management
  • Files preview in a temporary preview tab
  • Multiple workspaces for one project
  • New follow_symlinks setting for project folders
  • More intuitive syntax for build systems
  • Support for canceling builds

And many of the benefits are still to come

The Sublime team is also improving the APIs available to plugin developers, and we’re sure to see new plugins emerging that take advantage of these capabilities.

Speaking of plugins …

Will upgrading break all my plugins and make me sad?

Most plugins will need some updates to work with Sublime Text 3. The good news is that many have already been updated.

Will Bond, author of the Package Control plugin, is maintaining a list of ST3-compatible plugins.

If your favorite isn’t listed yet, let the plugin’s author know, or better yet, see if you can help out with the update.

What is the upgrade going to cost, anyway?

The short answer: It depends when you bought your license. The Sublime team explains in this blog post.

P.S. Even if you’re not ready to upgrade, you probably want to learn how to use Sublime better. Start here today:

http://sublimetexttips.com/newsletter

Fix Sublime Text’s quirky PHP, SASS variable selection

By josh / July 18, 2013

Editing PHP and SASS variables is awkward in Sublime Text. Both languages use a $ prefix for variables, but Sublime pretends not to know that.

When you try to select a variable, either by double-clicking it or with your favorite keyboard shortcut, Sublime selects the text portion of the variable but not the prefix. This isn’t too bad if you just want to change the variable’s name, but for other tasks it’s annoying.

The same holds true for other languages, like the SASS mixin @ and jQuery CSS selectors.

Fortunately, there’s an easy fix. Sublime’s word_separators setting governs which characters are considered to be part of a word and which are “word boundaries.”

The default list of word separators includes many characters that are used as prefixes in different languages:

"word_separators": "./\()"'-:,.;<>~!@#$%^&*|+=[]{}`~?"

You can override this setting in your user preferences, but the best approach is creating language-specific settings files. This enables you to tweak Sublime’s selection for PHP files to include the $ when selecting variables, while in JavaScript files you could tell Sublime to include # to make it easier to work with jQuery selectors.

Here’s a short screencast that shows how to create a language-specific settings file for PHP and override word_separators to allow selection of $ prefixes. The same principle works for other languages as well.

I cover more tweaks like this in the Sublime Text Tips newsletter. Sign up today at:

http://sublimetexttips.com/newsletter

How to wrap selected code with a snippet in Sublime Text

By josh / June 26, 2013

Reader Simon asks: What is the easiest way to wrap some existing code in an if statement, preferably using built-in Sublime features?

Snippets are the way to go here, but not all snippets support wrapping existing code. Simon didn’t mention what language he’s interested in, so for this example we’ll look at the JavaScript if snippet, which does support wrapping.

To wrap this snippet around a block of code, first select the lines you’d like to wrap, then launch the Command Palette and type snip if. Press Enter to insert the highlighted snippet, which wraps the selection.

(Prefixing the snippet name with snip restricts the Command Palette matches to snippets and allows you to use fuzzy matching to quickly find the appropriate snippet.)

Wrapping snippets around existing text with the Command Palette is a little awkward. If you find yourself using the same snippets repeatedly you can define a custom keybinding for your favorites.

Here’s a keybinding that binds Ctrl+Shift+I to the if snippet:

 { 
   "keys": ["ctrl+shift+i"], "command": "insert_snippet", 
   "args": { "name": "Packages/JavaScript/if.sublime-snippet" } 
 }

P.S. Ready to take the next step to Sublime Text mastery? Go here:

http://sublimetexttips.com/newsletter

Sublime’s secret selection mode

By josh / June 18, 2013

You’ve done it, I’ve done it: Once in a while, everyone copy-pastes some code from the Internetz. No shame in less typing, right?

Only now your carefully formatted code has a block with line numbers and extra indentation:

$(function() {
  1. function typeLess() {
  2.    console.log("Copy-and-paste rulez!");
  3. };
});

Doubtless you could fix this with some fancy multi-line footwork. But wouldn’t it be easier to just lasso all of those extraneous characters and whack ’em in one go?

Notepad++, TextMate, Visual Studio and many other editors support a block selection mode that lets you “drag a square” to do just this.

But guess what? While multi-edit hogs all the glory, Sublime also features a column selection mode that’s quite useful in its own right.

To use Column Selection with the mouse on Windows and Linux, click and hold the middle mouse button (or scroll wheel) while dragging around the desired selection. On a Mac, press and hold Option while dragging.

Or for you keyboard jockeys, you can press Ctrl+Alt+Down Arrow or Ctrl+Shift+Up Arrow to enter column selection mode on Windows or Linux, or Ctrl+Shift+Down Arrow or Ctrl+Shift+Up Arrow on your Mac keyboard. Shift+Left Arrow and Shift+Right Arrow will expand the selection horizontally.

I’ve created my own mouse configuration on my Windows laptop that lets me use Ctrl+Shift+Left Click instead of trying to click and hold my scroll wheel.

If you’d like to use customization as a starting point, just create a file called Default (Windows).sublime-mousemap in your User directory, then add the following:

[
  // Mouse 3 column select
  {
    "button": "button1", 
    "count": 1, 
    "modifiers": ["ctrl", "shift"],
    "press_command": "drag_select",
    "press_args": {"by": "columns"}
  }
]

Mac fans can change their mouse behavior with a custom Default (OSX).sublime-mousemap file.

P.S. For more ways to streamline your Sublime Text workflow, check out:

http://sublimetexttips.com/newsletter

Win a free Sublime Text license

By josh / June 11, 2013

Note: This contest is over, but I offer it periodically to Sublime Text Tips newsletter subscribers. Sign up here today so you can participate next time:

http://sublimetexttips.com/newsletter

Sublime Text is a key part of your daily workflow. You couldn’t live without it and the dozens of plugins that let you tweak and customize to your heart’s content.

But there’s that “trial mode” message again, prompting a little stab of guilt.

I should pay for a license.

You’re not a freeloader–you like to support programmers who make the tools you love.

But $70 is a lot to shell out …

I’m giving away a full Sublime Text license this month.

This contest is only for subscribers to my Sublime Weekly newsletter.

Are you going to spam me?

No, I promise not to spam you, and I won’t share your email address with anyone.

You’ll get the free Sublime Weekly newsletter, which includes great Sublime tips and links to helpful articles and plugins I’ve stumbled across. Still not sure? Check out a previous edition.

I’ll also occasionally send updates or announcements about other Sublime Text-related projects I’m working on, like my Sublime Productivity ebook.

But I already get the newletter!

Great, then you’re eligible. No additional steps required!

Will this license cover the Sublime Text 3 upgrade?

Yes, it’ll be good for Sublime Text 3.

I’ve already paid for a Sublime license!

No problem–I’ll reimburse you if you win.

When will you announce the winner?

I’ll announce the winner in the June 27, 2013 edition of the newsletter.

What is the deadline for entering?

The cutoff is midnight Eastern Time (US & Canada) in June 25, 2013.

How to troubleshoot broken Sublime Text plugins

By josh / June 4, 2013

Plugins: Great when they work, exasperating when they crash or just silently fail to do your bidding.

While writing the PHP workflow section of Sublime Productivity, I’ve spent a good bit of time configuring and troubleshooting new plugins.

Here are a few tips that have helped me when things didn’t go according to plan:

  • If Sublime is crashing, turn off as many plugins as possible, then re-enable them one at at time. You can toggle plugins on and off individually with the Package Control: Disable Package command.
  • When a plugin just refuses to work, open the Sublime console and look for suspicious messages.
  • Many plugins have a debug setting that prints more info to the console. This can be particularly useful for plugins that depend on external tools like PHP or Node. Look for it in the plugin’s default sublime-settings file.

Plugin of the Week

Come on, ‘fess up: At some point, you’ve copied a list of items into Excel so you can number them.

The [InsertNums plugin][] eliminates the need for that little kludge.

To number a list with InsertNums, select the list, then use Split into Lines to insert a cursor on each line. Press Home to jump to the beginning of each line, then press Ctrl+Alt+N to add ascending numbers to each line.

How-To & Interesting Articles

Add an Open in Sublime Text 2 option to your OS X right-click menu.

Make Sublime a bit more like emacs.

Run Rails tests from Sublime.

Run JavaScript tests with this plugin.

P.S. Want to improve your mastery of Sublime Text? Start here:

http://sublimetexttips.com/newsletter

How to quickly add a new Sublime Text snippet

By josh / May 21, 2013

Reader Lucas C. recently converted from TextMate. He writes:

How am I supposed to quickly add a snippet in Sublime when I realize I need it, when I have to Google the XML syntax first? Also, why can’t I get a simple list of snippets that are defined for the current language? That all seems a bit magical to me.

The snippet syntax is hard to remember, but Sublime has a built-in template that does most of the work for you. Just select Tools | New Snippet from the application menu and you get a new tab with all the boilerplate XML, as well as an example that shows how to use basic placeholders.

You can also easily view a list of snippets available by typing snippet in the Command Palette. The snippets are filtered based on the current file syntax, so if you’re editing a Ruby file you won’t see PHP snippets.

Plugin of the Week

The [JavaScript Refactor plugin][] brings many of the conveniences of a full-fledged IDE to Sublime. You can double-click on a variable or function to jump to its definition, easily rename variables and functions, introduce variables, and extract blocks of code to create new methods.

How-To & Interesting Articles

Create new GitHub gists from Sublime

Running Sublime from Dropbox

Nice roundup of Sublime tips and plugins

P.S. Want to improve your mastery of Sublime Text? Start here:

http://sublimetexttips.com/newsletter

How to move a file from the Sublime Text side bar

By josh / May 21, 2013

A few months ago, a reader wrote asking whether there’s an easy way to move files around in the Sublime side bar, since you can’t drag and drop them.

At the time, I suggested using the Reveal command from the SideBarEnhancements plugin to open the folder in Windows Explorer or Finder, then do the reorganization in the file browser. Pretty clumsy.

If you just want to move a single file, though, there’s a better way. Use the Rename or Move commands provided by SideBarEnhancements. Both will create a new directory if you specify one that doesn’t exist.

Rename is a little nicer to work with, as it shows only the file name, not the entire path. To move the foo.txt file to a new subfolder named bar, enter bar/foo.txt.

Rename also works with relative paths. To move the same file back out of the bar directory, enter ../foo.txt.

Hat tip to @mllocs for tweeting about this one.

Plugin of the Week

Sublime Alignment, another plugin by the irrepressible Will Bond, fixes one of my quibbles with Sublime’s multi-select mode.

Since the cursors stop at the end of a line, it’s easy to get them out of sync with each other when editing a group of lines.

Sublime Alignment provides a keyboard shortcut to line them back up. Yay!

How-To & Interesting Articles

Paul Irish discusses his Sublime workflow for JavaScript development

Are your favorite plugins compatible with the Sublime Text 3 beta?

Convert selected JavaScript to CoffeeScript

How I sync my Sublime installation across platforms with Dropbox

P.S. Ready to take the next step to Sublime Text mastery? Go here:

http://sublimetexttips.com/newsletter

Create and Open GitHub Gists from Sublime Text

By josh / May 21, 2013

I use GitHub gists when I want to save a snippet of code for easy reuse, or to save readers of my Sublime Productivity ebook from having to retype code examples.

Creating gists through GitHub’s web interface is a bit of a pain, though. I used to bounce back and forth between Sublime Text and the GitHub site a few times to tweak the formatting of my gist before I was happy with it.

Now I do the whole process without leaving Sublime, using the sublime-github plugin, and I created a video walkthrough that’ll show you how to set up and use the plugin:

Creating a Gist

Creating a new gist is as simple as highlighting the code you want to include and executing the github public gist command from the Command Palette.

The first time you run the plugin, it’ll prompt you for your GitHub credentials, which it uses to get an access token from GitHub.

Next, enter a description for your gist and a filename, and sublime-gist publishes your gist and copies the URL to your clipboard for easy sharing. Brilliant!

Managing and Sharing Your Gists

The sublime-github plugin also gives you several commands for viewing and editing your gists.

Type github in the Command Palette to view a list of all commands you can perform, which include:

  • Opening a gist in your browser
  • Copying a gist URL to the clipboard
  • Opening a gist directly in Sublime

P.S. If you use Git with Sublime, there’s another great plugin that you should be using. Sign up here for the details:

http://sublimetexttips.com/newsletter

Clean up stray HTML tags with this plugin

By josh / May 16, 2013

Dave writes:

When working on HTML, I’ll end up with an extra closing div tag sometimes. I wish there were a quicker way to find it other than manually searching or that Sublime would somehow know when there are too many closing tags present and alert me immediately.

Yeah, I hate this too. At least we’re not worrying about properly nested table tags anymore.

The Tag plugin adds a tag linting feature that makes it easier to track down strays.

With the plugin installed, just launch the Command Palette and enter tag lint. You can check the whole document or highlight a chunk of HTML to limit the error checking to a troublesome bit of markup.

Plugin of the Week

The ElementFinder plugin allows you to search an open HTML document by CSS selectors. Enter a selector and the plugin highlights all matching tags in the document.

How-To & Interesting Articles

Upgrading to Sublime Text 3

Exporting your Sublime Text configuration and installed packages.

Create your own custom splitscreen layouts.

Learn something? There’s more here:

http://sublimetexttips.com/newsletter

How to delete lines that start with a given set of characters

By josh / May 9, 2013

Subscriber Alex recently asked whether there’s a good way to remove lines starting with a given set of characters.

I’m not aware of a built-in feature that does exactly that in one step, but it’s pretty easy to accomplish.

Here’s how:

  • Click Find | Find.
  • Switch to regular expression mode by clicking the button labeled with a tiny asterisk (it’s the leftmost one).
  • Enter ^, followed by your search term. The caret mark will restrict searches to only matches that fall at the beginning of a line.
  • Click Find All.
  • Use Expand Selection to Line to select all of the lines.
  • Hit Delete.

Not as graceful as a single click or keyboard shortcut, but it’ll get the job done.

Plugin of the Week

I wish I’d had a tool like the Sublime phpcs plugin when I was pecking out my first lines of PHP. Out of the box it’ll check your code for errors every time you save a file, and it gives you a Command Palette-style list so you can jump from typo to typo. It’ll also run other useful code checkers like PHP Code Sniffer, PHP Mess Detector and Scheck.

How-To & Interesting Articles

Starting a New WordPress Plugin with Sublime Text

Sublime Text Resources for Front End Developers

Setting Up Sublime Text

P.S. You can get more great Sublime tricks in the Sublime Text Tips newsletter. Sign up here today:

http://sublimetexttips.com/newsletter

Ack! Where’d My Sublime Text Shortcuts Go?

By josh / May 7, 2013

Sublime Plugin Fever. If it hasn’t hit you yet, it probably will.

A blog post pops into your news feed: “The Ultimate Clojure-Erlang-Node.js-CoffeeScript Workflow in Sublime Text!” Wow, must read. The author lists off nine awesome plugins that have doubled his productivity, and 30 minutes later you’ve installed and test-driven all of them. They’re everything you’d hoped and dreamed they would be. Happiness!

Two hours roll by, and you’re tweaking a tricky bit of Node.js code. You reach for your favorite keyboard shortcut for some help. Nothing. Fat fingers? Try again. Nope, it’s just not responding.

This is where Sublime Plugin Fever gets ugly: conflicting keyboard shortcuts. There are only so many keys on the keyboard, and sometimes a new plugin will eradicate your favorite bindings. When that happens, it’s a pain to track down which package is causing the conflict.

Fortunately there’s an easy way to tell which plugins are stomping all over your favorite keyboard shortcuts, and ironically it comes in the form of another plugin: FindKeyConflicts.

Once you’ve installed FindKeyConflicts, you can invoke it via the command palette by entering “FindKeyConflicts” to filter down to the relevant commands.

You can instruct FindKeyConflicts to show a list of all available key bindings, or to only enumerate bindings with conflicts. You can also restrict it to limit the conflicts displayed to those involving specific plugins, and you can even configure it to always ignore certain plugins (the Vintage mode plugin might be a good candidate for this).

FindKeyConflicts offers a choice of output formats: It can display bindings in a command palette-like interface that supports filtering and fuzzy matching, or it can spit out a textual representation to a new tab in Sublime. Each shortcut includes a list of the plugins that are vying for the binding.

The only small drawback I’ve noticed when using this plugin is that it takes a minute or so to run when you execute one of the commands, as it has to run through all of the keybinding files for your installed packages. Be patient—it’s worth it!

FindKeyConflicts is available via package control.

To learn more about shortcuts and other Sublime features, check out http://sublimetexttips.com/newsletter.

Starting a New WordPress Plugin with Sublime Text

By josh / May 7, 2013

Starting a new project is always fun — no unfamiliar code to grok, no need to worry about breaking existing features.

Then … the setup begins

Copy and paste the files from a previous project.

Delete a bunch of files.

Whack blocks of unneeded code.

Update jQuery.

Download and unzip libraries from Github.

“Yay!” turns into “Ugh …”

What if you could set up a new project in seconds, without visiting a dozen different websites and Github repositories? And all from the comfort of your favorite editor?

Here’s how to quickly bootstrap a new project in Sublime Text. The example involves creating a new WordPress plugin, but the principles apply to any project.

Fetch installs libraries for you

Fetch is a brilliant, flexible plugin for Sublime that makes it a snap to grab the latest versions of your favorite open source libraries and frameworks.

Once you install and configure Fetch, you can install the latest version of jQuery from Sublime with a simple command:

fetch-file-list

Installing Fetch

If you haven’t already installed Package Control, you’ll need to do that before you can set up Fetch.

Once you have Package Control installed, launch the Command Palette, type install package, hit Enter, then type fetch. Hit Enter one more time and Package Control will install Fetch for you.

Configuring Fetch

Fetch can download either single files or packages, which are just zip files containing several files.

Fetch comes preconfigured with one file, jQuery, and one package, HTML5 Boilerplate. Adding more files and packages is just a matter of making a quick change to Fetch’s configuration file.

Let’s configure Fetch to download WordPress Plugin Boilerplate, which makes it easy to get up and running when you’re starting a new WordPress plugin.

First, launch the Command Palette and type fetch: manage, then press Enter to open the Fetch configuration file in a new tab.

The jQuery and HTML5 Boilerplate entries illustrate how to add your own files and packages:

{
  {
    "files":
  {
    "jquery": "http://code.jquery.com/jquery.min.js"
  },
  "packages":
  {
    "html5_boilerplate": "https://github.com/h5bp/html5-boilerplate/zipball/master"
  }
}

Notice that in both cases, the links allow you to always get the latest versions of these projects. The jQuery link isn’t tied to a specific version of the library, and the Github link always gets the newest commit to the master branch of HTML5 Boilerplate.

Also note the zipball portion of the HTML5 Boilerplate link. When you want to download a collection of files, Fetch expects a link to a zipped archive, which it will then extract for you to a folder of your choice. Github allows you to download the latest version of any project by appending /zipball/master to the project’s URL, which works well with Fetch.

Here’s the Fetch settings file after adding the WordPress Plugin Boilerplate package:

{  
  {
    "files":
  {
    "jquery": "http://code.jquery.com/jquery.min.js"
  },
  "packages":
  {
    "html5_boilerplate": "https://github.com/h5bp/html5-boilerplate/zipball/master",
    "wordpress_plugin_boilerplate": "https://github.com/tommcfarlin/WordPress-Plugin-Boilerplate/zipball/master"
  }
}

This example is available for download as a gist.

Using Fetch

Now let’s use Fetch to bootstrap a new WordPress plugin.

Launch the Command Palette and type fetch package, press Enter, then type wordpress and hit Enter again.

Fetch prompts you to enter the path where you’d like to unzip your package:

fetch-choose-file-path

After you type a path and press Enter, you’ll see the download progressing in Sublime’s status bar.

Once the download completes, open Windows Explorer or Finder and browse to the path you specified, where you’ll see a plugin-boilerplate folder. Rename that folder to whatever you’d like to call your plugin, then drag it into Sublime to open the folder in the side bar.

That’s it—you’re ready to go. You’ll probably want to save this folder as a new Sublime project by clicking Project | Save As … so you can easily reopen it later.

fetch-completed-project

Note: Having to open your file browser and rename the plugin folder is a little clumsy, but that’s due to a quirk in the WordPress Boilerplate Plugin project, not a shortcoming of Fetch. The WordPress Plugin Boilerplate project uses the plugin-boilerplate subfolder to organize all of the php, js and css files and folders, instead of keeping them in the project’s root directory. Fetch expects the files to live in the root directory. The HTML5 Boilerplate project is structured this way, and you can install it right into the root directory of an existing Sublime project, providing a much smoother workflow.

P.S. That’s not the only way to smooth out your workflow in Sublime. Get the Sublime Text Tips newsletter to see how:

http://sublimetexttips.com/newsletter

How to view file changes in a git-style diff

By josh / May 2, 2013

It’s late in the day, and the website is coughing up 500 errors. You hate to do it, but there’s no choice: You’re going to have to edit a file on your production server.

You pop it open, make a few changes. Your fingers reach for the save shortcut… And that queasy feeling hits your gut: What if I made a mistake?

But hold on to that pink sombrero—Sublime has a little-known feature that you can use when you want to be extra sure before you save your changes.

Just right-click in the editing pane and select Show Unsaved Changes, and you’ll get a nice git-style diff that you can review one last time.

Now you’re a hero.

Plugin of the Week

Sublime Text 2 Stack Overflow allows you to query Stack Overflow from a Command Palette-style popup, or search by highlighting a snippet of code.

How-To & Interesting Articles

How to Add SASS Support to Sublime Text

Distraction Free Mode, Color Picker and Placeholders

Have you seen Emmet yet? It will blow your mind.

For more great Sublime tips and tricks, go here:

http://sublimetexttips.com/newsletter

How to Add Sass Support in Sublime Text

By josh / April 30, 2013

Note: This is my most popular posts, but there are a lot more killer Sublime tips where this came from. Sign up here to get them: http://sublimetexttips.com/newsletter

Sass, short for Syntactically Awesome Style Sheets, is a massively popular tool for web developers that takes a lot of the pain out of writing CSS. Unfortunately, Sublime doesn’t provide a lot of help if you want to use SASS in your project.

Package Control lists a number of seemingly useful plugins, but each provides just one or two Sass features–none of them gives you everything you need to use Sass effectively. Then there’s the whole compiling thing–messing with a separate command line tool every time you want to make a CSS tweak is a royal pain.

Here’s the setup I use that makes working with Sass as seamless as using plain old CSS.

Install Sass

Since this isn’t a Sass 101 tutorial, I’m going to assume that you’ve already installed Sass and know how to use the command line compiler. If not, here’s a good walkthrough.

I’m also assuming that you have Package Control set up in Sublime. If you haven’t encountered it yet, Package Control lets you install hundreds of plugins with just a few keystrokes—without leaving Sublime. The Package Control site includes setup instructions.

Configure Syntax Highlighting

The first time you open a sass or scss file, Sublime just shrugs its shoulders and treats it like plain text, rendering your meticulously formatted style rules in monotonous black and white.

scss-as-plain-text

Package Control lists a handful of plugins that add syntax highlighting for SASS. The runaway favorite is the sass-textmate-bundle plugin, called simply Sass in Package Control.

After you install the Sass plugin, when you open a scss file you’re greeted with beautifully highlighted code:

scss-with-highlighting

But don’t celebrate yet–if you open a sass file, you’ll find it’s still devoid of color. What gives?

If you look in the lower right-hand corner of the screen, you’ll see a clue:

sass-as-haml

As it turns out, a line in the Data/Packages/Rails/Ruby Haml.tmLanguage file is hijacking the sass extension and incorrectly setting the syntax to Ruby Haml instead of Sass.

I’ve seen “fixes” for this problem that involve editing the Ruby Haml.tmLanguage file itself, or one of the files in the Sass plugin. That’s a bad idea because future updates to either of those packages will overwrite your customization, and you’ll be back where you started.

Fortunately, the simplest fix is also the best: Sublime allows you to specify what syntax to use for a given file extension.

To force Sublime to correctly highlight sass files: 1. Open a sass file. 2. Click View | Syntax | Open all with current extension as … | Sass.

Compiling from Sublime

Messing with the command line Sass compiler is a bit of a hassle–and it’s unnecessary. With help from a couple of plugins, you can configure Sublime to automatically compile your SASS stylesheets every time you save a change.

Sublime’s build system feature allows you to create custom build tasks and associate them with specific file types. You can do this by hand in your sublime-project file, or you can let the Sass Build plugin handle the heavy lifting for you.

Installing the Sass Build plugin creates two new entries under Tools | Build: Sass and Sass – Compressed.

Compiling your Sass files with this plugin is simple. While editing a sass or scss file, just hit Ctrl+B on Windows or Linux or Command+B on OS X.

By default, Sublime will use the regular Sass build option, which compiles your Sass and formats the CSS output for easy readability.

To create minified CSS files for production, change the build option by clicking Tools | Build | Sass – Compressed.

Automating Builds

Building your Sass files straight from Sublime is convenient, but at some point you’re going to spend 30 minutes debugging a crazy stubborn CSS issue only to realize that you actually fixed it 25 minutes ago and just forgot to recompile the scss file. Not that I’m bitter or anything.

You can avoid this by installing the SublimeOnSaveBuild plugin, which will automatically execute the default build action whenever you save changes to a file. (It’s also handy when you’re working with CoffeeScript.)

SublimeOnSaveBuild supports a filename filter, and by default it’s only configured to run for css, js, sass, less and scss files.

P.S. Now that your Sass workflow is humming along, it’s time to level up the rest of your Sublime game. Go here to see how:

http://sublimetexttips.com/newsletter

View your changes live in a browser while you edit in Sublime Text

By josh / April 25, 2013

Miguel writes:

Sometimes I work with the Coda editor on my Mac, and it lets me edit code in a window and at the same time see in an split second window the preview of this file. Can Sublime do this?

I haven’t seen anything that lets you load a preview of an HTML file in a Sublime tab. That’s usually a feature that is reserved for bigger, IDE-style editors like Aptana, Dreamweaver or Visual Studio.

The closest thing I’ve come across for Sublime is the Live Reload plugin (OS X only).

With Live Reload, you can leave a web browser up on the screen while you work in Sublime. Every time you save a change, the web page automatically refreshes–no need to manually switch windows and reload the site.

This is actually much better than previewing in the editor, because those built-in previewers are never quite like a browser. You could leave the browser up on another monitor, or do a split-screen if you’re working on one monitor.

Plugin of the Week

Today — Insert the current date or time from the Command Palette. Handy for to-do lists, blog posts and journaling. I had to restart Sublime after installation to get it to work.

How-To & Interesting Articles

Hack Sublime for Faster Navigation in Your Rails Project

Markdown Tips, Trick and Links

5 Great Visual Tweaks for Sublime

Tips and Shortcuts for Sublime

Write Your First Sublime Plugin

Find this helpful? There’s a whole lot more where that came from:

http://sublimetexttips.com/newsletter

Page 4 of 6