Sublime Text – Installation and Configuration

I thought I would write an article on how to install and configure Sublime Text (currently using v3) as per how I like it. This post is more a reference guide for myself, so that I don’t forget how to do it in the future. If it helps you too – then awesome!

Step 1: Download and Install

You can download the latest version from here:

• Sublime Text 2
• Sublime Text 3

Currently I am using ST3 build 3065 which was updated on 29 August 2014.

Step 2: Install Package Control

To install Package Control (which is required to install most of the other packages), follow the instructions here >> Package Control Install

Note: If you are behind a proxy you will need to manually download and install the package.

Once completed, restart Sublime Text (for safe measure).

Step 2b: Package Control Proxy Settings (optional)

If you are using Sublime Text behind a proxy server, then you need to configure your proxy settings in order to get Package Control to work correctly.

Add the following to Preferences >> Package Settings >> Package Control >> Settings – User:

// Proxy Settings

"http_proxy": "your.proxy.fqdn:80",
"https_proxy": "your.proxy.fqdn:80",
"proxy_username": "my_username",
"proxy_password": "my_password",

Note: You may need to change the port from port 80 to something else depending on your proxy settings (e.g. 8080). You can find this out by looking at the configured IE proxy settings.

Once completed, restart Sublime Text.

Step 3: Install Sublime Text Packages

Now it is time to install all of the additional packages you require to make your Sublime Text experience awesome! These can all be installed via Package Control by doing the following:

1. Cmd + Shift + P (OS X) Ctrl + Shift + P (Win/Linux)
2. Type Package Control: Install Package
3. Search for the package name
4. Press Enter to install

The packages I use in Sublime Text are:

• CSS Comb
• DashDoc (Mac OSX only)
• Emmet ^*1
• FileDiffs (Windows machines only)
• Gist
• Google Search
• Material Theme
• Material Theme – Appbar
• Material Theme – White Panels
• Predawn ^*2
• PowerShell
• SASS
• SCSS
• SideBarEnhancements
• SublimeLinter
• SublimeLinter-contrib-htmlhint
• SublimeLinter-contrib-scss-lint
• SublimeLinter-csslint
• SublimeLinter-jshint
• SublimeLinter-php
• SublimeLinter-xmllint
• VBDotNet
• vbScript

^*1 To use Emmet you need PyV8 installed. By default when installing Emmet, PyV8 will attempt to download and install automatically. If it doesn’t you an download it from here >> Emmet PyV8.

^*2 You must install Predawn prior to configuring User Settings in Step 5 below (otherwise the settings in the Colour Scheme & Theme section will fail).

For more information about PreDawn and the options available have a look here >>> Predawn GitHub

Step 4: Edit ASP Package to include .aspx files

Depending on the the version of Sublime Text, this process is slightly different:

Sublime Text 2:

Edit the Packages >> ASP >> HTML-ASP.tmLanguage file and within the fileTypes section add the following lines below the asp line:

aspx
master

Sublime Text 3:

Complete the following steps:

1. Open the file you want to set the default syntax for (in this case a .aspx file)
2. From the Main Menu, View >> Syntax >> Open all with current extension as…
3. Select the syntax you want as default for that particular file extension (in this case ASP >> HTML (ASP))
4. Repeat the steps above for all other file extensions

Step 5: Sublime Text User Settings

To make changes to the default Sublime Text settings, you need to add your personal settings to the User Settings file. To do this you can access it from Preferences >> Settings – User.

Common User Settings

Below are the standard user settings I use, which apply to both Mac OSX and Windows machines:

{
  "always_show_minimap_viewport": true,
  "bold_folder_labels": true,
  "caret_extra_width": 1,
  "caret_style": "phase",
  "close_windows_when_empty": false,
  "color_scheme": "Packages/Material Theme/schemes/Material-Theme.tmTheme",
  "copy_with_empty_selection": false,
  "drag_text": false,
  "draw_minimap_border": true,
  "enable_tab_scrolling": false,
  "highlight_line": true,
  "hot_exit": false,
  "ignore_vcs_packages": true,
  "ignored_packages":
  [
  "Vintage"
  ],
  "indent_guide_options":
  [
  "draw_normal",
  "draw_active"
  ],
  "line_padding_bottom": 3,
  "line_padding_top": 3,
  "match_brackets_content": false,
  "match_selection": false,
  "match_tags": false,
  "material_theme_tree_headings": true,
  "open_files_in_new_window": false,
  "overlay_scroll_bars": "enabled",
  "preview_on_click": false,
  "remember_open_files": false,
  "scroll_past_end": true,
  "scroll_speed": 5.0,
  "show_full_path": false,
  "tab_size": 2,
  "theme": "Material-Theme.sublime-theme",
  "translate_tabs_to_spaces": true,
  "trim_trailing_white_space_on_save": true,
  "word_wrap": false
}

Mac OSX User Settings

In addition to the settings listed above, I use the following typography settings for Mac OSX machines:

  "font_face": "Menlo",
  "font_size": 14 ,

Windows User Settings

When configuring Sublime Text on a Windows machine, I use the following typography settings:

  "font_face": "Source Code Pro",
  "font_options": [ "gray_antialias" ],
  "font_size": 11,

Note: the Inconsolata font needs to be installed on the system prior to being able to use it in Sublime Text. You can download the font from here >>> Inconsolata Font Download.

Sublime Text 2 Settings

If you are still running ST2, then replace the settings above with the following:

  "theme": "predawn.sublime-theme",
  "color_scheme": "Packages/Predawn/predawn.tmTheme",

Step 6: Change the Sublime Text Icon

There are heaps of awesome icons out therefore Sublime Text, so I generally like to change mine. To do this just follow these steps:

Mac OSX

1. Navigate to Applications
2. Right-click the Sublime Text.app
3. Click Show Package Contents
4. Navigate to Contents\Resources
5. Replace the Sublime Text.icns file with the new icon
6. Reboot your Mac

Windows 8, 8.1 and Windows 10

1. Copy the new icon into the install directory (C:\Program Files\Sublime Text)
2. Right-click Sublime Text.exe
3. Click Create Shortcut
4. Rename the shortcut to ‘Sublime Text’
5. Right-click on the shortcut and select Properties
6. Click on the Shortcut tab
7. Click Change Icon button
8. Select the new icon
9. Click OK
10. Right-click the shortcut and select Pin to Start
11. Right-click the shortcut and select Pin to TaskBar

The Predawn theme contains a number of icons that you can use. You can download them from here >> Predawn GitHub

Step 7: Install Sublime Text License

The most important step for last. Install your purchased license for Sublime Text and enjoy!

If you haven’t yet bought a license and are using Sublime Text, then you can buy one here >> Get a Sublime Text License. It will be the best money you ever spent!!