Skip to content

reasonml-editor/vscode-reasonml

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
March 18, 2018 15:03
December 25, 2016 20:05
December 25, 2016 20:05
September 14, 2016 18:16
October 2, 2016 23:07
November 9, 2017 00:35
January 8, 2018 19:37
September 14, 2016 18:16
September 7, 2017 18:35
September 7, 2017 18:35
September 14, 2016 18:16
August 17, 2019 05:47
January 8, 2018 19:37
January 8, 2018 19:37
May 26, 2018 20:26

NOTE: this extension is currently unmaintained.

If you're on our default workflow, please try this plugin instead. Thanks!

vscode-reasonml

Reason support for Visual Studio Code

screenshot

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 editor.formatOnSave)
    • completion and snippets
    • rename symbol (F2 or right click)
    • case splitting
  • navigation

  • 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.

Getting Started

Recommended Syntax Themes

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

Default Themes

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

Other Themes

Configurations

Reason

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

Merlin

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.

Bsb

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.

Installation

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
}

If you want to enable codelens, add the following to Code > Preferences > Settings:

"reason.codelens.enabled": true

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>"
};