SublimeText 3 Configuration Notes

Configuring SublimeText 3

SublimeText 2 is the current version, while version 3 is in beta. Most of these tools only work with SublimeText 3. 

Download and install SublimeText 3

http://www.sublimetext.com/3 Links to an external site.

Download and install for your operating system. There is a free version of the editor. If you wish to pay $70 to support the project, that’s awesome, but not required.

Download and install Package Control 

https://sublime.wbond.net/installation Links to an external site.

This is a ST extension that will allow you to install more extensions.

There are installation instructions on the website.

Once Package Control is installed, you can use this to install the below packages as follows:

  1. Go to SublimeText – Preferences – Package Control (MAC) or Preferences – Package Control (PC)
  2. Choose “Install Package” from the list of options
  3. Find the name of the package you wish to install and select it

Install Emmet via Package Control

http://docs.emmet.io/ Links to an external site.

This is a code completion extension for ST. Once this is installed, start any HTML page quickly by doing the following:

  1. Open a new document and save as HTML
  2. Once saved (not before!) type ! and hit tab
  3. This will generate a starting HTML document for you!

Install Bracket Highlighter via Package Control

When clicking on one HTML tag, this tracks down the closing (or opening) tag. Very helpful for tracking down extra tags in those pesky layers of nested divs!

Install Color Highlighter via Package Control

This will display the color you’re working with when you click on it. Example: call for #FF0000 in your code, and when you click on the color, it will preview red for you.

Install W3C Validators

This will install validators for HTML and SVG only. There is no CSS validator.