Navigating Typescript in Emacs with tide-nav.el
A useful function that I borrowed from a colleague’s emacs.d setup was a shortcut that returned which class or function the cursor is in when programming in Python. I used this quite a lot. I’ve found myself exploring quite a lot of TypeScript while developing some PDF reading features for Obsidian, found myself wanting this sort of feature, and so decided to implement. Hence we now have the tide-nav.el a library in Emacs for navigating an querying TypeScript - based upon the tide TypeScript IDE library.
tide-nav provides a few different functions.
The tide-nav-which-class and tide-nav-which-function show you which class or function you are in. This can be very useful when navigating large files.
Then there are some functions for jumping back to the start of a function or class definition: tide-nav-back-class and tide-nav-back-function.
I may at some point in the future (probably next time I do a lot of TypeScript code reading) add functions to navigate to the next class or function.
Blocks
I also provide some functions which act on “blocks” (namespaces, classes, functions of methods) in case you don’t want to worry about the difference between functions: tide-nav-back-block, tide-nav-which-block.
A little look under the hood
If you are interested in how this works. The function tide-command:navbar returns a complete parsed tree of the file and the rest of the functionality does tree type operations of this tree. I have a big of logic to find the “closest” tide node to the point.
There is a little hacky code to handle TypeScript that looks like this:
const func = () => {
}Irritatingly, tide does not, as far as I can tell, let you distinguish between these lambda expressions and constants. Because of this, I use the number of lines that the tide node covers as a proxy for whether this is a function of just a constant.
Final thoughts
So that’s that. It’s worth noting that other people might use some sort of code browser for this. I’ve never quite got on with such things - they require too much clicking. imenu does allow you to jump to “nodes” in the tide tree.
If you want to use this library check out the github page.
I am readwithai. I am working on developing tools and writing around for productivity, agency and reading mostly around Obsidian.
If you are an emacs user who is interested in Obsidian you might like to have a look at my plugin Plugin REPL which adds Emacs like features for scripting Obsidian like you can script Emacs. Or you might like to read this page on Obsidian for Org mode users.
If this sounds interesting you can follow me on X or on my blog:
