A Quick Look on my ReasonML Workflow with VSCode

Update, 10.9.2018: This article has migrated to the newly recommended VSCode plugin by Jared Forsyth.

The version of my toolchain on this date:

• Reason 3.3.3 @ e10fa53
• BuckleScript 4.0.5

Note: This article is aimed for beginners without any knowledge about Reason.

In April 2018, Nik Graf and I were giving workshops at React-Finland and got some really good impressions on how newcomers learn to code in Reason for their very first time.

The tools in the Reason ecosystem are quite useful to learn the language itself, so I try to show you how I work on Reason code inside VSCode and the terminal, to make it easier for you to get started.

Luckily since August 2018, the installation steps got way easier with the new VSCode plugin done by Jared Forsyth.

What’s the major difference to the existing ocaml / reason plugin? You can read the motivation behind this here.

This is also the only plugin which works on Windows without any hacks, therefore makes it the official recommended way of developing Reason.

Step 1— Installing the VSCode Reason Plugin

Go to the extension tab and search the marketplace for a plugin called reason-vscodeby Jared Forsyth, press the install button and reload your VSCode instance.

Now your editor should be able to interact with Reason code. After an initial build with BuckleScript, you should be able to see type information on cursor hover, inferred types and also basic type errors. Also you will notice that *.re will have correct syntax highlighting.

Step 2— Let’s try out the setup

For the next steps, let’s check out a Reason / BuckleScript based project. For convenience, we will use the same repository I use for my workshops:

https://github.com/ryyppy/reason-workshop

Clone the repository and run npm install to install all necessary dependencies. Since bs-platform is defined as a devDependency, all the tools you need to compile Reason to JavaScript will also be installed inside your node_modules directory.

We already defined some convenience scripts inside package.json to easily interact with the BuckleScript compiler:

"scripts": {
  "bs:clean": "bsb -clean-world",
  "bs:build": "bsb -make-world",
  "bs:watch": "bsb -make-world -w"
}

So by running npm run bs:watch you will start the BuckleScript compiler in watch mode, actively recompiling Reason files (*.re) on each change. Since BuckleScript also offers better error messages than Merlin, let’s use the watch command inside the VSCode terminal itself:

In the screenshot above, you’ll see BuckleScript up and running in the bottom terminal pane. Whenever there is a type error in our code (after saving a file), the compiler will show nice error messages for troubleshooting:

For me, I find it much easier to have BuckleScript running inside my VSCode, since I will never be required to switch from my IDE to my terminal. As soon as I adapted this workflow, I realized that my feedback loop was much quicker and I got a much more immersive coding experience.

Of course, there are many other tools which need to be run in the background, like webpack or a development server. I usually keep them in my separate terminal, because in most cases, errors only happen whenever BuckleScript doesn’t fully compile.

Last Quick Tip: Reformatting

Whenever you are editing a *.re file, you can run Shift-Option-F to reformat the editor buffer.

To try this, copy this code snippet in one of the reason files inside thesrc directory and hit the Shift-Option-F hotkey:

let addAndStringify = (
  a,
  b) => {
let c = a + b;

string_of_int(c);

};

The code should now be correctly formatted.

That’s it! After following these 2steps, you are now able to work on Reason code in VSCode.

If you have any problems with your setup, make sure to ask questions on our Reason Discord #editorsupport channel.

For more blog articles & news about Reason and other web related programming languages, follow me on Twitter.