Knowing your editor is important, and if it’s open source and you can add functionality, even better! Therefore, I dug into Atom from GitHub (which is open source!) to add something I like: a Hyperlink Helper.

As mentioned in my recent posts on Vim and favorite editors, I think it’s great for any developer to experiment and tweak their editor(s) of choice.

Using Atom a bit on the side, I thought I’d look into how to create a package for it. It offers a lot of them already, browsable through the packages web site or through the within the app itself.

Introducing the Hyperlink Helper

Back in the day when I started using TextMate, one of my favorite functions was to have a keyboard shortcut to wrap the selected text with an <a> element and set its href attribute to what’s in the system clipboard. Then when I moved to Sublime Text, someone created the Hyperlink Helper package for Sublime Text.

So, now with Atom, the next natural evolution would be for me to create one for it. 🙂

How to install it

Go to Settings in Atom > Packages: Search for Hyperlink Helper.

Functionality

• Wraps selected text with an anchor element, e.g. Hello becomes <a href="https://robertnyman.com">Hello</a>
• Sets the href attribute of that anchor to what’s currently in the system clipboard

How to trigger it

1. Select some text in the current document
2. Hit its keyboard shortcut:
   Ctrl + Cmd + L (Mac)
   Ctrl + Alt + L (Windows/Linux)
   or through Packages > hyperlink-helper > link in the Atom top menu

Source code and improvements

The source code is on GitHub – feel free to issue pull requests with improvements!

Getting started building packages for Atom

Does all this sound interesting and you want to build your own package? Then I recommend reading Creating Packages and Create Your First Package in the Atom docs. Atom also offers a way to generate a template package for you through the Package Generator: Generate Package in the Command Palette.

This is triggered with:
Cmd + Shift + p (Mac)
Ctrl + Shift + p (Windows/Linux)

Developer pro tip: in Atom, hit Cmd + . (Mac)/Ctrl + . (Windows/Linux) to show the Keybinding Resolver: great for seeing which command is connected with any keyboard shortcut combination you can come up with! (found via What are the keyboard shortcuts of the Atom editor? – keyboard shortcuts in Atom can also be found via Settings > Keybindings)

Bonus: Hyperlink Helper for Vim

Vim user and want a Hyperlink Helper? Just add this to your .vimrc file and call it via Space + l in Visual mode:

vmap <Space>l c<a href="<C-r>+"><C-r>"</a>