September 04, 2017
I recently started working in an Angular project where I’m not able to use vim-projectionist to navigate the code. vim-projectionist is awesome, and I’ve grown used to it. Searching for files by name, in a code base with hundreds of files, started to become painful and I needed an alternative. Because I couldn’t find a plug-in that satisfied my needs, I decided to do it myself. In this article, I hope to demonstrate how you can program Vim using Ruby.
Let’s say that you have an HTML file that looks like this:
... <div class="timepicker"> <timepicker> ... </timepicker> </div> ...
When the cursor is on line two or four (the
timepicker tag), you want to
In this project, every directive is in the folder
where the directive’s name is also the file’s name. If the name has more than
one word, such as chart-timepicker, the file name would be snake case:
I’m assuming you don’t know enough VimScript to make this work (I don’t), but fear not, if you compiled Vim with Ruby support, this will be enough:
It’s a Vim function that you can trigger with
C-] or call with
:call AngularTemplateToDirective() (or map to a shortcut). Notice that it uses
a module called
VIM on line three. That module comes from Vim and it allows us
to control it from the Ruby. If you want to learn more use
:help ruby inside
This function fetches the current buffer and the current line. If the line
matches an HTML tag (something like
<timepicker something>), it takes the tag’s name, turns it to snakecase, and
opens the corresponding directive’s file.
Cool right? Five years using Vim and there’s still so much to learn!
With the function above, you can open directives from the HTML. How nice would it be to open CSS files from the HTML as well?
Taking the previous HTML example, when I’m in a line with
want to open the BEM component named
timepicker that, by
convention, sits in
Building on the previous implementation, you first check if the current line
class=", if not then look for the tag using the code from before. If
it does match, you extract the component’s name from the class, turn it into
snake case and open the file:
I know that this code could be better, but I’m not concerned with that because it’s part of my Vim configuration, I’m always changing it, and it actually works!
I hope that you’ve found something new in this blog post. If you’re looking for more ideas for your Vim setup, check out this blog post from Miguel.