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

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