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

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

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 for HTML

Also works with HAML, Jade and Slim!

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!

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?