Become a Sublime Text
Power User

— Canadian sized hot tips —

Wes Bos
wesbos.com
@wesbos

I'm Wes Bos


These slides will be available shortly after this talk - I'll tweet the link out.


Tweet your hot tips to @wesbos

SublimeTextBook.com

HackerYou.com

Developers are slow

Both major and minor inefficiencies add up to hours of lost productivity

This should make you cringe

Developers are error prone

Open any file

The mouse is for suckers

+ P

Go to symbol

like CSS Selectors or JavaScript functions!

+ R

Multiple Carets

+ click

or

+ option + drag

Wrap Selection in Tag

CTRL + shift + W

or Wrap with Emmet!

Use any Emmet/css expansion you know of!

CTRL + W

Line Bubbling

+ ctrl +

Expand to Quotes

requires this package

ctrl + '

Paste and Indent!

Stop re-indenting after pastes

+ shift + v

OSX dialog keyboard access

Turn this on in System Prefs → Keyboard → Shortcuts → All Controls

spacebar → Don't Save -OR- return → Save

The best Packages to speed up your workflow and make life awesome!

Serious. You gotta get these!

Emmet

Emmet for HTML

Also works with HAML, Jade and Slim!


Cheat Sheet

Emmet for CSS

Better than snippets, finds the best fit based on what you have typed in!

Emmet for anything: Value Bumping

Increment or Decrement just like DevTools, woah!

option + by 0.1
control + by 1
+ option + by 10

JS-Hint Gutter Linter

Realtime JS-Hint feedback

GhostText for Chrome + Sublime

Don't you wish you could use Sublime for everything? Link any textarea with Sublime!

Origami

Better multi-pane switching and splitting

Autofilename

File Completion in HTML + CSS

JavaScriptNext ES6 Syntax Highlighting

Nicer JavaScript Syntax highlighting, supports ES6

Regular JavaScript VS JavaScriptNext

Gutter Color

Show your HEX and RGB colours in your gutter

Color Highlighter

View your HEX and RGB colours inline!

CSS3 Syntax Highlighting

Wake up ST! This ain't 2009 anymore

GitGutter

Git statuses in your gutter

Takana

Instantly Live edit Sass

Pimp Yo Editor

A darker colour scheme can save your eyeballs

Check out Cobalt2 or Soda

Crisp and clear syntax highlighting will cut down on coding errors

Highlight the current line

"highlight_line": true

Increase your caret

"caret_extra_bottom": 2

"caret_extra_top": 2

"caret_extra_width": 4

"caret_style": "solid"

"wide_caret": true

Match Brackets and Tags

"match_brackets": true, "match_brackets_angle": true,

"match_brackets_braces": true, "match_brackets_content": true, "match_brackets_square": true

Highlight modified tabs

Forgetting to save is the #1 problem in computer science - Wes Bos

"highlight_modified_tabs": true

Increase Line Height

We do this for our text, why not code?

"line_padding_bottom": 1,

"line_padding_top": 1,

Such a small change that helps with readability and scanning code

Bold Folder Labels

Folders !== Files. Why style them the same?

"bold_folder_labels": true

Indentation Guidelines

"indent_guide_options": ["draw_normal", "draw_active"]

Your theme must support these colours Cobalt2 does

Investing time in any editor will make you a better developer.

Atom and Vim are amazing editors - your workflows are transferable to or from Sublime Text. Spend your time becoming amazing at your editor!

Book + Video Package now available

Use coupon code JSSUMMIT for $15 off any package.

SublimeTextBook.com

Q & Eh?

Questions, Comments? What is your favourite tip?