How to create a shortcut to cycle between ERB tags?


#1

So far, I’m quite impressed by Atom and I could see it become my main editor for Ruby/Rails. Still, there’s one thing that I miss enormously: when using TextMate 2, I can press cmd + . and when inside an .html.erb file, it automatically inserts <% %>. If I press cmd + . multiple times, it cycles between <% %>, <%= %>, <%# %>, etc. It also places the cursor between the tags.

How can I achieve the same behavior with Atom?

Thanks!


#2

Definitely something feasible in Atom. I do not have much time here to details how I’ld do it but I’ll try to find some time to wrote something tomorrow.


#3

That would be really cool! I don’t quite see how to tackle this. Thanks :slight_smile:


#4

Basically, I’d write a command that did the following:

  1. It would have an array of tag types, probably customizable by configuration just to make life easy
  2. When activated, it would check to see if the current selection is immediately surrounded by one of the tags
    1. If so, get the index of the tag type and rotate the tags
    2. If not, wrap the current selection in tags[0]

Once you have the command, you can assign whatever key you want to it … though keep in mind that Cmd+. is by default assigned to Keybinding Resolver, a very useful Atom debugging tool, and sometimes people here refer to commands by default keybinding rather than by name. (Just don’t want you confused later on if you come back some time in the future to ask a question and someone says, “Have you tried Cmd+.?” :laughing:)


#5

Thanks. The logic of if, I figured… it’s the execution I wouldn’t know how to do (and where).


#6

I started writing a package for that, the basic idea is to create one cycling command for each type of tag to insert/cycle over, for instance the config could have this form:

patterns: 
  erb: ['<%', '%>']

Which would create a specific command such smart-tag-cycle:erb to insert/cycle through the <% %> tags. This mean you can setup other patterns and bind them to whatever binding you prefer.

Also I was wondering if there is a way to allow to manage a hash from the settings view. I remember this discussion about improving the config options but I didn’t follow the thing:

If anyone know if there was improvement in this area I’ll gladly take any suggestions.


#7

Ok I got a first version running at https://atom.io/packages/smart-tag-cycle
It only handle the <% %> tag for the moment using smart-tag-cycle:erb and smart-tag-cycle:erb-backward, but you can configure whatever you need. And there’s no default binding for the generated commands at the time.


#8

This is awesome Abe! Installed :slight_smile:


#9

Great :), tell me if it works well for you.

I’m preparing a new version with the option to select the whole tag content when cycling through tags. It will also have support for php <? ?> tags and I’ll see to place the cursor more precisely when facing <%= or <%#.

And if anyone have any other suggestions for tags/blocks to support, do not hesitate.


#10

Hey abe, thanks so much for creating this, and excuse me for such a noob question (new to programming/editors/Atom in general). But what keys would I press to have it create the <% %> tags?

in Sublime I had a userscript like this…

    {
    "keys": ["alt+r"],
    "command": "insert_snippet",
    "args": {
        "contents": "<%= $0 %>"
    }
},

{
    "keys": ["alt+w"],
    "command": "insert_snippet",
    "args": {
        "contents": "<% $0 %>"
    }
}

any way to get something similar?


#11

You can add a binding for that command in your keybinding file (cmd-shift-p then Application: Open Your Keymap). For erb tags you should add something like that:

".editor": 
  "cmd-alt-e": "smart-tag-cycle:erb"
  "cmd-alt-shift-e": "smart-tag-cycle:erb-backward"