@rhyswynne - @winwaruk

Sublime Text 2 - Tips & Tricks

WordPress Leeds - November

2014

@rhyswynne - @winwaruk

Questions?

2

@rhyswynne - @winwaruk

Yes…

3

…I should really be using an IDE.

I just never got around to it.

@rhyswynne - @winwaruk

What Is Sublime Text 2?

• Extensible Text Editor.

• Designed for text, markup & code.

• Customisable (we’ll talk more

about this).

• Not free: ($70)

• http://www.sublimetext.com

4

@rhyswynne - @winwaruk

Setting Up Sublime Text 2

Go to Preferences >

Settings > User (⌘ + ,).

tab_size: 4,

translate_tabs_to_spaces: false,

http://bit.ly/10SoTlu

5

@rhyswynne - @winwaruk

Bind Reindent To A Keystroke

1. Go To Preferences > Key Bindings User

2. Add This:-

3. Save

(My Key Bindings - http://bit.ly/1GMBvvy)

6

@rhyswynne - @winwaruk

What That Does…

7

Before (⌘+Shift+i) After (⌘+Shift+i)

@rhyswynne - @winwaruk

Package Control

8

(Installation Instructions - https://sublime.wbond.net/installation#st2)

@rhyswynne - @winwaruk

Installing Packages

1. Bring Up Control Palette

(⌘ + Shift + P).

2. Type in “Install” and

select “Package

Control: Install

Package”.

3. Select Package You

Wish To Install.

9

@rhyswynne - @winwaruk

Sublime Text 2 WordPress

PackageAdds Snippets & Code Completion for WordPress (up to 3.7)

10

https://github.com/purplefish32/sublime-text-2-wordpress

@rhyswynne - @winwaruk

SublimePHPTidy

Tidies code to meet WordPress Coding Standards (mostly)

11

https://github.com/welovewordpress/SublimePhpTidy

Before After

@rhyswynne - @winwaruk

DocBlockr

Type “/**” before a function to automatically create a DocBlock.

12

https://github.com/spadgos/sublime-jsdocs

@rhyswynne - @winwaruk

SublimeLinter

Supports a “linter” for Sublime Text (points out errors)

13

https://github.com/SublimeLinter/SublimeLinter-for-ST2

@rhyswynne - @winwaruk

Sass in Sublime Text 2

• Install Sass Support “Sass

Textmate Bundle” -

https://github.com/nathos/sass-

textmate-bundle

• If using *.sass (rather than *.scss)

- go View > Syntax > Open All

With Current Extension as > Sass

• Install SublimeOnSaveBuild -

https://github.com/alexnj/Sublime

OnSaveBuild

14

@rhyswynne - @winwaruk

Snippets

• Prewritten Code

• Cmd (⌘) + Shift + P and type

“Snippet: ” to see all Snippets.

• Many Included with Sublime

WordPress

• Mine are here -

https://github.com/rhyswynne/

Sublime-Text-2-Snippets

15

@rhyswynne - @winwaruk

Thank You! :)

16

Questions? (I mean it this time)

http://winwar.co.uk

http://twitter.com/rhyswynne