Tutorial - Perfect Workflow in Sublime Text 2

tutorial-sublime-text-2.md

Tutorial - Sublime Text 2

Notes from the Tuts+ tutorial Perfect Workflow in Sublime Text 2 by Jeffrey Way.

Reference

http://code.tutsplus.com/courses/perfect-workflow-in-sublime-text-2

Multiple Cursors

command + d
control + command + g (alt + f3)
shift + command + lines

Incremental search

command + i

Column selection

option + mouse

Command palette (menu bar from keyboard)

shift + command + p

Toggle sidebar

command + k + b

Change files (go to anything)

command + p

Symbols (method names) - search for method names

command + r
OR
command + p and then @

Key bindings (keyboard shortcuts) - in preferences

can edit user preferences with different keyboard shortcuts if you like

Browse plugins

$ ls ~/Library/Application\ Support/Sublime\ Text\ 2/Packages/

OR
Preferences -> Browse Packages

Could make an alias in .bashrc to open packages directory alias p="~/Library/Application\ Support/Sublime\ Text\ 2/Packages/"

Installing plugins without package control

clone repo into ~/Library/Application\ Support/Sublime\ Text\ 2/Packages/

Package control

Installed from https://packagecontrol.io/

shift + command + p and then package control

Install new package

shift + command + p and then install

Console

`control + ``

Snippets - code snippets (templates); different snippets appear based on file type

shift + command + p and then type snippets

Create your own snippets - Tools -> Create Snippets ...

<snippet>
    <content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>hello</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <!-- <scope>source.python</scope> -->
</snippet>

The above xml snippet works on a tab trigger. If user starts typing 'hello' and then hits tab, then the content message is substituted. The ${1:this} means the first place the cursor goes after snippet is substituted and the default value used will be 'this'. The ${2:snippet} means the second place the cursor will go after the user hits tab with the default value of 'snippet'.

Save as *.sublime-snippet

Will be saved in user folder in Sublime Text packages

Look for snippets from pre-built packages

shift + command + p and type package install and then type language i.e. jquery and look for snippet packages

Commenting

command + /

Move text up and down page

shift + command + [up,down] - moves text up and down; no copying and pasting

Recommended plugins

• Emmet - short commands expands to large code sections

ul>li*4    expands to 

 <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
 </ul>

• Sublime Linter - checks errors in code upon save
• Gists - access to GitHub gists
• DocBlockr - automatically add code documentation
• PlainTasks - manage todo items from sublime
• LiveReload - automatically reloads saved html files
• Markdown Preview - preview markdown in browser; with LiveReload, automatically done upon saving

User Settings - Preferences.sublime-settings

{ "color_scheme": "Packages/Color Scheme - Default/Solarized (Dark).tmTheme", "font_size": 14, "translate_tabs_to_spaces": true, "ignored_packages": ["Vintage"]

}