Bulk install packages in Sublime Text

A couple of weeks ago I was setting up a new laptop and kept putting off installing Sublime Text (my code editor of choice) because I knew that it would also involve about fifteen minutes patiently working through my curated list of packages (add-ons / plugins), installing each one by one.

There’s got to be a simpler way, I suddenly thought. Sublime Text saves me so much time doing other stuff automatically, surely they’ve thought about this too.

I was right.

In fact, front-end developer extraordinaire Paul Irish asked this very question back in 2012.

How do it it

So, here is how to do it:

  1. Install Sublime Text (2 or 3).
  2. Install Package Control.
  3. Create a JSON file listing the "installed_packages" you want (see below) and save it to Packages/User/Package Control.sublime-settings.
  4. Restart Sublime Text and allow it to pick up and install the new packages.

Just be aware of any packages that need dependences that Sublime Text cannot install, for example Git or Zeal (offline documentation browser).

Save locations

You can easily find the save location by going to Preferences > Browse Packages.

On Windows the save location is:
C:\Users\[YOUR USERNAME]\AppData\Roaming\Sublime Text 3\Packages\User

Package Control.sublime-settings

This is my installed packages list from work and home; I keep a copy in Dropbox so that I can keep the two in sync.

The names listed are exactly as they are listed in the Package Control: List Packages list.

{
    "installed_packages": [
        "Alignment",
        "AutoFileName",
        "Autoprefixer",
        "Bootstrap 3 Snippets",
        "BracketHighlighter",
        "Color Highlighter",
        "CSS Color Converter",
        "CSScomb",
        "DevDocs",
        "Emmet",
        "GitGutter",
        "Handlebars",
        "jQuery",
        "JSHint Gutter",
        "Markdown Preview",
        "MarkdownEditing",
        "MarkdownTOC",
        "Package Control",
        "Placeholders",
        "Sass",
        "Search WordPress Codex or QueryPosts",
        "SideBarEnhancements",
        "Status Bar File Size",
        "SyncedSideBar",
        "Tag",
        "Theme - Minimal",
        "TodoReview",
        "Tomorrow Color Schemes",
        "View In Browser",
        "WordPress",
        "WordPress Developer Resources",
        "WordPress Generate Salts",
        "Zeal"
    ]
}

 

Needless to say, doing that made installing Sublime Text so much easier and quicker.

I will try to keep this list updated, as much for my own benefit as any one else’s.

GitHub repository

I have stored my most up-to-date settings in a GitHub repository: sublime-text-settings.

Sublime Text plugin shows TODO comments, and more

TodoReview in Sublime Text 3
TodoReview in Sublime Text 3

I do like a good Sublime Text 3 plugin, and this is one that offers functionality that I was missing since upgrading from ST2 a while back.

TodoReview scans the comments within your code (either open files, project files, or both) and builds a results page that allows you to easily open and jump to the appropriate lines in these files. It’s as simple as navigating to the appropriate line and pressing Enter.

The plugin has four common comment keywords built in, but using regular expressions these can be extended beyond:

  • TODO:
  • NOTE:
  • FIXME:
  • CHANGED:

Not only is this plugin useful for your own code projects, you can also use it to scan through third party open source projects to get an insight into their code. For example, WordPress 4.1.1 has 196 TODO: comments. My favourite is this:

Man o man is this ugly. WebKit is the new IE! Remove this if they ever fix it!

TodoReview can be installed easily using Package Control by Will Bond.

Minimal theme for Sublime Text

Minimal theme, compatible with both Sublime Text 2 and 3.
Minimal theme, compatible with both Sublime Text 2 and 3.

My favourite workspace theme for Sublime Text is currently Minimal Dark. With its dark sidebar I find it significantly less distracting than the default theme.

Here’s how to get it:

  1. Use via Package Control to install Theme – Minimal.
  2. Go to Preferences > Settings – User.
  3. Add the following line to your Preferences.sublime-settings file: “theme”: “Minimal Dark.sublime-theme”,

My current colour scheme is Tomorrow Night, which is also available via Package Control.

Offline documentation with Zeal and Sublime Text

Zeal - a documentation browser
Zeal – a documentation browser

Yesterday I came across a really useful application for web development which has already sped up my workflow when needing to look for documentation: Zeal.

The efficiencies come about mostly because instead of having to open up a new browser tab, then either search or navigate to any documentation bookmarks you may have saved, you can instead search (or browse) within the official documentation which has been downloaded to Zeal.

Download documentation sets

Inspired by the Mac-only application Dash, Zeal is a simple offline API documentation browser.

In other words, select the languages you want documentation for, click download and it’s all available in one easy-to-search location.

Select which documentation sets (docsets) you want and click Download
Select which documentation sets (docsets) you want and click download.

You can either browse the documentation, or simply search.

By default searching returns results from all documentation downloaded, but you can also prefix your search terms with the name of a particular language followed by a colon should you wish to limit the search to only that language or framework, e.g. wordpress: get_header.

In order to install it you first have to unzip the application files to your C:\Program Files directory, or C:\Program Files (x86)\ for Windows 64-bit, and create your own shortcut—there isn’t an automatic installer.

Sublime Text integration

Where I’m finding it particularly useful is within my coding editor Sublime Text, using the Zeal Sublime Text package (available for both Sublime Text 2 and 3) which allows you to search the documentation from within Sublime Text, without lifting your fingers from the keyboard.

I found that to configure it I had to first install the package (using Will Bond’s excellent package control), then run it by pressing Shift+F1 which returns an error, and then locate the Zeal.sublime-settings file (via Preferences > Browse Packages…) and update the “zeal_command” parameter to wherever you unzipped the zeal.exe file, which for me looks like:

"zeal_command": "C:\\Program Files (x86)\\Zeal\\zeal.exe",

Then in Sublime Text itself I have two options:

  1. Select something to look up and hit F1.
  2. Or press Shift+F1 to open the Zeal search box to type in my search term.

As an example, I’ve just highlighted padding-left in my CSS code and pressed F1.

Highlight a keyword press F1 and Sublime Text sends that plus its context (a CSS file) to Zeal
Highlight a keyword press F1 and Sublime Text sends that plus its context (a CSS file) to Zeal

You will notice that the Sublime Text plugin has also respected the search term’s context, within a CSS file, and passed that too as an argument.

I’m really impressed and thoroughly recommend you check it out if you are involved in any kind of coding. Both Dash and Zeal share the same documentation sets. There are a lot! And it can also be integrated into a lot of editors, not just Sublime Text, such as Coda, TextMate, Emacs, Vim, Eclipse, and PhpStorm.