Tag: editor

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.

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.

Matching Google Chrome’s developer tools theme to your text editor theme

Sublime Text 2
Sublime Text 2

My main coding text editor is the excellent Sublime Text 2, my favourite theme is called Tomorrow-Night by Chris Kempson, and my go-to browser is Google Chrome.

Being involved in web design I use the Chrome web developer tools all the time for debugging JavaScript, identifying HTML classes and tweaking CSS. It looks like this:

Google Chrome developer tools
Google Chrome developer tools

But as you can see from the screenshot above, the default view is rather dull: white background, uninspiring syntax highlighting. It’s a shame that you can’t match the Chrome developer tools code panel with my text editor of choice.

User StyleSheets

Well, it turns out you can! Chrome provides a “User StyleSheets” directory into what you can drop a Custom.css file.

Windows
C:\Users\%username%\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\
Mac
~/Library/Application Support/Google/Chrome/Default/User StyleSheets/
Ubuntu
~/.config/chromium/Default/User StyleSheets/

A number of people have also done the hard work for us and made available ready-to-use CSS files for various themes. These are my two favourite dark themes:

  • Tomorrow
  • Monokai (UPDATED: This version works better when editing code in the Elements tab.)

Having saved the code to your Custom.css file and saved it, Chrome updates immediately:

Google Chrome developer tools with Tomorrow theme
Google Chrome developer tools with Tomorrow theme

Porting Monokai colour scheme to WeBuilder 2014

WeBuilder 2014 beta 7 with the new Monokai theme
WeBuilder 2014 beta 7 with the new Monokai theme

I have been using Blumentals WeBuilder now since March 2006—nearly seven years. It’s a solid web code editor and IDE (integrated development environment) but over the last couple of years it has been creaking at the seams a little. Some features were quite slow, others weren’t keeping up with the astonishing rate of change that the web standards have been going through of late.

So, over the last year or so the Blumentals team have been rebuilding the application from scratch, moving to a more up-to-date code base (they code it in Delphi, I believe) making it much faster and preparing the way for future enhancements and improvements. And boy! does it show. The new version is looking great. But I’ll get to that in a minute.

While they were working on what will soon be released as WeBuilder 2014 I found myself—as I do every six months or so—looking around at competing web IDEs to see what they were up to. I tried the usual candidates: Aptana, CodeLobster, Notepad++, NetBeans, Komodo Edit, etc. but nothing grabbed me until I stumbled on Sublime Text 2.

Wow! Sublime Text 2 is fast. Lightning fast. And it’s packed with features, and what it does’t have there is usually an add-on for it — which is most easily installed via the Sublime Package Control. But I digress.

I found myself using Sublime Text 2 more and more, and one of the things that I loved most about it was one of the in-built colour schemes: Monokai (based on a TextMate theme by Wimer Hazenberg). I had never used a dark theme before on an editor, but this one I really liked, and it was much easier on my eyes than the glaring white themes I’ve been using in the past.

Porting Monokai to WeBuilder

When WeBuilder 2014 was released in beta, owner and developer Karlis Blumentals invited users to create and submit colour schemes for WeBuilder (a new feature in 2014). So I set about porting the Monokai theme to WeBuilder.

Every code editor highlights its code syntax slightly differently. The code highlighting in Sublime Text is pretty simple, defining the same colours for a number of elements regardless of the language. So, for example, all strings are #e6db74 (yellow), all keywords are #f92672 (dark pink), etc.

WeBuilder’s colour schemes are more granular: if you want HTML elements within a PHP document to look different to HTML elements within an HTML or ASP document then you can in WeBuilder.

Also, the way that code elements are broken up into different syntax colours is slightly different between editors. It’s more-or-less impossible to port one theme to another editor exactly colour-for-colour, element-for-element. I decided, then, to try to keep within the spirit of the theme.

I relalised fairly quickly, therefore, that I needed to keep things as consistent as I could across all languages. So all strings would be yellow (#e6db74), all numbers (integer or floating) purple (#ae81ff), all HTML tags or language reserved words would be dark pink (#f92672), etc.

I created a spreadsheet to plan things out and document what I was doing.

Spreadsheet of many colours
Spreadsheet of many colours

That really helped. Especially when I did something wrong and reset my entire colour scheme to system defaults. Having documented it as I went along it only took me about 45 minutes to retype it. (A back-up would have been useful, huh!)

I’m really pleased with how they turned out, to be honest. And it would appear that Blumentals Software are too.

Available now

I passed the file to Blumentals last week and it’s already been incorporated into beta 7, which is currently available for download. (The beta versions are free while errors are being addressed, the final version will be available to purchase.)

To say thank you for what I did I received this kind email from @blumentals the other day:

@garethjms - you have earned a free upgrade to v2014 by porting Monokai scheme for our editor
@garethjms – you have earned a free upgrade to v2014 by porting Monokai scheme for our editor

How wonderfully generous of them. I was so delighted by their generosity. I simply did it because I really like the colour scheme, and I wanted in a small way to say thank you to Blumentals for all that they’ve given to the web building community over the last 6+ years.

More themes…

I’m starting work on porting another couple of themes now: Twilight (also used in Sublime Text 2) and Tomorrow, which is a lovely collection of dark and light themes.