Wes Bos

Designer, Developer & Entrepreneur making the web an awesome place.

Category Archives: Sublime Text

ss 2014-07-21 at 2.35.55 PM

Choosing a font to use in your editor is a very important step in your workflow that many developers don’t think twice about. Small things like the difference between 0 vs o or l vs 1 and large things like the readability of the font is key to your productivity and strain on your eyes.

If you are still using the default that came with your editor, it might be worth checking out a few below and see how you like coding with each of them.

Since talking about text editor configuration is a huge interest of mine, This list has been compiled over the last year talking to developers at meetups and on twitter. So while the list isn’t totally complete, It’s a great reflection of what developers are using these days.

Consolas

M+2m

inconsolata

Menlo (sublime default)

Monaco

Ubuntu Mono

Adobe Source Code Pro

ANONYMOUS PRO

Dejavu Sans Mono

Envy Code R

Hermit

Have a favourite that isn’t listed? Comment below or tweet at me and I’ll add it to the list.

Become a Sublime Text Power User

Enter your email address below and I’ll give you a hoot when its ready plus a discount code for being so great!

capslock

I’m a big keyboard shortcut user. After a while you may find that you are running out of easy keyboard shortcuts.

One little trick that many developers do is to remap their capslock key to something a little more useful.

In my case, I remapped my capslock key to open up the Divvy window manager.

Whatever you use it for is up to you, but don’t just let a perfectly good key sit dormant! Watch the 5 min video below or follow the instructions. Happy keyboarding!

Disable the Capslock key

First thing you’ll need to do is open System PreferencesKeyboard → Then click the Modifier Keys button in the lower right.

Set your capslock key to No Action and repeat for every keyboard you have attached in the “Select Keyboard” dropdown. If you are on a laptop with an external keyboard you’ll need to do this twice.

ss 2014-07-18 at 11.08.45 AM

Remap the Key

Now that Caps Lock is disabled, we nede to remap it to another key. When you press a key, the OS sends a KeyCode to the program letting them know what key was pressed. I made a little site to help you with this in JavaScript: http://keycode.info.

To do this, we need to use a program called Seil (previously PCKeyboardHack). Download, install and open it.

Check the first box that says “Change Caps Lock” and set the keycode to be one that you do not use and ideally a key that you do not have. A popular choice here is 80, which maps to F19. Unless you have a huge keyboard, you probably do not have an F19 key.

Now when you press your Caps Lock key, they system will interpret this as a press of the F19!

Now you get to choose which program you want to map Caps Lock to. I chose Divvy:

ss 2014-07-18 at 11.15.13 AM

It works with any program that accepts a hot key including Alfred and Slate.

ss 2014-07-07 at 12.19.25 PM

osx-dialog-boxes-gif

Quick 1 minute tip for enabling keyboard tabbing on OSX. Never use that mouse to click “Dont’ Save” again.

To enable, Open System Preferences >> Keyboard >> Shortcuts tab and then click the All Controls radio button at the bottom.

ss 2014-07-07 at 12.15.32 PM

Become a Sublime Text Power User

Enter your email address below and I’ll give you a hoot when its ready plus a discount code for being so great!

emmet-value-bumping

One of my favourite things about Sublime Text is the Emmet package. Most people know it for the code completions, but it also has a handful of helpful utilities.

One of those is the ability to increment / decrement values in CSS by 0.1, 1, and 10 – just like you probably already do in dev tools.

incement:decrement

Take 1 minute to watch this video on how to use it, save yourself many minutes in the future!

That’s it! Next time Git requires you to edit a file or commit message, Sublime Text will pop open!

Become a Sublime Text Power User

Enter your email address below and I’ll give you a hoot when its ready plus a discount code for being so great!

ss 2014-06-01 at 3.25.53 PM

Toggling comments in Sublime Text is broken and it’s time you fix it. If you work with HTML/JavaScript you have probably run into this while using the ⌘ + / comment toggle.

broken-toggle

Sublime Text thinks it is JavaScript, so it uses a JavaScript comment! The problem is that the script tag is acutally HTML, so we need to use an HTML comment to comment it out. We want something like this:

<!-- <script src="jquery.js"></script> -->

The underlying problem is inside the HTML syntax file and it is actually an easy fix.

We need to edit the HTML.tmLanguage file that is located in preferencesbrowse packagesHTML.

Open it up and look for a line that looks like the following. It should be around line 286.

<string>(?:^\s+)?(&lt;)((?i:script))\b(?![^&gt;]*/&gt;)</string>

Replace it with this:

<string>(?:^\s+)?(&lt;)((?i:script))\b(?![^&gt;]*/&gt;)(?!.*&lt;/script&gt;)</string>

Save. You should now be able to properly toggle comment out script tags in Sublime Text!

Become a Sublime Text Power User

Enter your email address below and I’ll give you a hoot when its ready plus a discount code for being so great!

ss 2014-06-01 at 2.36.03 PM

If you are a terminal or command line power user, you often want to open in from Sublime Text right from the cmd line. Often something like this:

subl style.css

On OSX and Linux, we have the subl command that comes with Sublime Text, to install it you can follow the instructions here.

However, on windows we need to do it a little different by creating something called a doskey.

So, if you wish to use the subl command to open files and folders from the command line in windows, you can use the following:

doskey subl="C:\Program Files\Sublime Text 2\sublime_text.exe" $*

Paste the above into your command line prompt and this will make the subl command available to you.

If you are using Sublime Text 3, use the following instead:

doskey subl="C:\Program Files\Sublime Text\sublime_text.exe" $*

gitsublime

By default, git uses Vim as the editor for commit/rebase messages. This can be somewhat limiting if you aren’t comfortable with using Vim, especially if you need to move around lines of code.

Luckily it’s easy to switch over to using Sublime Text as the editor for your messages. When git needs you to input and save a message. It will simply open up Sublime Text and prompt you with the file that needs editing. Once you save and close the file, git will continue on with what it needs to do.

Install subl

First thing we need to do is to make Sublime accessible via the command line. Chances are you might already have this installed, but if you haven’t, you can follow the instructions here. If you are still on Sublime Text 2 – follow these instead.

Set git to use

Next, open up your Terminal or command line and paste the following:

git config --global core.editor "subl -n -w"

That’s it! Next time Git requires you to edit a file or commit message, Sublime Text will pop open!

Become a Sublime Text Power User

Enter your email address below and I’ll give you a hoot when its ready plus a discount code for being so great!

gutter

At my jQueryTO talk I showed a new Sublime Text Package called GutterColor that allows you to view your CSS colours in your gutter.

Amazing! It works with plain CSS, SASS, Stylus or LESS. If you are any sort of front end developer, you probably want this right away! Unfortunately the install process is a little klunky as it relies on a lower-level program called ImageMagick to be installed on your computer. It’s easy to do, just requires a handful of steps to get up and running.

TL;DR: brew or port install ImageMagick and set the path of your convert script in your GutterColor prefs.

Installing ImageMagick on OSX

So, we need ImageMagic to be installed on our computer. The easiest way to do this is with a package manager for your mac. If you already have homebrew or macports installed, you can simply type one of the following into your terminal:

brew install imagemagick

or

sudo port install ImageMagick

No idea what brew or macports is? You’ll need to install that first before you can install ImageMagick. I recommend using HomeBrew. Simply open your terminal window (found in applications → Utilities → Terminal) and paste the following code in and hit enter:

ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)"

That will ask you for your computer’s password and then take a few minutes to install homebrew.

Once that is complete, copy and paste this into your terminal as well:

brew install imagemagick

This will also take a few minutes to install, grab a coffee!

Finally, type the following into your terminal

which convert 

This will return the location of your imagemagick convert script. Remember this. Skip the windows part and jump down to Setting up Sublime Text

Installing on Windows

Head on over to the ImageMagick website and download/install the option that works with your computer. If you download the wrong version, no worries, just try another version.

When installing, take note on the install path. You will need it later.

Once you have that installed, check if it worked by opening up the command prompt (start->cmd) and type convert. You should see a few hundred lines scroll across your screen.

Now, you need to find the path that it was installed to. Open windows exporer and find where it was installed to. This is probably something like c:/Program Files/ImageMagick-6.x.x.x We want to find the convert.exe file as below:

Setting up Sublime Text

First we need to go ahead and install the GutterColor package. You can do this via Package Control (Tools → Command Palette → Type install → Search for GutterColor and hit enter).

As of right now, this package requires you to tell SublimeText where the convert script lives on your computer. Go to Sublime TextPreferencesPackage SettingsGutterColorPreferences - User and paste the following code in there. Make sure to swap out the path if your which convert command returned something different.

{
  "convert_path" : "/usr/local/bin/convert"
}

In my experience, sublime required a few restarts before it started to work totally. If you see red squares in your gutter, it’s helpful to look in the Sublime Console (view → Show Console) to see if you can make sense of the errors.

Become a Sublime Text Power User

Enter your email address below and I’ll give you a hoot when its ready plus a discount code for being so great!

ss 2013-07-08 at 5.36.16 PM

So, can I move to Sublime Text 3 yet? 

I’ve had this question asked quite a few times over the past month so I thought I would write up a quick post on my answer: probably.

Since my last “First Look” post on Sublime Text 3, 5 months have past and a lot has changed. Updates have been flying out, producing a faster and more stable Sublime Text 3.  Since then the beta has been opened to the public, so if you are still checking Sublime out, you can give ST3 a shot.

Continue reading

linebubble.mov

As I’ve been writing the Sublime Text Power User book over the last few months, I’ve had some interesting conversations around favourite features of ST. The one feature that I constantly surprise people with is called line bubbling – moving lines of code up and down a document without cutting and pasting them.

linebubble.mov

It’s an extremely simple feature but will save you lots of time and potentially lost code.

Let’s take this list as a very basic example. This list could be any block of code that you want to move up or down – they are only numbered as a visual.
ss 2013-03-11 at 11.14.30 PM
How do we move them up and down to end up in the correct order? We could cut and paste, but line bubbling is much faster.

In Sublime Text, hold down + control (CTRL + SHIFT on Windows) and use your ↑ up* and ↓ down arrow keys to move the lines around. This works for single and multiple lines.

Check out the video for a visual:

Easy! Want to learn more, sign up below and I’ll let you know when my book comes out.

Let me know when this book launches

Enter your email address below and I’ll give you a hoot when its ready plus a discount code for being so great!

ss 2013-01-29 at 1.48.10 PM

I woke up to a real treat this morning: Sublime Text 3! Sublime Text development has always moved at an incredible pace and now just a few months after 2.0 was released, 3.0 peaks around the corner. ST3 isn’t at the point where it can be your daily editor – you will still be using ST2 for some time – but its exciting to take a look at what ST3 has in store for us!

ST3 is only available to registered ST2 owners, you will be reqired to input your license key upon launch. If you forget where you put your license key, go to Preferences → Browse Packages and then open the settings folder and look for License.sublime_license

What’s new

You can read all the new features over at the Sublime Blog, here are the main features along with some explanation and commentary.

It’s even faster!

Sublime has always been a blazing fast editor and Jon Skinner has outdone himself with this. The editor starts and opens up my last project in less than a second. On OSX the icon doesn’t even reach the top of the bounce before it has loaded.

Python 3.3 & Packages API

Sublime has now switched to Python 3.3. If you aren’t familar, Python is the programming language that Sublime Text uses to expose it’s API. It is how we get all those great packages. Python 3.3 has been out for a while, but many developers have been dragging their heels in upgrading as many of the packages haven’t been ported over. I’m not a Python developer, but according to the Python Wall of Superpowers things are looking better lately.

The downside to this is that most Sublime Text packages will need to be ported to ST2/Python 3.3. The author of Sublime Text says porting to the new API involve minimal work.

Sublime Text package manager doesn’t work yet, but the author Will Bond says work is already underway. Will also has a number of popular packages so I would watch his github, twitter and site for his experiences with porting everything over.

UPDATE: Will Bond has updated package manage to work with Sublime Text 3. See his commend below.

Pane Management

Previously sublime text only allowed you to split your editor into 1-3 columns, 1-3 rows or a grid of 4. This has changed in Sublime Text 3 which exposes controls for splitting panes indefinitely.

I played around with the commands and keyboard shortcuts for a bit but I will be sticking with Origami to manage my panes as I find the commands for moving files splitting panes to be more natural.

Symbol Indexing


ST3 introduces project wide Goto Symbol and Goto Definition. Previously Goto symbol fuzzy search only worked when you specifically noted which file you wanted to look in. In the example above I’m able to see everywhere the post_render function is called in Octopress. This is a really big step up for Sublime that may have a few IDE-lovers jumping ship.

Themes and colour schemes

The UI of Sublime hasn’t changed at all other than a few animations when hiding/showing the sidebar. I’ve tested ST3 with my Cobalt2 theme and color scheme and I’m happy to report that everything worked flawlessly.

Prices

Sublime text 3 will go for $70 or a $30 upgrade from ST2 ($15 if you purchased it recently, so don’t hold off buying ST2).  Money extremely well spent.

Wishlist

This is just the beginning of ST3 and I’m excited to see what it has in store for the future. A few things that are on my wishlist:

  • Full blown terminal integration
  • Binary file display  - One thing Coda does really well. If I click an image, I’m able to preview it and get its dimensions.
  • Find/Replace Macros – being able to record a find/replace and play it back or run with arguments would be very handy.
  • Sidebar icons – Sublime excells in its simple interface but having icons for folders/filetypes is something that has always been on my list
  • What is yours? - Post in the comments what you hope Sublime Text 3 will bring

The Book

Of course all of this information will be in my upcoming book on Sublime Text. I’m making excellent progress and will have a release date for you all soon. Drop your email below and I’ll give you a hoot when it’s launched.

Let me know when this book launches

Enter your email address below and I’ll give you a hoot when its ready plus a discount code for being so great!

Sublime_Text_Logo

I’m working hard on my Sublime Text Book and have received fantastic response for everything so far – very motivating. The last post was so well received that I’ve decided to post a few more of my favourite tips.

1. Save on focus lost

Chronic ⌘+S’er? This tip is particularly helpful when working with CSS/LESS/SASS and switching between your editor and browser. Instead of saving on every tiny little change, tell Sublime to automatically save your files when you tab away from the editor.

I find this is super handy when working with extensions like Live Reload or compiled languages like coffeescript that watch for file saves. Put this in your settings file at PreferencesSettings - User

"save_on_focus_lost": true

If you work with other watch scripts that break and restart a process upon save (like supervisor or forever), this might not be ideal for you. No problem, only enable it for the languages you want – simply place the above setting in /Packages/User/[syntax].sublime-settings. For example, I put the above in CSS.sublime-settings and LESS.sublime-settings

2. Paste and Indent

One of the best tricks I’ve ever learned in Sublime Text is paste and indent. If you have ever pulled a piece of code off the Internet and pasted it into your application, you’ll no doubt feel the pain of having it paste in all weird and have to go in and fix it.

Easy fix to this, instead of pressing the normal cmd + v to paste, simply switch to using cmd + shift + v to paste. This will automatically indent your code block.

Like that one? I loved it so I remapped my key combos to paste and indent by default on cmd + v

Paste this little snippet into your key bindings file located at PreferencesKey Bindings - User

{ "keys": ["super+v"], "command": "paste_and_indent" },
{ "keys": ["super+shift+v"], "command": "paste" }

3. Reindent Keyboard shortcut

Now, if for some reason you end up with either a block of code or an entire file filled with hard to ready, messy, poorly indented code, reindent is your best friend.

To automatically re-indent your code, simply select the code you want to indent and then from the menu EditLineReindent

Sublime doesn’t ship a keyboard shortcut for this. No problem, let’s make our own. Pop this little snippet into the PreferencesKey Bindings - User file.

{ "keys": ["super+shift+r"],  "command": "reindent" }

4. Highlight Modified Tab

When making a change in sublime text, by default it changes the × to a circle of the same colour.

Make it a little more obvious when you haven’t saved changes to a document by turning on the following:

"highlight_modified_tabs": true

The exact styling of your modified tabs will vary depending on your theme. It looks fantastic with my cobalt2 theme for Sublime Text

I’m an instructor at HackerYou where we use Sublime Text extensively. This is a small, yet common, problem that we run into. Making it visually obvious cuts down on mistakes like this.

5. Proper Fullscreen for Mac Users

This one is only for those running Sublime Text on Mac OSX 10.7 or 10.8 with multiple monitors. You have probably realized that apple has really dropped the ball when using fullscreen, rendering the rest of multiple monitors into nothing but a linen backdrop.

If you like to code fullscreen yet still use your other monitors, go ahead and add the following to your preferences file:

"use_simple_full_screen": true

You’ll have to restart Sublime Text for this one.

More?

I’ve got plenty more tips as well as in-depth guides on the rest of Sublime Text coming up in my book. If you have a must-use tip or commends on any of the above, please feel free to leave a comment!

Let me know when this book launches

Enter your email address below and I’ll give you a hoot when its ready plus a discount code for being so great!

ss 2013-01-08 at 11.38.07 AM

I love tweaking Sublime Text. There are hundreds of settings you can change and I’ve blogged about a few of them before.

Here are five visual changes you can use to make your text editor just right. You should place these items inside your User settings file which can be located at preferencesSettings - User

1. Change the caret style

Who thought a caret could be sexy? Change your caret style to phase and it will fade in and out rather than blink.

"caret_style": "phase"

Other available options include “smooth”, “phase”, “blink”, “wide” and “solid”. I’ve been fond of “wide” which doesn’t blink and is clearly visible for screenshots in my new book.

2. Highlight current Line

This is one thing I wish Sublime Text enabled by default. Highlighting the current line is a subtle visual cue when jumping back and forth between a browser and code.

This is also super handy when you are dealing with long lines of code/text and you want to quickly know if the current line is wrapped or not.

"highlight_line": true

ss 2013-01-08 at 11.21.30 AM

3. Increase the line height

This trick adds just two pixels to each line, but increases the readability of code so much better. Might not be for everyone but I really enjoy this one.

 "line_padding_bottom": 1,
  "line_padding_top": 1

4. Show Code folding arrows

Code Folding in Sublime Text is really great but I’ve noticed most people don’t use it as much as they do in editors because the arrows aren’t visible until you hover over the gutter.

Make them always visible and get folding!

"fade_fold_buttons": false

ss 2013-01-08 at 11.27.27 AM

5. Bold Folder Labels

One of the downsides to Sublime Text is that the sidebar isn’t as strong as other editors. One visual cue that helps me out is bolding folders. This helps me quickly identify what is a folder and what is a file.

"bold_folder_labels": true

ss 2013-01-08 at 11.28.45 AM

More…

I’ve got plenty more in a book I’m writing about Sublime Text. If you are interested in improving your text editor productivity, please sign up below and I’ll give you a hoot when it goes live!

Let me know when this book launches

Enter your email address below and I’ll give you a hoot when its ready plus a discount code for being so great!