Time-Saving Macros and Snippets I Use (almost) Every Day

I’ve never liked repeating myself, especially when I don’t have to.

Here are a few ways that I save time by using macros and snippets.

For some of these, I use a programmable keyboard, and for others, I use a snippet expander. For global snippets, I use Alfred, though there are many other ways to accomplish similar results. I also make use of VS Code custom snippets.

Function Arrow (Keyboard Macro)

Since I mostly code in TypeScript/JavaScript, I write a lot of arrow functions. I have a key combo dedicated to =>. It arguably only saves me one character per use, but the physical movement of typing = followed by > makes a dedicated macro key totally worth it.

JS Inline Variables (Keyboard Macro)

The other keyboard macro I use frequently inputs ${} followed by a left arrow, which puts my cursor between the braces so I'm ready to type the variable.

Contact Info (Alfred Snippet)

For this, I use snippets with Alfred. I have it set where whenever I type $$ followed by certain triggers, it expands to something else. For example, when I type $$li, it expands to my LinkedIn URL. This saves a TON of time on job applications or when I'm DMing someone and want to quickly share my info.

My other triggers are em for email, po for portfolio, bl for blog (here on dev.to), tw for Twitter, ph for my phone number, gh for GitHub, and ij for imjoshellis, which is the username I use on every site.

React Hooks (VS Code Snippet)

If you haven't created your own snippets in VS Code yet, you should. To create your own snippets, you can open the command palette (CMD+SHIFT+P) and select "Preferences: Configure User Snippets".

Here's an example of one I use for React useState():

"useState": {
  "prefix": "rus",
  "body": [
   "const [$1] = useState<$3>($2)",
  ],
  "description": "React useState"
 }

The way it works is when I type rus in a React file, VS Code gives me the option to TAB to expand the snippet. When I do, it will put my cursor in the $1 position, so I can write my variable names. Then, I can TAB to get to the $2 position and set the initial value.

Finally, since I use TypeScript, I usually want to set the types, which is what the $3 position is for. If you use regular JavaScript and want to use this snippet, you can remove the <$3>.

What Clever Macros or Snippets Do You Use?

I'd love to hear what your favorite macro or snippet is!

Let's chat in the comments