Sublime Text 2 Enhancements

Use subl in the terminal

Add the following

sudo ln -s "/Applications/Sublime Text" /bin/subl


ln -s /Applications/Sublime\ Text\ /usr/local/bin/subl

Then go to the dir and type subl . . Don’t forget the the full stop at the end to open all.


Open Automator and select ‘service’.

find shell script from Search and drag it to the right stage.

/bin/zsh should be selected from the dropdown. And type this.

/Applications/Sublime\  Text\ -n $@

Files or folders should be selected under the The service receives selected.

Save it (command + s) as Open in sublime text 2.

Then you can right click on a file or folder and select this service to open it in sublime text.

Multiple Cursors and Incremental Search

Selecting words,

Select all: cntl+cmd+G

column view : press option and drag the cursor.

Select lines: cmd+L(cntl+cmd+L) to edit

Incrementalfind, cmd+i

The command palette

shift+cmd+p syntax javasc (it is fuzzy searching) or just javascript then enter


cmd+k, cmd+b

Save all

opt+cmd+s or use palette to search save. 

It will find save all, then enter.

(Command key) - On some Apple keyboards, this key also has an Apple logo

^(Control key)

(Option key) - "Alt" may also appear on this key. It looks like a step.

(Shift key) It looks like an upwards-arrow key.

(Caps Lock) - Toggles Caps Lock on or off

Fn (Function key)

Instant File Changing

find files,

cmd+p (goto anything), 

fuzzy searching, like viewsindex. This will load the file automatically.

Finding method/function or Symbols

Find method/function in a file,

cmd+r or cmd+p and @. 

This can be used in CSS file as well.

To go to a certain place in css,

cmd+p style@field. This means going to field part of style.css. style@body 

Keyboard binding

don’t change preferences>key bindings default, use Key-binding>users and add

{ "keys": ["ctrl+s"], "command": "toggle_side_bar" } 


{ "keys": ["super+shift+5"], "command": "toggle_side_bar" }

This will toggle side bar with ctrl+s. don’f forget to take out the , comma at the end since it is the last one.

Installing Plugins Without Package Control

adding alias to mac through terminal for sublime text packages

alias p="open ~/Library/Application\ Support/Sublime\ Text\ 2/Packages"

then just type p and enter.

when you want to clone github go to the dir ~/Library/Application\ Support/Sublime\ Text\ 2/Packages and git clone blablabla

Package control

copy from /sublimepackages/packagecontrol ctrl ` to open console and paste it

shift+cmd+p and type ‘install’ to bring up package control install, then type a name what you want to install, e.g. coffeescript or laravel blade etc.

First snippet

to open snippet, tool > snippets

By changing language at the bottom-right, snippets will change according to the language shift+cmd+p and type snippets will bring all the snippets.

Adding a new snippet, tool>new snippet

How to change syntax,

shift+cmd+p and type syntax and select a syntax you want to use.

cmd / will give a comment or opt+cmd+/ will give a block comment.

How to edit snippets

You can find your snippet in

~/library/Appication Support/Sublime Text 2/Packages/User/

saving snippets

new folder, javascript, hello.sublime-snippet. you need sublime-snippet at the end. Since you saved a snippet in a javascript folder, it will appear when you are using syntax javascript.

a) ${1:this} bla bla ${2:snippet} The first stop point and after : is the default value.

b) Save as siaf.sublime-snippet, self invoking anonymous function under javascript folder,

(function () {
// indent works as well.

c) Save as model-extend.sublime-snippet under javascript>backbone, and trigger name is bm

var {1:Task} = Backbone.Model.extend({

Adding snippets through package control

shift+cmd+p install select package to install

Easier testing with snippets

installing packages from github

cd ~/Library/Application\ Support/Sublime\ Text\ 2/Packages/User
git clone PHPUnit

assertContails, assertRegExp

Create php unit function snippet>tool>new snippet

public function test${1}()

<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<!-- Optional: Set a scope to limit where the snippet will trigger -->

Save it under PHPUnit directory as test.sublime-snippet test, tab

Zen coding / Deprecated, install Emmet

use tab to change to html, no space between

+ is siblings
> is child

for ID use # like ul#someId header and footer are html5 cursor need to be at the end of sequence * is mutiple for attribute use [ ]

a.button[href=#] will be anchor with class button and href=”#”
a[href=] and tab

li{my text} will be <li>my text</li>
(ul>li*4>a[href=#]{some link})+div

Use ( ) to bundle together

.container>(.header>header>h1{My webiste})+.main+.footer+footer


This will replace zencoding in future. emmet

cd ~/Library/Application\ Support/Sublime\ Text\ 2/Packages
git clone Emmet

Restart sublime Use tab to convert to CSS

p20 tab will be padding: 20px;
m10 will be margin: 10px:
w50 will be width
w80p will be width with 80%
m10-20 will be margin: 10px 20px;
m0-auto will be margin: 0 auto;

CSS3 transition: all 1s; and select cntr+cmd+x will use prefier to change Or -transition and tab will add all the prefixes.

Don’t use prefix to all. Check it at Or first add prefix and select all and cntr+cmd+x to prefixr will delete prefixed which you don’t need.

In html

lorem20 will give 20 fake words.
^ will go up one step in html
.container>h1^.main(but it is not working yet)
ul>.item*3 should (in future) give three li with class item under ul.
em>.hello will give em and span with class hello since em only has span.

Cross-Browser CSS with prefixr,

Install it from package contrl.

Select css and edit>prefixr or ^+cmd+x

Fetch files with ease

pulling latest jquery etc install from package control, shift+cmd+p and nettus+fetch

shift+cmd+p and fetch manage to see samples.

Create a jquery.js and shift+command+p and fetch and file and select jquery to write jquery in the file. shift+command+p and fetch and select package and type the location to download the package.

Adding normarize.css to Fetch

And click normalize.css and Raw. Find the webaddress. In the above fetch manage file(Fetch.sublime-settings), add the following after jquery ...,(comma)

"jquery": "",

It is ready. Create a file called normailze.css. Shift+cmd+p, fetch, file, and normalize.

Adding Zip files to Fetch. e.g. Wordpress Goto wp download and copy the download zip link with right-click copy link location.

Goto fetch.sublime-settings, and add the followings to packages after html5_boilerplate.

"wordpress": ""

Now shift+cmd+p, fetch, package, wordpress, add the folder at the bottom, enter.

Lighting fast folder and file creation

Install AdvancedNewFile

See details Sublime>Preferences>Browse Packages> drop to sublime to read


then type directory/filename

sidebar enhancement

Create more options with right-click install>sidebarenhancement Open readme file to see the details.

contl+t will create a new file

change the command to open in a browser in the default(OSX).sublime-keymap

"keys": ["ctrl+o"],
    "command": "side_bar_open_in_browser" ,

now ctrl+o will open a page in a browser.

If you forget the shortcut, go to shift+cmd+p and type browser and select open in a browser.

Open a page in a server.

Save it as a project.

Command palette (shift+cmd+p)>project>Save as Then either right-click the project root on the left sidebar>Project>Edit Project

Right click any file on sidebar and select: "Project -> Edit Projects Preview URLs"

Edit this file, and add your paths and URLs with the following structure:


And ctrl+o to open it in the local server

Sublime Linter

This will give you warning of coding mistakes.

To disable it program palette, type lint and find disable lint.

Code snippet management with Gists

Watch video

Make an account at github gist, shinokadagist, for maintaining code snippets

Install Gists Open Gist.sublime-settings to enter username and pw.

Write codes and select codes>Palette> create (public gist)> enter description(optional but enter name), like HTML: blabla, or Javascript: blabla>(optional)

Palette>open (gist)>select name> enter, this will open a new file which is connected to github gist. Copy and paste to your file.

If you edit the gist file >select the codes>Palette>gist(update) Palette> gist open (in browser)>enter creating Paul Irish’s pub/sub, .ir image replacement, jquery pub/sub Or fork other’s gist and edit name like JavaScript: Detect IE. These will be displayed in your gist, and sublime as well.

Palette>open gist> select your file


Install package Create a class and function,

class MyClass{
public function run($person, $howfar)
    return “$person needs to run $howfar miles.”;

Then above the funciton type

/** and tab or enter. It will create a comment block.

 * [run description]
 * @param  [type] $person [description]
 * @param  [type] $howfar [description]
 * @return [type]

Tab to go to the next to type. If you add ($person==”John doe”,... It will detect the string and add it as string. If you add (Array $people, ..) It will add Array $peple etc.

If the function name has ‘is’ or ‘has’ like, isRunning or hasRunningit will expect to return boolean. @return boolean in the comment.

Read more doc

Pretty Task Management

Install PlainTasks Palette>task Type a heading like Things to do today, new line and type ‘go to the store’, cmd+enter. You can use cmd+i to add another task. Add -- and tab(or enter??) to add --------------------- line. Create more headings and to do list. Add tags like, @work, @personal etc To add finished, go to the cmd+d for done. You can toggle with it. to archive them shift+cmd+a to move an item, cmd+ctrl+arrow up or down save as this-week.TODO

HTTP Requests within sublime

Install HTTP Requester

At the moment only ‘get’ works. Add //http://localhost:8888/hw_development/index.php/welcome/ in front of method and right click and select http requests


Install it from Palette and also install browser extension as well. For Chrome, Go to chrome extension to tick, Allow access to file URLs. Open HTML or CSS. Turn on the LiveReload by clicking the icon. Open the sublime and browser next to next. Edit html or css and save it. You see the update when you save the file.

Regular expressions in sublime

Edit>Convert Case>Title case will change to ‘this is title’ to ‘This Is Title”. Goto Palette, and type title to select Title Case. Turn on regexp at the left bottom or cmd+opt+r cmd+i to incremental search, type to search, e.g.

<h2>.+</h2>. ‘.’ 

full stop means any character and + means one or more characters. Now option+enter will select all the occurring of


But this will select h2 tags as well. And h2 will be capitalize if you are doing Title case.

(?<=<h2>).+(?=</h2>) This will select between <h2> and </h2>
(?<=ABC) means Positive lookbehind. Matches a group before your main expression without including it in the result.
(?=ABC) means Positive lookahead. Matches a group after your main expression without including it in the result.

So cmd+optn+f and select regex at the left-bottom.

cmd+K, cmd+u : upper case
cmd+k, cmd+l: lower case

Vintage Mode

This can use VIM command. Add "ignored_packages": [] to Preferences Settings User. Not to ignore

5j go 5 down.

viw, change to vidual, insert and select a word.

ci’ //c: change, i:inner. This means change everything between/inner sigle quote,’. You can use anywhere in the line.
ci{ wiil select all between { and }.

In a text, and command mode, c,w is change word and it will delete a word and change to insert mode.

2 c w (or c 2 w) will delete 2 words and ready to change.
v 5 w wiil select 5 words. visula 5 words.
v t , will select til comma,. (visually select til comma).
v f , will do the same.
//capital A is move to the end of the line.
//capital I is move to the beginning of the line.
//capital V is to select the line. And jjjj to move down to select all.
y for yank and p for paste
d for delete, or d d for delete the line.
y y p will copy and paste a line.
. full stop will repeat the last command.

Quicker stylesheet references

In Palette, copy (path from project) and in index.html, link, tab and paste it. Or copy (as Tag style) and paste it. for js, copy as Tag script.

Joining lines

Edit > lines > join lines or cmd+j

cmd+left to go to the left, cmd+shift+right to select all the line. cmd+j at the end of the sentence to join the next line and repeat it rather than back space it.

Sublime and Markdown with marked

This is better.

Next, open up your Sublime Text 2 User Packages directory.

/Users/username/Library/Application Support/Sublime Text 2/Packages/User

Make yourself a file called “Appname.sublime-build”, for example, if you use Mou it would be “Mou.sublime-build”. This is more for reference than anything, you could name it ButtSniff.sublime-build and it’ll work… After that, open up Appname.sublime-build in your favorite text editor, which should be Sublime Text 2 at this time. Inside, we’ll be using a very small piece of JSON.

"osx": {
    "cmd": ["open", "-a", "Appname", "$file"]
"selector": "text.html.markdown"

Again, Appname would be changed to the name of the application you are using, so if you are using Mou, your code would look like: "cmd": ["open", "-a", "Mou", "$file"] Once you have made this edit, save the file, and open up your markdown or rdoc file (may require a restart). Once you have the file open, just hit CMD+B or tool>Build.

All about Project

In myapp.sublime-project file, You can add more than one

"path": "/Applications/MAMP/htdocs/hw_development/appication"
"path": "/Applications/MAMP/htdocs/hw_development/assets"

Don’t forget , comma between array. ctrl+cmd+p to select another project to switch. Or Project > switch Project in window

In order to exclude files/folders, add fileexcludepatterns or olderexcludepatterns

"path": "/Applications/MAMP/htdocs/hw_development/appication",

You can add settings here as well.




View>sidebar> show open files

Configuring and mastering split windows

cmd+shipt+[ or ] to move to next file. crt+1 or crt+2 etc to move to next file.

Add the followings to Preferences>Key binding>User

    "keys": ["super+alt+right"],
    "command": "set_layout",
        "cols": [0.0, 0.33, 1.0],
        "rows": [0.0, 1.0],
        "cells": [[0, 0, 1, 1], [1, 0, 2, 1]]

    "keys": ["super+alt+left"],
    "command": "set_layout",
        "cols": [0.0, 0.66, 1.0],
        "rows": [0.0, 1.0],
        "cells": [[0, 0, 1, 1], [1, 0, 2, 1]]

{ "keys": ["alt+1"], "command": "move_to_group", "args": { "group": 0 } },
{ "keys": ["alt+2"], "command": "move_to_group", "args": { "group": 1 } },
{ "keys": ["alt+3"], "command": "move_to_group", "args": { "group": 2 } },
{ "keys": ["alt+4"], "command": "move_to_group", "args": { "group": 3 } }

The first one and two will separate the windows ⅓ and ⅔ . The movetogroup will move the file to different group.

Custom builds

function sayHi($name){
return “Hi there, $name”;
echo sayHi(‘John’);

Then you can run in a terminal like, php funcs.php

Build script Tools>build system>build new system

In a terminal, php -help will give, e.g. -l Syntax check only (lint)

Sublime Doc

Save the new system as PHP-Lint.sublime-build

    "cmd": ["php","-l","$file"]

Save it under

/Library/Application Support/Sublime Text 2/Packages/User/newfolder/PHP-Lint.sublime-build

To select it through, Tools>Bilde System>PHP-Lint To run, Tools>build OR cmd+b

This will show Lint.

In order to display output, Save the following as PHP.sublime-build

    "cmd": ["php","$file"]

Select it under Tools>Build System>PHP

Then run cmd+b

Using coffee script

create a file with following code.

sayHell = (name) -> "Hi there, #{name}."

in a terminal

coffee -c

This will create a file called script.js in the same folder with followings. // Generated by CoffeeScript 1.4.0

(function() {
    var sayHell;

    sayHell = function(name) {
    return "Hi there, " + name + ".";


Creating coffee-script compiler through Tools>Build System>New Build System

// coffee -c
"cmd": ["coffee","-c", "$file"]

Save it under build folder which I made it before, as my-coffeescript.sublime-build Select my-coffeescript from Tools>Build System, and run by cmd+b. Change -c to -wc to watch and compile. Save it and build it and see.

My notes:

Spelling check Open Preferences>Settings>User and add, "spellcheck": true, "dictionary": "Packages/Language - English/enUS.dic"

And add the following to Preferences>Key Binding>User

{ "keys": ["super+\\"], "command": "toggle_setting", "args": {"setting": "spell_check"} },
{ "keys": ["super+ctrl+\\"], "command": "next_misspelling" },
{ "keys": ["super+alt+\\"], "command": "prev_misspelling" }

Additional notes cmd+opt+n to create folder and file, css/style.css and save it. This is from package advancedNewFile

Written on June 13, 2013