Advertisement
Workflow

Quick Tip: Banish Repetitive Tasks with Sublime Text 2 Macros

by

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:

[ 
{ "keys": ["super+shift+;"], "command": "run_macro_file", "args": {"file": "Packages/User/New Line Semicolon.sublime-macro"} },
{ "keys": ["shift+enter"], "command": "run_macro_file", "args": {"file": "Packages/User/New Line Array.sublime-macro"} },
{ "keys": ["alt+enter"], "command": "run_macro_file", "args": {"file": "Packages/User/New Line Curly.sublime-macro"} },
{ "keys": ["super+;"], "command": "run_macro_file", "args": {"file": "Packages/User/EOL Semicolon.sublime-macro"} },
{ "keys": ["super+shift+."], "command": "run_macro_file", "args": {"file": "Packages/User/Array Arrow.sublime-macro"} },
{ "keys": ["super+alt+shift+;"], "command": "run_macro_file", "args": {"file": "Packages/User/Double Semicolon.sublime-macro"} }
]

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:

[ 
{ "keys": ["ctrl+shift+;"], "command": "run_macro_file", "args": {"file": "Packages/User/New Line Semicolon.sublime-macro"} },
{ "keys": ["shift+enter"], "command": "run_macro_file", "args": {"file": "Packages/User/New Line Array.sublime-macro"} },
{ "keys": ["alt+enter"], "command": "run_macro_file", "args": {"file": "Packages/User/New Line Curly.sublime-macro"} },
{ "keys": ["ctrl+;"], "command": "run_macro_file", "args": {"file": "Packages/User/EOL Semicolon.sublime-macro"} },
{ "keys": ["ctrl+shift+."], "command": "run_macro_file", "args": {"file": "Packages/User/Array Arrow.sublime-macro"} },
{ "keys": ["ctrl+alt+shift+;"], "command": "run_macro_file", "args": {"file": "Packages/User/Double Semicolon.sublime-macro"} }
]

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:

[
  {
    "args":
    {
      "to": "eol"
    },
    "command": "move_to"
  },
  {
    "args":
    {
      "characters": ";"
    },
    "command": "insert"
  },
  {
    "args":
    {
      "characters": "\n\n"
    },
    "command": "insert"
  }
]

New Line Array.sublime-macro
Goes to the end of line, adds in a comma (“ , “) and advances to a new line.

[
    {
        "args":
        {
            "to": "eol"
        },
        "command": "move_to"
    },
    {
        "args":
        {
            "characters": ","
        },
        "command": "insert"
    },
    {
        "args":
        {
            "characters": "\n"
        },
        "command": "insert"
    }
]

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.)

[
  {
    "args":
    {
      "to": "eol"
    },
    "command": "move_to"
  },
  {
    "args":
    {
      "characters": " "
    },
    "command": "insert"
  },
  {
    "args":
    {
      "contents": "{$0}"
    },
    "command": "insert_snippet"
  },
  {
    "args":
    {
      "contents": "\n $0\n"
    },
    "command": "insert_snippet"
  }
]

EOL Semicolon.sublime-macro
Adds a semicolon at the end of the current line, no matter where the cursor is.

[
  {
    "args":
    {
      "to": "eol"
    },
    "command": "move_to"
  },
  {
    "args":
    {
      "characters": ";"
    },
    "command": "insert"
  }
]

New Line Semicolon.sublime-macro
Adds a semicolon at the end of the current line, and then advances to a new line.

[
  {
    "args":
    {
      "to": "eol"
    },
    "command": "move_to"
  },
  {
    "args":
    {
      "characters": ";\n"
    },
    "command": "insert"
  }
]

Array Arrow.sublime-macro
Best explained in the Quick Tip video - a nice helper for writing PHP Arrays.

[
  {
    "args":
    {
      "to": "eol"
    },
    "command": "move_to"
  },
  {
    "args":
    {
      "characters": " "
    },
    "command": "insert"
  },
  {
    "args":
    {
      "characters": "="
    },
    "command": "insert"
  },
  {
    "args":
    {
      "characters": ">"
    },
    "command": "insert"
  },
  {
    "args":
    {
      "characters": " "
    },
    "command": "insert"
  },
  {
    "args":
    {
      "contents": "'$0'"
    },
    "command": "insert_snippet"
  },
  {
    "args":
    {
      "to": "eol"
    },
    "command": "move_to"
  },
  {
    "args":
    {
      "characters": ","
    },
    "command": "insert"
  },
  {
    "args":
    {
      "by": "characters",
      "forward": false
    },
    "command": "move"
  },
  {
    "args":
    {
      "by": "characters",
      "forward": false
    },
    "command": "move"
  }
]
Related Posts
  • Code
    Tools & Tips
    Check Out Atom, GitHub's New Development EditorAtom wide retina preview
    It's been awhile since we've seen any updates in the editor space. The last big splash was made by Sublime Text which took the web development community by storm, especially once Package Control came around to serve as the package manager for the editor.Read More…
  • Web Design
    HTML/CSS
    Why I Choose Stylus (And You Should Too)Stylus thumb
    The world of front end web development has been steadily increasing its uptake of what we call "CSS Preprocessors", which extend the functionality of regular CSS. Arguably the two most well known, with the greatest user base, are LESS and Sass/SCSS. However there is a third preprocessor that hasn't received quite as much attention, and that's Stylus.Read More…
  • Code
    Android SDK
    Create a Hangman Game: User InterfaceAndroid hangman game preview retina
    In this series, we are creating a Hangman game for the Android platform. In the first tutorial, we set the application up to present two screens to the user and we also made a start with the user interface elements, the images and shape drawables to be precise. In the second tutorial, we will zoom in on the game's layout.Read More…
  • Code
    JavaScript & AJAX
    Testing in Node.jsNodejs testing chai retina preview
    A test driven development cycle simplifies the thought process of writing code, makes it easier, and quicker in the long run. But just writing tests is not enough by itself, knowing the kinds of tests to write and how to structure code to conform to this pattern is what it's all about. In this article we will take a look at building a small app in Node.js following a TDD pattern.Read More…
  • Computer Skills
    App Training
    Alfred Workflows for BeginnersAlfred400
    Ever since Alfred 2.0 was in beta, I have been making Alfred workflows for myself and for others. It is a lot of fun and very helpful to my daily workflow. I usually average using Alfred around 130 times a day, with my peak day of 768 times. I am going to show you the basic concepts of workflow design in this tutorial, all the way to the very advanced features that you can use in your own workflows in later tutorials. So, come join the fun!Read More…
  • Code
    Tools
    Sublime Text 2: First StepsCode
    In less than a year, the Sublime Text 2 code editor - available for Mac, Windows, and Linux - has skyrocketed to becoming the editor of choice for a huge number of developers. How come? Well, it's a sophisticated editor, with lightning-fast speed, an incredibly vibrant plugin community, easy configuration, Vintage (Vim) mode, multiple cursors - the list goes on. If you've yet to make the switch, out of some sense of loyalty to your current editor of choice, give me twenty minutes, and I'll convince you!Read More…