Reason support for Visual Studio Code

There is an #editorsupport channel on the Reason discord server. If you would like to discuss an idea or need help or have other feedback you can usually find me (@freebroccolo) idling there.

• highlighting

  • advanced syntax highlighting for reason
  • basic highlighting for merlin, ocamlbuild, and opam files

• editing

  • document formatting (enable on save with editor.formatOnSave)
  • completion and snippets
  • rename symbol (F2 or right click)
  • case splitting

• navigation

  • symbol outline for buffers (⇧⌘O) (type : in list to sort items)
  • symbol outline for project (⌘T) (supports regular expressions)
  • jump-to-definition (⌃+click) and code preview (⌘+hover)
  • find references (⇧F12 or right click)

• static analysis

  • merlin integration with incremental edit synchronization
  • display types over definitions (disable with editor.codeLens setting)
  • display types and markdown-rendered docs on hover
  • online linting and compiler diagnostics with suggested fixes
    • ⇧⌘M to toggle diagnostics panel
    • F8 to loop through diagnostics for current file
    • Click on lightbulb icon for suggested fixes
  • built-in support for showing BuckleScript's bsb errors inline, as a companion to merlin's diagnosis.

Although syntax highlighting should display well in most themes we recommend and test with the following:

• Dark+ (recommended; this theme is the most thoroughly tested)

• Atom One Dark
• Dracula
• Flatland Monokai
• Oceanic Next

• Reason

The Reason installation steps also installs Merlin for you, so you can skip the Merlin installation in the next section.

Configured for you already if you've installed Reason above & plan to use it for JS compilation. Skip this step.

This extension relies heavily on merlin so you will need to have your project set up for that in order to enable completion and hover info. See the Merlin wiki for details on how to do that. Basically you need to have a .merlin file in your project root which lists the source directories, libraries, and extensions used.

You can optionally start bsb from the editor itself, and have the command-line errors appear inside the editor. Add the following to Code > Preferences > Settings:

"reason.diagnostics.tools": [
  "merlin",
  "bsb"
]

Merlin's diagnosis is best-effort and can sometimes be wrong; bsb's diagnosis is 100% correct. bsb diagnosis also works on Windows.

Note: due to an existing problem, make sure that you're opening vscode from the command-line, at the root of your project!

Install this Visual Studio Code extension just like any other extension.

Search for reason and install OCaml and Reason IDE by Darin Morrison.

To enable formatting on save, add the following to Code > Preferences > Settings:

{
  "editor.formatOnSave": true
}

For the examples below, <cursor> represents the position of the current VS Code editor cursor.

In order to introduce a switch, execute the following steps:

1. select an identifier or move the cursor anywhere within its word range (as below)
2. open the palette (⇧⌘P) and run Reason: case split (typing case should pull it up)

let foo (arg: list 'a) => a<cursor>rg;

let foo (arg: list 'a) => switch arg {
  | [] => failwith "<case>"
  | [_, ..._] => failwith "<case>"
};

The switch introduction functionality works with nested switch expressions:

let foo (arg: list 'a) => switch arg {
  | [] => failwith "<case>"
  | [_, ...xs] => x<cursor>s
};

let foo (arg: list 'a) => switch arg {
  | [] => failwith "<case>"
  | [_, ...xs] => switch xs {
    | [] => failwith "<case>"
    | [_, ..._] => failwith "<case>"
  }
};

The case split feature can be used to split an existing pattern further:

let foo (arg: list 'a) => switch arg {
  | [] => failwith "<case>"
  | [x, ...x<cursor>s] => failwith "<case>"
};

let foo (arg: list 'a) => switch arg {
  | [] => failwith "<case>"
  | [_] | [_, _, ..._] => failwith "<case>"
};