SublimeText 3 Additional Plugins

Thanks to Ray Villalobos at lynda.com for these SublimeText suggestions!

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

There is a free version of the editor. If you wish to pay $70 to support the project, that’s awesome, but not required. If you have a license for ST2, it will also work for ST3.

ST is not required software for class. If there is another editor you choose to use, by all means do so!

Download and install SublimeText 3

http://www.sublimetext.com/3

Download and install Package Control

https://sublime.wbond.net/installation

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/

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!

 Emmet will also construct HTML for you very quickly, once you know your CSS selectors ;-)

For more help with Emmet, check out Ray Villalobos's course at lynda.com: http://www.lynda.com/sdk/Emmet-tutorials/Coding-Faster-Emmet/133353-2.html

The Emmet Cheat Sheet may also be really helpful: http://docs.emmet.io/cheat-sheet/

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 via Package Control

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

Install Sass via Package Control

Known as the Sass Textmate Bundle Plugin, but called Sass in package control, Sass will provide syntax highlighting for Sass. Without this package, ST will display your page in black and white.

Install Syntax Highlighting for Sass via Package Control

Syntax Highlighting for Sass provides some completion options for entering code.