Sublime Productivity

(1)

(2)

Sublime Productivity

Code Like a Pro with Today’s Premier Text Editor

Josh Earl

This book is for sale athttp://leanpub.com/sublime-productivity This version was published on 2014-11-22

This is aLeanpubbook. Leanpub empowers authors and publishers with the Lean Publishing process.Lean Publishingis the act of publishing an in-progress ebook using lightweight tools and many iterations to get reader feedback, pivot until you have the right book and build traction once you do.

(3)

Tweet This Book!

Please help Josh Earl by spreading the word about this book onTwitter! The suggested hashtag for this book is#sublimetext.

Find out what other people are saying about the book by clicking on this link to search for this hashtag on Twitter:

(4)

Contact Me

Sublime Productivity is a work in progress. If you’d like to let me know about an error (I’m sure there are a few), or if you just have a question or want to offer some constructive feedback, email me at [email protected].

(12)

Free Weekly Productivity Tips

Want a weekly dose of Sublime Text tips to improve your productivity and streamline your workflow?

Head on over tohttp://sublimetexttips.com/newsletter¹and drop your email address in the signup form.

(13)

About this Book

Which version of Sublime Text does this book cover?

The short answer

The final version of this book will assume you’re using Sublime Text 3. But right now we’re in …

That awkward phase

I started writing this book shortly before Sublime Text 2 was released, and most of the content you’ll read was written and tested for ST2.

As of this draft, ST3 is in public beta, and I’m officially in the process of updating the manuscript to cover the new version.

The Sublime team tends to do extended beta cycles to give users and plugin developers plenty of time to play with the new bits. New features appear from time to time, and existing ones are tweaked in subtle ways.

So far, ST3 is looking like an incremental upgrade with lots of under-the-hood improvements but relatively few new features. I’m incorporating the additions into the book naturally, and for now, including a note that calls them out as new in ST3.

Plugins are where it gets tricky. Plugins are generally written in Python, and in ST3, the Sublime team switched from Python 2.6 to 3.3. Since Python 3.x includes API changes, existing Sublime plugins have to be updated to work with ST3. The required changes aren’t difficult, according to the Sublime team, and more plugins are adding ST3 support every day.

I’ll attempt to only cover plugins that have been updated for ST3, but if you find one that doesn’t work, please bear with me.

Conventions

Why are you telling me to click stuff in menus?

I love keyboard shortcuts, and Sublime has dozens of great ones. but you won’t find many in the front part of the book. Why is that?

(14)

About this Book iv In earlier versions of the book, I tried to include the keyboard shortcuts along with the step-by-step instructions. It was repetitive and clumsy, because Sublime’s shortcuts differ radically between the Windows and Linux versions and the OS X versions.

It clutters the reading experience to include keyboard shortcuts, because they’re different for each operating system.

The menus, on the other hand, are more consistent across platforms. The menus are also more discoverable: If you forget a keyboard shortcut, it’s pretty hard to figure out where to find it. But the menus are all there for you to explore. Plus the menus generally include the keyboard shortcuts, so you can often learn the keyboard shortcut if you know where a feature is in the menu.

So even though I firmly believe you should learn the keyboard shortcuts for features you use frequently, I decided that I’d use the menu options where they are available. If there’s no way to do something via the menu, I’ll fall back to the Command Palette, and I’ll only specifically list a keyboard shortcut if there’s no other way to accomplish a task.

Mainly give menu-driven instructions to make cross-platform instructions more succinct.

Hey, where are the keyboard shortcuts?

Instead of including the keyboard shortcuts in the main portion of the book, I’m in the process of compiling a curated list of the most useful keyboard shortcuts, which will be available in the back of the book.

Formatting notes

When I’m providing a walkthrough, things you need to click or execute are in bold.

Text you should enter is listed infixed-width font, as are file paths, names and extensions, and

(15)

Did you get this book for “free”?

I don’t make any effort to put copyright protection (DRM) on this book because I know it’s such a pain for you, the reader. I once bought a novel in ebook format only to realize that I had to use proprietary Adobe software just to open it. Curling up on the couch with my 15” ThinkPad isn’t an enjoyable way to read, and I spent the next 20 minutes scouring the torrent sites in search of a DRM-free copy that I could load on my ereader. That’s no way to treat a customer. If you pay for

a book, you should be allowed to view it on any device your heart desires.

On the other hand, this book is a lot of hard work to write and update. If a friend sent you a “free” copy of this book, or you downloaded a full copy for “free” … Well, that means I’m not getting paid for my effort, which makes me (and my kids) sad.

So if that’s you, and if you’ve found that this book has provided value for you, consider buying a copy athttp://sublimeproductivity.com².

In addition to a warm fuzzy feeling for doing the right thing, you’ll also get updates to the book as I publish them.

(16)

(17)

1. Side Bar

Sublime’s side bar contains a browsable list of files and folders. You can expand nested folders to show their contents, open the files for editing, or preview their contents.

While the side bar provides convenient access to open files and folders, it also imposes some surprising limitations in its out-of-the-box configuration. You can’t can’t drag and drop files or folders to rearrange them, and the right-click menus provide only basic file commands.

Toggling the Side Bar

When you first install Sublime, the side bar should be enabled by default. You can quickly toggle it off if you’d like to devote more screen real estate to your code and reenable it when you need to browse for another file.

To toggle the side bar:

• Click View | Side Bar | Show Side Bar or View | Side Bar | Hide Side Bar.

Or press Command+K,Command+B on Mac OS X or Ctrl+K,Ctrl+B on Windows and Linux.

Previewing Files

Sublime’s preview feature is one of those subtle touches that can make a big difference in your day-to-day work. I frequently find myself hunting through multiple files, looking for a particular piece of code. In most editors, each file I examine opens in a new tab, and before long I have two dozen tabs open.

When you single click a file in the Sublime side bar, Sublime displays its contents in the editing window without creating a new tab. You can scroll through the file, or preview other files as needed. To open the file for editing, double click its entry in the side bar, or just start editing it. Either will pop open a new tab for the file.

Preview tabs

In Sublime Text 3, single-clicking a file opens the preview in a special temporary tab. You can identify this tab by the italicized file name in the tab’s title. The preview tab is reused when you single-click another file.

It’s an improvement over the old model where the preview took over the active tab because it allows you to peek at files while still referring to the files you’re actively working on. If you start editing the file, Sublime promotes the preview tab to a regular tab.

(18)

Side Bar 3

Opening Folders

The Folders section of the side bar shows any folders you’ve opened in Sublime, as well as the files they contain.

To add a folder to the side bar:

• Drag the folder from your file explorer into the Sublime side bar. Or, on Mac OS X, drag the folder into the Sublime icon on the dock.

You can tell Sublime not to show selected folders or file types in the side bar. This is convenient for hiding files that Sublime can’t edit, such as.pnggraphics, or for excluding

the compiled outputs of platforms such as CoffeeScript or SASS. To customize Sublime’s file exclusions, see thefolder_exclude_patterns,file_exclude_patternsand binary_-file_patternssettings in thePreferences.sublime-settingsfile. You can override the

defaults in your user-specific settings, and you can also customize them on a per-project level.

Toggling the Open Files Section

By default, the side bar is divided into two sections, Folders and Open Files.

The Open Files section shows dots on files that have been modified and close icons on unmodified files.

You can hide the Open Files section if you’d prefer, since it doesn’t provide much information that you can’t already glean from your list of tabs.

To toggle the Open Files section:

• Click View | Side Bar | Hide Open Files or View | Side Bar | Show Open Files.

Menus

While the Sublime Side Bar is helpful for basic navigation and for visualizing your project’s structure, it offers only a barebones set of commands for working with the files and folders that make up your project.

The Side Bar has three different right-click menus, and they’re all pretty bare bones.

(19)

Side Bar 4 In the Folders section, right-clicking on a folder brings up a menu with a few basic options: New File, Rename…, New Folder, Delete Folder and Find in Folder. New File, New Folder and Rename… open an input panel at the bottom of the screen that allows you to enter the desired file or folder name. The Find in Folder option opens a Find panel and populates the folder name into the Where… field.

Deleting a folder with open files

When you use the Delete Folder command, Sublime doesn’t close tabs for files that were contained in the deleted folder. The tabs remain open as if nothing happened, but you’ll get an error message if you make changes and attempt to save the file.

Right-clicking a file in the Folders section brings up just three options: Rename, Delete File and Open Containing Folder… Rename opens an input panel where you can type the new file name. Selecting the Delete option removes the file and closes any open tabs associated with it.

Version Difference!

In Sublime Text 2, deleting a file from the Side Bar removes it from the file system but leaves it open in a tab, changes the tab to unsaved. Easy to accidentally restore the file by saving the tab.

The Open Containing Folder command opens your system file manager to the parent folder of the selected file.

Rearranging files

Since the Side Bar doesn’t allow you to drag and drop files to reorganize them, using Open Containing Folder to and then shuffling files in your file manager is often the best workaround.

(20)

2. Command Palette

If you’re a keyboard junkie, you’re going to enjoy Sublime’s Command Palette. It allows you to use almost all of the commands available in the menus without fumbling for the mouse or digging through nested menus with the arrow keys.

The palette uses a simple search-based user interface. When you open the command palette, a floating command box appears with an alphabetical list of commands below it. Type a partial command name, such as side bar, and Sublime filters the list using its usual fuzzy matching

algorithm.

Command palette

Once you spot the command you’re looking for, such as Toggle Side Bar, use the arrow keys to highlight it, then press Enter.

One of my favorite uses for the Command Palette is as an aid for learning Sublime’s keyboard shortcuts. Try to develop the habit of using the Command Palette to perform actions when you can’t remember the keyboard shortcut. When you use the palette to perform an action, such as Find

in Files, the keyboard shortcut appears to the right of the command’s name. Also, the full listing of

(21)

Command Palette 6 Sublime uses a similar command box interface for other commands, including navigating around in a file, opening other files, and switching projects, and the Package Manager plugin uses the same approach to display a list of plugins you can install. Many third party Sublime plugins also put commands in the Command Palette.

Keyboard Shortcuts

OS Command Shortcut

Mac OS X Command Palette Shift+Command+P

Windows Command Palette Ctrl+Shift+P

Linux Command Palette Ctrl+Shift+P

..

Fuzzy matching

Sublime relies heavily on filterable lists to help you quickly execute commands, open files and navigate to specific bits of code. This filtering approach is backed by a “fuzzy matching” algorithm that lets you quickly narrow the options without entering long search terms.

While literal string matching includes only list items that contain the exact characters you entered in the exact order you entered them, fuzzy matching retains all items that contain the characters you entered somewhere in the text being searched—not necessarily in the exact order your entered them.

In the Command Palette, you can use fuzzy matching to create your own easy-to-remember shortcuts. For example, when I find a block of JavaScript online that I want to inspect more closely, I’ll frequently copy and paste it into a new tab in Sublime and set the syntax highlighting to the appropriate language. I can do this quickly using fuzzy matching by launching the Command Palette and typingssjs, which highlights the Set Syntax: JavaScript command.

In Sublime Text 3, fuzzy matching even works when you enter characters out of order, sosssjstill

(22)

3. Minimap

The minimap is a distinctive feature of Sublime. It’s turned on by default and appears on the right-hand side of the screen. It shows a zoomed-out view of the file, as if you’d zoomed out to 5 percent or so. The section of the file that’s currently visible on the screen is highlighted with a rectangle. Helps to keep your bearings when you’re working in a long document. Is a useful navigational aid at times. Sometimes you can recognize sections of code by their shape, even at such a small scale. It’s also useful when you’re searching for terms in a document. The matches are highlighted on the minimap as well as in the editing window, so you can get a sense for how often the search term is used and how the usages are distributed throughout the file.

Similarly, when spell checking is enabled, the minimap highlights spelling errors in red.

The minimap also allows you to perform some limited navigations directly. You can click on a section of the document to jump to it directly. You can also drag the highlighted part that represents the view point up and down to scroll the file.

You can hide the minimap if you find it distracting or just want to reclaim the space for your code. To toggle the minimap:

(23)

4. Sessions

When you close and reopen Sublime Text 2, you may notice that the editor reopens any files you were editing before previously. Sublime uses a session to keep track of these open tabs and a whole lot more.

Sessions make the editing experience in Sublime feel seamless. Closing the editor to install a plugin or (if you’re a Windows user) reboot your machine is a zero penalty task, since you won’t need to reopen files and reposition windows to get back to the setup you had before quitting the app. You also won’t lose in-progress work because of a feature called hot exit. Hot exit stores unsaved changes to open files in the session. Sublime doesn’t prompt you to save unsaved changes when exiting for this reason. They are squirreled away in the session and can be saved next time you open the editor to work on them.

One of my favorite features of Sublime is how hot exit turns it into a great scratch pad. For example, if I need to make a quick note during a phone call, I’ll start a new tab in Sublime and capture the information. The tab will stick around until I can transfer the info somewhere more permanent, and I don’t have to worry about forgetting to save it and losing the information when I close Sublime.

The session file may also include: • Open files, folders, projects

• History of recently opened files and projects • History of recent find and replace terms

• Size and screen position of the Sublime Text 2 window • Extra layout panels (screen splits)

• Cursor and scroll positions within open files

There’s some overlap between what Sublime stores in the globalSession.sublime_sessionfile and

in the.sublime-workspacefiles that accompany a Sublime project file.

If you’ve been working on something for a while, you may find that you have several files and folders open, and maybe you’ve split up your screen with a couple of custom layouts. You can save your session as a project that you can return to later to restore your tabs, folders and layouts. Just click Project | Save Project As … and put the project file somewhere safe.

(24)

Sessions 9

Viewing the Session File

The session information is stored in a file namedSession.sublime_sessionin the∼/Library/Application

Support/Sublime Text 2/Data/Settingsdirectory on Mac OS X or under%USERPROFILE%\AppData\Roaming\Sublime Text 2\Settingson Windows.

Like Sublime’s other settings, the session file is formatted as a JSON document, so it’s possible to read and edit it manually using another text editor. I wouldn’t recommend this, as it’s pretty easy to make a change that’ll cause errors when Sublime launches. It comes in handy occasionally, though. I recently upgraded my ThinkPad to Windows 8, and I was able to edit the session file to fix some errors that resulted from changing my username tojoshinstead ofjearl.

Tweaking Session Preferences

If you frequently use Sublime to open files from the command line, you may get annoyed when Sublime continually restores previously opened files. You can override the hot exit and restore previous file defaults in your user preferences file.

Disabling Hot Exit

When hot exit is disabled, Sublime will always ask whether to save or discard any new or modified files when you exit the application.

To disable hot exit:

1. Click Sublime Text 2 | Preferences | Settings – User on Mac OS X, or Preferences | Settings

– User on Windows or Linux. Or press Command+, on Mac OS X.

2. On a new line inside the curly braces, add"hot_exit": false.

3. Save and close the file.

Disabling Remember Open Files

When hot exit is disabled, Sublime will still restore your previous files unless you turn off the remember open files setting.

Changing this setting won’t do anything if hot exit is enabled. I want that 15 minutes of my life back …

(25)

Sessions 10 1. Click Sublime Text 2 | Preferences | Settings – User on Mac OS X, or Preferences | Settings

– User on Windows or Linux. Or press Command+, on Mac OS X.

2. On a new line inside the curly braces, add"remember_open_files": false.

(26)

5. Projects

Whether you’re coding a Ruby on Rails site or writing a book, most text editing tasks involve working with more than one file. Juggling related files using Finder or Windows Explorer is a hassle and forces you to constantly switch applications to hunt for files.

Sublime’s projects alleviate this pain. Using projects, you can: • Navigate effortlessly to related files.

• Maintain multiple workspaces, including separate sets open files and window layouts, reducing tab clutter.

• Improve code consistency among collaborators by specifying project-level overrides for settings such as white space.

• Automate repetitive tasks that need to be performed on a set of files.

I use several projects to organize different segments of my work, including my blog, this book, and several coding projects. Each of these workspaces is customized for the task at hand: The blog project has an open tab for a post that I’m working on, and another with some reference notes, and my blog’s folder is open in the sidebar. One of the coding projects has a couple of open files, an open folder and a horizontal split layout that allows me to move between a JavaScript file and an HTML file. Thanks to Sublime’s projects, I can switch seamlessly between these workspaces without having to shuffle windows and close tabs, and it frees me from having to leave all of my in-progress work open in the same window.

How Projects Work

A Sublime project is a JSON-formatted settings file with a sublime-project extension. This file

contains several pieces of information, including: • Folders to be included in the project • Custom settings for the project

• Custom build commands for the project

The project file is intended to be kept in the root directory of your project, and it can be checked into version control and shared among team members.

In addition to thesublime-projectfile, Sublime also creates asublime-workspacefile to manage

details specific to your working environment, including which files you have open and any window layouts you’ve created. Don’t edit this file by hand or commit it into version control, or your team members will hunt you down…

(27)

Projects 12

Creating Projects

To create a new project:

1. Click Project | Save Project As ….

2. Browse to the root directory where your project files are saved. 3. Enter a name for the project file.

4. Click Save.

Mac OS X users have another way to create a new project: Simply drag a folder or group of files into the Sublime icon on the dock.

Adding Folders

Once the project file is created, it’s time to add some folders. I usually add the root folder for the site I’m working on. Any child folders inside of the root folder will automatically be included, as well as the files they contain.

To add a folder using the menu:

1. Click Project | Add Folder To Project … 2. Browse to the folder you want to add. 3. Click Open.

You can also drag-and-drop folders from a file explorer into the sidebar under the Folders header. When you add folders to the project, Sublime automatically updates the.sublime-projectfile and

saves the changes in the background. To quickly clean out all folders in a project:

• Click Project | Remove all folders from project.

Opening Projects

As a convenience, Sublime automatically reloads the last open project when launched. But chances are you’ll need to bounce around among several projects frequently, and Sublime makes it easy. To open an existing project:

(28)

Projects 13 1. Click Project | Open Project….

2. Browse to the project file. 3. Click Open.

Or, if the project is one you’ve opened recently: 1. Click Project | Recent Projects.

2. Select the project from the list of available choices.

The most convenient method is the Switch Project in Window feature, which is available from the menu as well as via a keyboard shortcut.

To invoke Switch Project in Window: {#switch-project-in-window}

1. Click Project | Switch Project in Window, or press Control+Command+P on Mac OS X or Ctrl+Alt+P on Windows or Linux. An input box appears, along with a list of available projects.

2. Type part of a project name. The input box supports fuzzy matching, so the list is filtered to projects that contain the entered characters.

3. Press Enter when the desired project is highlighted to open the project.

Multiple workspaces per project

Working on a major project often means that you need to shift contexts frequently. You might split your time between front end web coding and server-side development. Or perhaps you’re jumping back and forth between the feature you’re currently working on and one that’s just came back with a few issues from QA. And then there’s that emergency bug fix to the feature you worked on last sprint …

Each context shift comes with a small setup cost. There are files to open and close. You might have preferred arrangements of tab groups for different tasks: a three-column view for front end work so you can see HTML, CSS and JavaScript open side by side, two rows for back end work, with your source on top and your unit tests below. You jump between tasks a few times, and before you know it you have 27 unrelated tabs scattered across three tab groups.

Sublime’s workspaces are ideal for establishing different contexts within your project. They allow you to create and save multiple arrangements of tab groups and open files per project. You can even have multiple Sublime windows open with separate workspaces to allow you to jump back and forth between contexts quickly.

(29)

Projects 14 Workspaces are JSON files with a.sublime-workspaceextension, and they contain everything from

your open files and tab groups to your cursor position within those files and your unsaved changes. If you’ve created a project, you already have a primary workspace file—Sublime creates one by default.

To create another workspace for the current project, click Project | New Workspace for Project. A new Sublime window opens with a partial copy of your current workspace: Preferences like Side Bar visibility and open folders are carried across, but open tabs are not.

If you’re just looking to change a few files without disturbing your current workspace, you can use this new workspace as is and simply close it when you’re ready to return to your original workspace. But if you might want to return to the workspace in the future, click Project | Save Workspace As

…. You can also use Save Workspace As to save a workspace from an ad hoc collection of open files

without creating a whole project first.

Create a dot files workspace

Do yourself a favor and make a workspace for that assortment of system configuration files you’re endlessly tweaking.

To switch to a previously saved workspace within the current window, click Project | Open Recent and select the desired workspace, or use theSwitch Project in Window command, which opens a filterable list of recent projects and workspaces for you to choose from. If the workspace you’re looking for doesn’t appear in either list, click Project | Open Project … to browse to and open the workspace directly.

Bug alert!

As of Sublime Text 3 build 3047, opening a project or workspace by double-clicking the file in your file manager creates multiple Sublime windows, each with a separate copy of the project. This is a bug, as far as I can tell. You can work around the problem until it’s fixed by using Open Project when you want to use a project or workspace that isn’t in your recent projects list.

Navigating in Projects

Projects really shine when used in concert with the Go to anything feature. Since Go to anything searches all open files and folders, and projects give you control over which folders are open, you can effortlessly jump between files without using the mouse.

For example, say you’re working in a large JavaScript project, and you’ve added the root directory for your project.

(30)

Projects 15 If you’re editingindex.html, all you need to do to jump toscript/plugin/myplugin.jquery.jsis

hit Command+P on Mac OS X or Ctrl+P on Windows or Linux. Then type myp and hit Enter. This is especially convenient when your project has a complex folder structure that’s a pain to navigate with the mouse.

Editing Project Files

While Sublime makes some changes to project files in the background, to really put projects to work, you’ll need to edit the files by hand.

To open the project for editing:

• Click Edit project. The project file opens in a new tab.

Project-Specific Settings

A well-customized project file can help keep files organized and consistently formatted, even with multiple team members contributing. They can also help automate routine tasks.

The project file has three elements:folders,settings, andbuild_settings.

Including folders

Thefolders element gives you fine-grained control over how Sublime handles folders within the

project. When you add a folder to your project, Sublime adds a new element to thefoldersarray.

You can add folders by hand as well. Use relative paths here to make the project file work properly regardless of where the root folder is located.

Excluding files and folders

You can also specify folders, files and file types to exclude, both for the project as a whole or just specific subfolders.

This is particularly useful for avoiding cluttering up your sidebar with auto generated files. For example, if you’re working on a project that uses SASS or CoffeeScript, by default bothstyle.sass

and style.css will show up in your sidebar and in the Go to anything menu. Specifying the

following file exclude pattern hides compiled CSS and JavaScript files:

1 "file_exclude_patterns": ["*.css", "*.js"]

(31)

Projects 16

1 "folder_exclude_patterns": ["styles"]

Overriding settings

Project files can specify overrides for some user preferences with thesettingselement. On a

multi-member team, this can prevent irritations like inconsistent use of tabs and spaces for formatting, and, if the team agrees on spaces, how many spaces should constitute one tab width.

Here’s how you could enforce the use of two spaces for indenting code:

1 "settings":

2 {

3 "translate_tabs_to_spaces": true, 4 "tab_size": 2

5 }

Thebuild_systemselement allows you to specify a list of custom commands that will be available

under the Tools | Build System menu. You can map just about any arbitrary command supported by your platform.

For example, the following (fairly useless) entry creates a menu item called List that runs thels

command to print a list of the project’s files and folders in the Sublime console:

1 "build_systems": 2 [ 3 { 4 "name": "List", 5 "cmd": ["ls"] 6 } 7 ]

More useful build tasks could include:

• Compile.coffeeor.scssfiles prior to deploying a static website.

• Copy files to a staging server withsftporrsync.

• Running a custom bash or PowerShell script to remove stray build files.

Project File Example

Here’s an example project file from the Sublime Text documentation so you can see how the pieces fit together:

(32)

Projects 17 1 { 2 "folders": 3 [ 4 { 5 "path": "src", 6 "folder_exclude_patterns": ["backup"] 7 }, 8 { 9 "path": "docs", 10 "name": "Documentation", 11 "file_exclude_patterns": ["*.css"] 12 } 13 ], 14 "settings": 15 { 16 "tab_size": 2 17 }, 18 "build_systems": 19 [ 20 { 21 "name": "List", 22 "cmd": ["ls"] 23 } 24 ] 25 }

(33)

6. Tabs

Opening Tabs

Opening a new tab in Sublime creates a empty, unsaved file, just like in many other text editors. Unlike most editors, however, Sublime keeps track of anything you type in a new tab, regardless of whether you save it as a file or not. Sublime will restore your unsaved work even if you close and restart the app.

This is a nice fallback in case of a system crash or dumb mistake. It also makes Sublime useful as a scratch pad for note taking. You can fire up a new tab to jot down a phone number and rest assured that it’ll be there until you close the tab deliberately.

To open a new tab:

• Click File | New File.

Or press Command+N on Mac OSX or Ctrl+N on Windows or Linux. Or double click a blank spot in the tab bar.

Tabs with unsaved changes show a dot instead of the normal tab close button. It’s subtle enough that I didn’t notice it at first.

Closing Tabs

In addition to closing unneeded tabs the old fashioned way, by clicking their close buttons one at a time, you can also close them with a keyboard shortcut or dispatch them en masse.

To close the current tab from the keyboard:

• Press Command+W on Mac OS X or Ctrl+W on Windows or Linux. To close all tabs but the currently selected tab:

1. Right-click on the tab you’d like to keep open. 2. Select Close others.

To close all tabs to the right of the currently selected tab: 1. Right-click on the desired tab.

(34)

Tabs 19

Tearing Tabs Off

Sublime supports “tearing” tabs off, similar to most web browsers. The torn-off tab creates a new Sublime Text window. It’s a useful trick when you have two files open and want to refer to one while working in the other, especially if you’re rocking a multi-monitor setup.

To tear off a tab:

• Click and drag the desired tab outside of Sublime’s tab well.

Reopening Closed Tabs

If you inadvertently close a tab, you can quickly get it back with the Reopen Closed File command. Sublime keeps track of the last 10 or so files you’ve opened, and repeatedly invoking Reopen Closed

File will bring them back to life, one at a time.

Sadly, Sublime won’t restore unsaved tabs once you’ve closed them. To invoke Reopen Closed File:

• Click File | Open Recent.

Or Press Shift+Command+T on Mac OS X or Ctrl+Shift+T on Windows or Linux.

Switching Tabs

You can jump between tabs from the keyboard using three different strategies: • Using the number keys to select a tab by position.

• Using the arrow keys to move to the next or previous tab based on the tab’s position in the tab bar.

• Using the arrow keys to jump between tabs based on the order in which they were last modified.

To jump to one of the first 10 tabs by position:

• Press Command+1 through Command+0 on Mac OS X or Alt+1 through Alt+0 on Windows or Linux.

(35)

Tabs 20 • Click Goto | Switch File | Next File or Goto | Switch File | Previous File.

Or press Option+Command+Right and Option+Command+Left on Mac OS X or Ctrl+PageDown and Ctrl+PageUp on Windows or Linux.

To navigate between tabs in the order in which you last viewed them:

• Click Goto | Switch File | Next File in Stack or Goto | Switch File | Previous File in Stack. Or press Ctrl+Tab and Ctrl+Shift+Tab.

(36)

7. Panes

Sometimes it’s handy to keep two or more files visible on screen at the same time. Maybe you’re writing some Backbone.js code and need to see the library’s commented source code as a reference, or maybe you’re hacking an HTML prototype together and find yourself constantly jumping from HTML to CSS and back. You could tear tabs off and create a second Sublime window, but Sublime provides a better solution with panes.

Panes allow you to view and edit multiple files in one window in a variety of configurations, including vertical and horizontal splits and various combinations of the two.

Layouts vs. groups

Sublime offers two tools for managing multiple panes: layouts and groups.

Layouts

Layouts are preconfigured arrangements of panes. You can choose from one, two or three horizontal splits, up to four vertical splits, or a 2-by-2 grid.

Using layouts is convenient if one of the supported configurations meets your needs, and it’s the only way to achieve a 2-by-2 grid.

Panes created by a layout persist until you change layouts, regardless of whether they contain any tabs.

Groups

Groups, on the other hand, are more flexible. There’s no limit to the number of groups you can create. You can also combine horizontal and vertical splits, although as we’ll see, the combinations are somewhat limited.

Using groups, you could split your editor window into two columns, then split the right column into two rows.

Groups are also more dynamic than layouts. A group’s pane closes when you close the last tab it contains.

(37)

Panes 22

The concept of groups is new in Sublime Text 3, and Sublime Text 2 only supports layouts. While layouts are still relevant for Sublime Text 2 users, most ST3 users will likely prefer the additional flexibility that groups offer. The main advantage that layouts still have in Sublime Text 3 is the 2-by-2 grid configuration, which isn’t achievable with groups.

Managing layouts

To open a multi-column layout, click View | Layout | Columns: 2, View | Layout | Columns: 3, or

View | Layout | Columns: 4.

To revert to the default layout, click View | Layout | Single.

When you change layouts, the new panes appear to the right or below existing panels, and they don’t have any tabs assigned to them by default.

If you switch to a layout with fewer rows or columns, tabs from the panes that disappear are merged into the row above or the column to the left, depending on the type of layout you’re using.

Sublime retains the positioning of tabs when you switch from a multi-row layout to a multi-column layout and vice versa. If you go from a two-column layout to a two-row layout, tabs from the rightmost column move to the newly created bottom row.

Managing groups

Creating groups

To open a new, empty group, click View | Groups | New Group.

You can also create a new group and populate it with the file you’re currently editing in one step. Just click View | Groups | Move File to New Group.

Arranging groups

The Max Columns setting governs how Sublime arranges groups as you create them. Sublime preferentially creates a new column each time you add a group until you hit the maximum number of columns. Once the maximum number of columns is reached, Sublime starts adding rows to the rightmost column.

(38)

Panes 23 To change the the Max Columns setting, click View | Groups and choose the desired number of columns, up to a maximum of five.

It’s easy to create a three-pane split, with two columns and two rows on the right. Starting from the default, single-pane layout, set Max Columns to two, then create two new tab groups.

If you’d like to split your screen horizontally into two rows, set Max Columns to one. Then add a second tab group.

Although it would be handy, it’s not currently possible to add rows to columns on the left side of the screen.

Closing groups

The simplest way to get rid of a tab group is to close all of its tabs or move them to another group. The group disappears automatically when you remove the last file.

If the current group has a lot of open files, the Close Group command is faster. To close the current tab group, click View | Groups | Close Group.

When you close a tab group that has open tabs, the files shift to the previous pane in the pane sequence.

The Close Group command isn’t available in Sublime Text 2.

Rearranging tabs

The simplest way to move a tab from one pane to another is by dragging its tab and dropping it into desired pane.

The Move File commands allow you to accomplish the same task via the menu or keyboard shortcuts.

Move to Next Group

The Move to Next Group command shifts the current tab one column to the right or one row down. To use Move to Next Group, click View | Move File to Group | Next.

(39)

Panes 24

Move to Previous Group

Move to Previous Group nudges the current tab left one column up a row, depending on your screen arrangement.

To use Move to Previous Group, click View | Move File to Group | Previous.

The Move to Previous Group command isn’t available in Sublime Text 2.

Move to numbered group

When you create a multi-pane screen configuration, Sublime assigns numbers to the first nine panes. You can move tabs by referencing these numbers.

For example, to move the tab you’re editing to the third pane, click View | Move File to Group |

Group 3.

Sublime Text 2 only assigned numbers to the first four panes.

Navigating between panes

When you’re editing files in several panes simultaneously, you’ll probably need to move from file to file frequently. The Focus Group commands make it simple to jump from pane to pane in these scenarios.

Focus Previous Group / Focus Next Group

The Focus Previous Group and Focus Next Group commands allow you to step to the next adjacent pane. These commands are ideal when you’re toggling back and forth between two files.

To use step back by one pane, click View | Focus Group | Previous. To step forward to the next pane, click View | Focus Group | Next. In both cases, focus shifts to the last place you edited in the active tab.

These commands wrap, so running Focus Next Group when you’re on the last pane will focus the first, and Focus Previous Group will jump to the last pane if you’re editing the first.

(40)

Panes 25

Focus Numbered Group

The Focus Previous Group and Focus Next Group commands work well when you have two or three panes open, but what if you’re using a 27” monitor and rocking a three-column layout with four rows in the last column? Cycling through half a dozen panes to get to the one you want gets old in a hurry.

Focus Numbered Group allows you to jump directly to a pane with a numeric address. Sublime applies an index to the first nine open panes, numbering columns left to right and then numbering rows top to bottom.

Navigating with the Focus Numbered Group command is a matter of picking the right index for the pane you want.

Columns are indexed left to right, and rows are numbered top to bottom. The only exception is the 2-by-2 grid layout, in which the top row panes are numbered 1 and 2, from left to right, and the bottom row panels are 3 and 4, also left to right.

Sublime Text 2 only assigned numbers to the first four panes.

For example, to jump to the rightmost column of a four-column configuration, click View | Focus

Group | Group 4.

To switch to the bottom-left pane of a grid view, click View | Focus Group | Group 3.

Panes: Separate or not?

Some commands seem to ignore panes, treating all tabs as if they are in the same pane, while others only operate on tabs in the current pane.

Jump Back/Jump Forward and Previous File/Next File act as if the panes don’t exist. If you’re editing a file in the right column, Jump Back might switch focus to the left pane.

But other commands only work within the current pane. Tab numbers start over in each pane, and Previous File in Stack/Next File in Stack cycle through tabs in the active pane only.

Moving files between panes

Once you’re done tweaking your screen configuration, it’s easy to move files around as you work using the Move File to Group commands. When you move a file to another pane, focus shifts to that pane so you can continue editing without missing a beat.

(41)

Panes 26 To move the tab you’re editing backwards one pane, click View | Move File to Group | Previous. You can also move the active file to a pane by number. To move a file to the rightmost pane in a three-column configuration, for example, click View | Move File to Group | Group 3.

The Move File to Group commands are new in Sublime Text 3.

Resizing panes

You can resize horizontal and vertical splits to better fit the task at hand.

To resize a pane, hover your cursor over the thin separator line until it turns into a double arrow, then drag the pane to the desired size.

Saving and restoring multi-pane configurations

Sublime will save and restore your custom pane configurations when you close and restart the program. If you’re working on in a project, any custom layouts you create are stored in the associated

sublime-workspacefile. When you’re just working on several unrelated files, Sublime will save your

layout tweaks in thesublime_sessionfile.

Split View of a Single File

While it’s great to keep code files short and concise, sometimes there’s just no getting around that mammoth FAQ page or that epic jQuery plugin file. Naturally the FAQ page has a list of anchor tags that you have to update as you add sections at the bottom, and the jQuery file has 20 local variables declared at the top that you need to refer to constantly.

In this situation, the New View into File command will save your scroll wheel—and your sanity. This command opens a copy of the current file in a new tab. Changes made in one tab are reflected instantly in the other tab.

To use New View into File, click File | New View into File.

When you combine this with a multi-pane layout, you’ll find yourself with less need to scroll and jump around in the document, and you won’t lose your place as often.

You can create as many new views as you’d like, and you could even create a grid showing four different sections of the file. Since each view is just a new tab, you can push them to different panes with the Move File to Group command and jump between views with the Focus Group command.

(42)

(43)

8. Editing Text

Paste and Indent

Pasted code does its best to mess up your carefully formatted file, especially if you’re embedding it into an existing block of code. Typically the leading white space from the copied code is added to the white space from the current code block.

For example, here’s some JavaScript I’m working on:

1 $(function() {

2 function growBeets() {

3 //TODO implement beet growing algorithm

4 };

5 });

and in another code file I have some logic that I’m moving into thegrowBeetsfunction: 1 $(function() {

2 function runSchruteFarm(bulbs) {

3 for (var i = 0; i < bulbs.length; i++) { 4 plant(bulbs[i]);

5 }

6 };

7 });

But when I position the cursor inside thegrowBeetsfunction and paste theforloop, disaster ensues: 1 $(function() {

2 function growBeets() {

3 for (var i = 0; i < bulbs.length; i++) { // double the white space!!! 4 plant(bulbs[i]);

5 }

6 };

7 });

Paste and Indent handles this scenario correctly, calculating the appropriate amount of indentation

for first line of the pasted code. To perform a Paste and Indent:

(44)

Editing Text 29 1. Copy the desired lines of code to the clipboard.

2. Position the cursor at the correct indentation level. 3. Click Edit | Paste and Indent from the menu.

Or press Shift+Command+V on Mac OS X or Ctrl+Shift+V on Windows and Linux.

You can remap the default Paste shortcut to perform a Paste and Indent, which should always do the right thing. Refer to theKey Bindingssection for a how-to.

Paste from History

Sometimes the C and V keys are just too dang close together. You’ve spent the last couple of minutes digging around for a block of code that you want to reuse, copied it, closed the file, and scrolled back to where you want to paste it into your working file. But instead of hitting the paste shortcut, you fat-finger a copy command. Nerd rage!

Paste from History comes to the rescue when you accidentally copy over something you wanted to paste. It’s like a clipboard ring for Sublime, allowing you to retrieve that overwritten code from a list of recently copied items.

Goto Symbol in Project was introduced in Sublime Text 3.

To use Paste from History, position your cursor where you want to insert the text, then click Edit |

Paste from History. A context menu appears next to your cursor, showing the first few characters

from each of the most recent things you’ve copied. Select the desired history item to paste it. You don’t have to do anything extra to include items in your paste history—it automatically stores the last 15 blocks you copied. Sublime doesn’t remove items from the list after you paste them, so you can access them again later.

Paste from History only stores text you copy from files open in Sublime, so don’t expect it to rescue that half-finished commit message you copied over. But it also doesn’t include text that you copy in other programs, so it offers an extra margin of safety when you’re grabbing snippets from code files and combining them with a few lines from Stack Overflow.

Paste from History isn’t limited to saving you from accidentally copying one too many times. It’s also helpful when you need to copy and paste code from several files, maybe when you’re fleshing out a new file with boilerplate code. Instead of copying individual code blocks, then jumping back to the file you’re building, you can just cruise around, filling up your clipboard history like a shopping cart, then return to your file and paste items where you need them.

(45)

Editing Text 30 Conveniently, the history won’t insert duplicate text, so if you’re shopping for snippets and forget whether you’ve copied something, feel free to just copy it again.

The paste history is specific to the current Sublime session. If you restart Sublime, the history is reset.

Indent, Unindent, Reindent

When I’m shuffling code around, I frequently need to adjust the indentation level. For example, removing anifblock might leave a few lines indented one tab width too far.

The Indent and Unindent commands move lines in or out by one tab width.

The Reindent command attempts to reset the lines relative to the indentation level of the surround-ing code. This is useful if you have multiple lines at several different indentation levels. Reindent does seem to get confused by comments, at least in JavaScript, but it’s a good first-pass tool that reduces the amount of manual formatting required on a code block.

There’s no keyboard shortcut for Reindent by default, but you can map one yourself if you use it frequently. Refer to theKey Bindingssection for a how-to.

To use the Indent command:

1. Position the cursor on the line to be formatted, or select a block of lines. 2. Click Edit | Line | Indent.

Or press Command+] on Mac OS X or Ctrl+] on Windows and Linux. To use the Unindent command:

1. Position the cursor on the line to be formatted, or select a block of lines. 2. Click Edit | Line | Unindent.

Or press Command+[ on Mac OS X or Ctrl+[ on Windows and Linux. To use the Reindent command:

1. Position the cursor on the line to be formatted, or select a block of lines. 2. Click Edit | Line | Reindent.

(46)

Editing Text 31

Insert Line Before/Insert Line After

Sometimes it’s necessary to open up space between the line I’m editing and the lines immediately before or after it. For example, I might be writing a line of jQuery code and decide that I should insert a comment above it, or maybe I want to set the line off from the code that follows with a line of white space.

Doing this manually involves jumping to the end of the line with End and then pressing Return, or pressing Up and then inserting an extra line.

The Insert Line Before and Insert Line After commands make this a one-step operation, inserting a blank line above or below the current line. It’s similar to moving the cursor to the end of the line and pressing Return, but much faster. The cursor jumps to the new line so you can immediately begin typing.

Insert Line After will also indent the next line correctly. If, for example, the previous line defines a

function, the inserted line will be indented one tab width. To insert a blank line below the current line:

• Click Edit | Text | Insert Line Before.

Or press Command+Return on Mac OS X or Ctrl+Enter on Windows and Linux. To insert a blank line above the current line:

• Click Edit | Text | Insert Line Before.

Or press Shift+Command+Return on Mac OS X or Ctrl+Shift+Enter on Windows and Linux.

Delete to End/Delete to Beginning

Often it’s necessary to prune the beginning or end of a line, such as when you’re removing part of a chained jQuery statement while keeping the selector, or removing the start or end tags on an HTML element. The usual way to do this is to highlight the text with the mouse or use a combination of the arrow keys Shift and Home or End, but Sublime’s Delete to Beginning and Delete to End commands are a better option.

Delete to Beginning deletes all the text and white space preceding the cursor, while Delete to End

removes everything that follows the cursor. To use the Delete to Beginning command:

• Click Edit | Text | Delete to Beginning.

Or press Command+Delete on Mac OS X or Ctrl+K, Ctrl+Backspace on Windows and Linux.

(47)

Editing Text 32 To use the Delete to End command:

• Click Edit | Text | Delete to End.

Or press Ctrl+K on Mac OS X or Ctrl+K, Ctrl+K on Windows and Linux.

The Delete to End and Delete Line shortcuts make a nice pair of editing tools, and Sublime recognizes this by making the keyboard shortcuts similar.

Delete Word Forward/Delete Word Backward

When you need to surgically remove a few words from the middle of a line, the Delete Word

Forward and Delete Word Backward commands are a handy alternative to highlighting text with

the mouse or Shift and arrow keys.

The Delete Word Forward command deletes from the cursor’s current position to the next space.

Delete Word Backward performs the same function in the opposite direction. Both will also delete

partial words if the cursor is positioned inside of a word.

There are no keyboard shortcuts mapped for these commands on Mac OS X by default, but it’s simple to set them up yourself. Refer to theKey Bindingssection for a how-to.

To use the Delete Word Forward command: • Click Edit | Text | Delete Word Forward.

Or press Ctrl+Delete on Windows or Linux. To use the Delete Word Backward command:

• Click Edit | Text | Delete Word Backward. Or press Ctrl+Backspace on Windows or Linux.

Soft Undo/Soft Redo

Undo and redo are extremely useful, but I frequently find that I’ll perform an undo only to realize that the action occurred off screen and I have no idea what, if anything, actually happened.

Sublime’s Soft Undo and Soft Redo address this issue by considering cursor movements and text selections as operations that can be reversed. They are rewind and fast forward buttons for your editing session. This ensures that your attention is focused on any text changes that occur.

(48)

Editing Text 33 The ability to restore lost selections can be a lifesaver as well. It’s frustrating when an errant click or button press cancels the selection of some text I’ve painstakingly highlighted, maybe a multi-screen block of text, or part of a three-screens wide piece of unwrapped code. In cases like these, executing a Soft Undo will restore the selection.

To perform a Soft Undo:

• Click the undo menu item under Edit | Undo Selection. (The text of the menu item changes to indicate what will happen when the action is invoked.) Or press Command+U on Mac OS X or Ctrl+U on Windows and Linux.

To perform a Soft Redo:

• Click the redo menu item under Edit | Undo Selection. (The text of the menu item changes to indicate what will happen when the action is invoked.) Or press Shift+Command+U on Mac OS X or Ctrl+Shift+U on Windows and Linux.

Transposing Letters and Words

Typing letters or words out of order usually necessitates a clumsy dance with the Shift and arrow keys, followed by a copy and paste and maybe fixing up the spaces on either side.

The Transpose command makes this a painless operation by reversing the position of a pair of letters or words.

There’s no keyboard shortcut for Transpose by default on Mac OS X, but it’s easy to set one up. Refer to theKey Bindingssection for a how-to.

To use Transpose:

1. Position the cursor between the letters or words you’d like to reverse. 2. Click Edit | Text | Transpose.

Or press Ctrl+T on Windows and Linux.

Changing Capitalization

For sheer tedium, few tasks can rival deleting words and retyping them to convert ALL CAPS to lowercase. Sublime supports several features for dealing with capitalization chores.

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

(49)

Editing Text 34 • Click Edit | Convert Case | Swap Case.

To use the Title Case command:

• Click Edit | Convert Case | Title Case. To use the Upper command:

• Click Edit | Convert Case | Upper.

Or press Command+K, Command+U on Mac OS X or Ctrl+K, Ctrl+U on Windows and Linux.

To use the Lower command:

• Click Edit | Convert Case | Lower.

Or press Command+K, Command+L on Mac OS X or Ctrl+K, Ctrl+L on Windows and Linux.

To define keyboard shortcuts for Swap Case or Title Case, refer to the Key Bindings section.

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, I couldn’t believe I’d been pounding Delete unnecessarily.

Sublime employs the Join Lines command to join the line below your cursor to the one you’re currently editing.

To use the Join Lines command:

1. Position the cursor on the first of the two lines. 2. Click Edit | Line | Join Lines.

(50)

Editing Text 35

Swapping Lines

Another common line operation is swapping the position of two lines, or shifting a block of lines up or down in the file. Copy and paste is one option, but if you’ll only be moving the lines a short distance, the Swap Line Up and Swap Line Down commands are a better alternative.

To use the Swap Line Up command:

1. Position the cursor on the line to be moved, or highlight one or more lines. 2. Click Edit | Line | Swap Line Up.

Or press Ctrl+Command+Up on Mac OS X or Ctrl+Shift+Up on Windows and Linux. To use the Swap Line Down command:

1. Position the cursor on the line to be moved, or highlight one or more lines. 2. Click Edit | Line | Swap Line Down.

Or press Ctrl+Command+Down on Mac OS X or Ctrl+Shift+Down on Windows and Linux.

Deleting Lines

Deleting an entire line without highlighting it first is simple using the Delete Line command. To use the Delete Line command:

1. Position the cursor on the line to be deleted. 2. Click Edit | Line | Delete Line.

Or press Ctrl+Shift+K.

Duplicating Lines

Duplicating an entire line or series of lines without copying and pasting is possible with the

Duplicate Line command.

Duplicate Line inserts a copy of the current line directly below the current line. If multiple lines are

highlighted, it performs the same action with the entire block. To use the Duplicate Line command:

1. Position the cursor on the line to be copied, or highlight one or more lines. 2. Click Edit | Line | Duplicate Line.

Sublime Productivity