Advertisement
  1. Web Design
  2. UX/UI
  3. UX Design

Quick Tip: Banish Repetitive Tasks with Sublime Text 2 Macros

Scroll to top
Read Time: 4 min

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
]
Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.