Table of Contents

Elm layer

Table of ContentsClose


1. Description

This layer adds support for Elm.

It relies on elm-mode and flycheck-elm.

1.1. Features:

  • Syntax highlighting.
  • Intelligent indentation
  • Auto-completion integration for company (default) or auto-complete modes
  • Syntax checking support using flycheck
  • Integration with elm-make
  • Integration with elm-repl
  • Integration with elm-reactor
  • Integration with elm-package

2. Install

2.1. Layer

To use this configuration layer, add it to your ~/.spacemacs. You will need to add elm to the existing dotspacemacs-configuration-layers list in this file.

2.2. Elm Platform

The elm-platform is a bundle of tools, including the elm-compiler, elm-make, elm-reactor, elm-repl and elm-package.

Depending on the method of installation, the elm-mode package would need to be able to access commands such as elm-reactor or elm-make.

2.2.1. macOS and Windows installers

Official installers for these operating systems are available from:

2.2.2. Universal installer using npm

A npm based installer is available to, and provides pre-compiled binaries for certain operating system and architectures.

npm install --global elm

Also, note that you might need to set the ELM_HOME environment variables to the corresponding directory created by the installer.

If you are facing problems with previewing a buffer with elm-reactor ensure that the absolute path of the npm global bin file is on your path within emacs

MacOS users facing problems with elm-reactor failing to properly install or run, see this issue

2.2.3. Source code

To build from source, see instructions here:

2.3. elm-format

elm-format can be used to format elm code according to a standard set of rules.

To install elm-format run below command:

npm install --global elm-format

If this does not work for you please check here.

Also, note that if you use homebrew to install elm-format the installed exe has a version suffix, the installed command name can be set in your ~/spacemacs:

(elm :variables
     elm-format-command "elm-format-0.17")

2.4. elm-test

elm-test can be used to run unit tests.

To install elm-test run below command:

npm install --global elm-test

3. Configuration

All layer configurations can be done by setting layer variables in your dotfile. No custom user config lines are necessary

3.1. Backend

3.1.1. LSP

For proper IDE support the lsp backend should be used. It is based on an external server which will be started automatically by emacs, once an elm file is opened. The key bindings are the same for all lsp modes so if you are already familiar with one you should be able to work the same in all modes.

To set explicitly do the following in your dotfile:

(elm :variables
        elm-backend 'lsp)

For this to work you will also need to install the lsp server and separate dependencies with below command:

npm install -g elm-analyse @elm-tooling/elm-language-server

NOTE: Key bindings for LSP are defined in the LSP layer. Also it is advisable to have a look at the autocomplete layer for an optimal intellisense config for LSP.

3.1.2. None

If the lsp layer is loaded in your dotfile and nothing is set for elm-backend, lsp will be automatically selected. To explicitly disable the lsp backend set the following in your dotfile:

(elm :variables elm-backend nil)

4. Basic usage tips

4.1. Compilation

To control the name of the compiled JavaScript file, use SPC m c B instead of SPC m c b. This will overwrite the --output parameter of elm-make to [buffer-name].js instead of the default.

4.2. Reactor

elm-reactor is an interactive development tool, used to develop and debug Elm programs. It will automatically compile an Elm program, and run it in the browser, with editor agnostic support for hot-swapping and time-travel debugging.

To preview Main.elm, press C-c C-m (or SPC m R m). Alternatively, to preview from buffer, press C-u C-c C-n (or SPC m R n). To preview in debug mode, prefix with C-u (or SPC u).

By default, elm-reactor will launch with its own generated index.html. To use a custom html, you'd need to load the debuger excplictly and use an http daemon to serve your custom file.

If needed, default values for host and port used by for the elm-reactor server can be controlled by passing in these variables in your ~/.spacemacs:

(elm :variables
     elm-reactor-port "3000"          ; default 8000
     elm-reactor-address "") ; default

4.3. On save usage

4.3.1. Imports sort

Set elm-sort-imports-on-save to t to sort the imports in the current file on every save.

(elm :variables elm-sort-imports-on-save t)

4.3.2. File format

Set elm-format-on-save to t to format current file on every save.

(elm :variables elm-format-on-save t)

4.4. Indentation

elm-mode indentation is based on cycling: every time you insert a new line there will be one or more indentation levels available for you to choose from. The exact number is printed in the minibuffer either as Sole indentation or Indent cycle (n)… where n is the number of available indentations to choose from. If the automatic indentation level was not the one you expected simply hit TAB to cycle through the list (note that hitting any other key will cancel the cycle).

4.5. Test runner settings

You may want to customize the default suffix for test files. For example, if you prefer to put your tests in HelloSpec.elm instead of HelloTest.elm, set the following variable:

(elm :variables
     elm-test-runner-preferred-test-suffix "Spec")

Take a look here for more settings, and remember that this can be set by project using a dir-locals.el file.

5. Key bindings

5.1. elm-make

Key binding Description
SPC m c b elm-compile-buffer
SPC m c B spacemacs/elm-compile-buffer-override-output
SPC m c m elm-compile-main

5.2. elm-repl

Key binding Description
SPC m s i elm-repl-load
SPC m s f send current function to REPL
SPC m s F send current function to REPL and focus it in insert state
SPC m s r send current region to REPL
SPC m s R send current region to REPL and focus it in insert state

5.3. elm-reactor

Key binding Description
SPC m R n elm-preview-buffer
SPC m R m elm-preview-main

5.4. elm-test-runner

Key binding Description
SPC m t b elm-test-runner-run
SPC m t d elm-test-runner-run-directory
SPC m t p elm-test-runner-run-project
SPC m t r elm-test-runner-rerun
SPC m t w elm-test-runner-watch
SPC m t TAB elm-test-runner-toggle-test-and-target

5.5. elm-package

Key binding Description
SPC m p i elm-import
SPC m p c elm-package-catalog
SPC m p d elm-documentation-lookup

5.5.1. package list buffer

Key binding Description
g elm-package-refresh
v elm-package-view
m elm-package-mark
u elm-package-unmark
x elm-package-install
q quit-window

5.6. elm-format

Key binding Description
SPC m = b elm-mode-format-buffer

5.7. Refactoring

Key binding Description
SPC m r i elm-sort-imports

Author: root

Created: 2024-06-14 Fri 18:50