odininon / vscode-reasonml

Reason support for Visual Studio Code

vscode-reasonml

Reason support for Visual Studio Code

Discussion

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.

Features

• highlighting

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

• editing

  • document formatting (enable on save with reason.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

Getting Started

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

Recommended Syntax Themes

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

• Atom One Dark
• Dark+ (default theme)
• Dracula
• Flatland Monokai
• Oceanic Next

Reason Configuration

• Reason

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

Merlin Configuration

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.

Advanced Features

Case splitting

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

Introducing a switch

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)

Before

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

After

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

Nesting switch expressions

The switch introduction functionality works with nested switch expressions:

Before

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

After

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

Splitting a pattern without introducing a switch

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

Before

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

After

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