Productive component navigation in Neovim

Mikołaj Sodzawiczny

Mikołaj Sodzawiczny / January 23, 2023

3 min read

Neovim is definitely the hottest PDE (personal development environment) out there. We are living through screen-based text editor renaissance so there's a lot of buzz around editors like Neovim and Helix (build in Rust!!1!). Heck, even many non-technical people are starting to use neovim as their note taking app of choice.
In this blog post I'll talk about the issue that really bothered me when using React and nvim - going to jsx components fast

screenshot of telescope helptags

What was the issue?

As a somebody who used to work/works (depending on the project) in vscode I must admit that I like some of its functionality. Like my beloved Ctrl + Left-Click - really simple and to the point. It will bring you to the function/variable/method definition but in React it also serves a purpose of redirecting you to a JSX component. It makes debugging and navigation without search tools great. I usually work in codebases with thousands of components so it's really handy.
This approach even works in Neovim BUT I didn't want to rely on my mouse no more. You can do a hacky way and do a shortcut that will do the mentioned Ctrl + Left-Click but it seemed like swimming against the current and it would sometimes not work properly.

Solution? Generating tag files for source code

I am not planning to go into great detail about file tags because I am not an expert but drawing on my limited knowledge I can only say that index (or tag) files are a computer file with an index that allows easy access to records. (usually methods, objects, function etc.).
So to solve my component navigation problem I used ctags. Easy to use CLI tool that will generate tag files for source code.

Steps I took

  1. I installed universal-ctags (maintained version of ctags) from snap (I know, gross) using
    sudo snap install universal-ctags
  2. I run this command in the project's frontend directory (you can run it wherever but in the relevent directory/file). NOTE: -R stands for recursive - for directories
    ctags -R <source_file>
  3. Started moving blazingly fast using Ctrl + ]

My initial thought was that I didn't want to push tags file to the org's repo but it actually got ignored automatically. If it doesn't do it for you you can probably set up a workaround with git config.

Summary

It's my first tutorial-ish post so I don't know if it was concise enough but well, hope it helped someone :)