I use Rescript at work, and find that I often want to switch between interface and implementation files. Less often, I also want to inspect the compiled source of a file. This can be a small pain to do by hand, and small pains repeated often become big pains. So here are some VS Code extensions to help out.

For Opening Interface & Compiled Files

Extension: Open related files

This extension will automatically open files with the same name, but different extensions, so you'll get the .resi and the .bs.js files popped up in new tabs. Better yet, if you keep running the command, it toggles between .res, and .resi.

This one doesn't come with a default keymap, so you'll need to add one in your settings.

Another cool thing about this extension is that it can create interface files for you as well, just throw this into your settings.json:

  "openRelatedFiles.createFileMap" : {
    ".res": [
        ".resi"
    ],
    ".re": [
      ".rei"
    ]
  }

And then you can use the "Create related files" command to make an ".resi" file for you.

For Opening Child Files

The OCaml naming convention gives files hierarchy by their names. For example Foo.res would break out some complex logic "baz" into a subfile: Foo_Baz.res and import it. We can use an extension to easily browse these child files.

Quick Open Related Files

This pops open a picker of files that have a name with a prefix similar to our own: