Tag: editor

Coding fonts

Screenshot of Source Code Pro on Coding Fonts

Coding Fonts is a fabulous resource from CSS Tricks for selecting alternative fonts for your code editor.

While a few of the fonts are commercial, many are open source and/or free.

In Sublime Text 3, changing the font is as simple as downloading and installing the font then opening Preferences > Settings then adding the following line of code to the right-hand pane (within the file ‘Preferences.sublime-settings — User’):

"font_face": "NAME_OF_FONT",

Save the file and the font updates instantly.

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