If there's one thing which can waste a lot of designers' and developers' time, it's repetitive coding. How often do you find yourself formatting and duplicating bits of code which don't really warrant making snippets from? Sublime Text 2 has just the tool to speed things up..
Watch the Tip
Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes or YouTube!
Helpful Snippets
Here are my settings that I use at the moment. In my Default (OSX).sublime-keymap (which I open by going to Sublime Text preferences, and opening up “Key Bindings - User” ) I have the following:
1 |
|
2 |
[ |
3 |
{ "keys": ["super+shift+;"], "command": "run_macro_file", "args": {"file": "Packages/User/New Line Semicolon.sublime-macro"} },
|
4 |
{ "keys": ["shift+enter"], "command": "run_macro_file", "args": {"file": "Packages/User/New Line Array.sublime-macro"} },
|
5 |
{ "keys": ["alt+enter"], "command": "run_macro_file", "args": {"file": "Packages/User/New Line Curly.sublime-macro"} },
|
6 |
{ "keys": ["super+;"], "command": "run_macro_file", "args": {"file": "Packages/User/EOL Semicolon.sublime-macro"} },
|
7 |
{ "keys": ["super+shift+."], "command": "run_macro_file", "args": {"file": "Packages/User/Array Arrow.sublime-macro"} },
|
8 |
{ "keys": ["super+alt+shift+;"], "command": "run_macro_file", "args": {"file": "Packages/User/Double Semicolon.sublime-macro"} }
|
9 |
] |
Just in case you’re wondering, this is a JSON Format. In “keys” you specify what to run, and in args.file - the location of the macro file to run.
Note: “super” is the name for mac users' “Command” button. Windows and Linux users should replace this with “ctrl” and use “Control” instead of “Command”. The file would look something like this:
1 |
|
2 |
[ |
3 |
{ "keys": ["ctrl+shift+;"], "command": "run_macro_file", "args": {"file": "Packages/User/New Line Semicolon.sublime-macro"} },
|
4 |
{ "keys": ["shift+enter"], "command": "run_macro_file", "args": {"file": "Packages/User/New Line Array.sublime-macro"} },
|
5 |
{ "keys": ["alt+enter"], "command": "run_macro_file", "args": {"file": "Packages/User/New Line Curly.sublime-macro"} },
|
6 |
{ "keys": ["ctrl+;"], "command": "run_macro_file", "args": {"file": "Packages/User/EOL Semicolon.sublime-macro"} },
|
7 |
{ "keys": ["ctrl+shift+."], "command": "run_macro_file", "args": {"file": "Packages/User/Array Arrow.sublime-macro"} },
|
8 |
{ "keys": ["ctrl+alt+shift+;"], "command": "run_macro_file", "args": {"file": "Packages/User/Double Semicolon.sublime-macro"} }
|
9 |
] |
My Macros
If you find it helpful, here are a few of the macro files I use regularly.
Double Semicolon.sublime-macro
The “Double Semicolon” is what we created in the video (although it's pretty much useless) just so you can compare your results with mine:
1 |
|
2 |
[ |
3 |
{
|
4 |
"args": |
5 |
{
|
6 |
"to": "eol" |
7 |
}, |
8 |
"command": "move_to" |
9 |
}, |
10 |
{
|
11 |
"args": |
12 |
{
|
13 |
"characters": ";" |
14 |
}, |
15 |
"command": "insert" |
16 |
}, |
17 |
{
|
18 |
"args": |
19 |
{
|
20 |
"characters": "\n\n" |
21 |
}, |
22 |
"command": "insert" |
23 |
} |
24 |
] |
New Line Array.sublime-macro
Goes to the end of line, adds in a comma (“ , “) and advances to a new line.
1 |
|
2 |
[ |
3 |
{
|
4 |
"args": |
5 |
{
|
6 |
"to": "eol" |
7 |
}, |
8 |
"command": "move_to" |
9 |
}, |
10 |
{
|
11 |
"args": |
12 |
{
|
13 |
"characters": "," |
14 |
}, |
15 |
"command": "insert" |
16 |
}, |
17 |
{
|
18 |
"args": |
19 |
{
|
20 |
"characters": "\n" |
21 |
}, |
22 |
"command": "insert" |
23 |
} |
24 |
] |
New Line Curly.sublime-macro
A little helper to save one keystroke; automatically adds in a curly brace, and advances to a new line with alt+enter (remember, the keyboard shortcuts aren’t set in this file, but in the preferences file.)
1 |
|
2 |
[ |
3 |
{
|
4 |
"args": |
5 |
{
|
6 |
"to": "eol" |
7 |
}, |
8 |
"command": "move_to" |
9 |
}, |
10 |
{
|
11 |
"args": |
12 |
{
|
13 |
"characters": " " |
14 |
}, |
15 |
"command": "insert" |
16 |
}, |
17 |
{
|
18 |
"args": |
19 |
{
|
20 |
"contents": "{$0}"
|
21 |
}, |
22 |
"command": "insert_snippet" |
23 |
}, |
24 |
{
|
25 |
"args": |
26 |
{
|
27 |
"contents": "\n $0\n" |
28 |
}, |
29 |
"command": "insert_snippet" |
30 |
} |
31 |
] |
EOL Semicolon.sublime-macro
Adds a semicolon at the end of the current line, no matter where the cursor is.
1 |
|
2 |
[ |
3 |
{
|
4 |
"args": |
5 |
{
|
6 |
"to": "eol" |
7 |
}, |
8 |
"command": "move_to" |
9 |
}, |
10 |
{
|
11 |
"args": |
12 |
{
|
13 |
"characters": ";" |
14 |
}, |
15 |
"command": "insert" |
16 |
} |
17 |
] |
New Line Semicolon.sublime-macro
Adds a semicolon at the end of the current line, and then advances to a new line.
1 |
|
2 |
[ |
3 |
{
|
4 |
"args": |
5 |
{
|
6 |
"to": "eol" |
7 |
}, |
8 |
"command": "move_to" |
9 |
}, |
10 |
{
|
11 |
"args": |
12 |
{
|
13 |
"characters": ";\n" |
14 |
}, |
15 |
"command": "insert" |
16 |
} |
17 |
] |
Array Arrow.sublime-macro
Best explained in the Quick Tip video - a nice helper for writing PHP Arrays.
1 |
|
2 |
[ |
3 |
{
|
4 |
"args": |
5 |
{
|
6 |
"to": "eol" |
7 |
}, |
8 |
"command": "move_to" |
9 |
}, |
10 |
{
|
11 |
"args": |
12 |
{
|
13 |
"characters": " " |
14 |
}, |
15 |
"command": "insert" |
16 |
}, |
17 |
{
|
18 |
"args": |
19 |
{
|
20 |
"characters": "=" |
21 |
}, |
22 |
"command": "insert" |
23 |
}, |
24 |
{
|
25 |
"args": |
26 |
{
|
27 |
"characters": ">" |
28 |
}, |
29 |
"command": "insert" |
30 |
}, |
31 |
{
|
32 |
"args": |
33 |
{
|
34 |
"characters": " " |
35 |
}, |
36 |
"command": "insert" |
37 |
}, |
38 |
{
|
39 |
"args": |
40 |
{
|
41 |
"contents": "'$0'" |
42 |
}, |
43 |
"command": "insert_snippet" |
44 |
}, |
45 |
{
|
46 |
"args": |
47 |
{
|
48 |
"to": "eol" |
49 |
}, |
50 |
"command": "move_to" |
51 |
}, |
52 |
{
|
53 |
"args": |
54 |
{
|
55 |
"characters": "," |
56 |
}, |
57 |
"command": "insert" |
58 |
}, |
59 |
{
|
60 |
"args": |
61 |
{
|
62 |
"by": "characters", |
63 |
"forward": false |
64 |
}, |
65 |
"command": "move" |
66 |
}, |
67 |
{
|
68 |
"args": |
69 |
{
|
70 |
"by": "characters", |
71 |
"forward": false |
72 |
}, |
73 |
"command": "move" |
74 |
} |
75 |
] |
By
