Home

Awesome

Build Status latest version: 0.8.7

elm-format

elm-format formats Elm source code according to a standard set of rules based on the official Elm Style Guide. It is inspired by the popular gofmt.

The benefits of elm-format:

Usage

elm-format .  # Format all *.elm files in the current directory
elm-format Main.elm  # Format a single file
elm-format Main.elm --yes  # Overwrite the file without prompting
elm-format src/ Main.elm  # Format the listed files and directories
elm-format --help  # See other command line options

Installation (latest version: 0.8.7)

To install elm-format:

npm install -g elm-format

or download the version appropriate for your OS from the release page, unzip it, and place elm-format or elm-format.exe (windows) on your PATH.

You must run elm-format from the directory that contains your elm.json (for Elm 0.19) or elm-package.json (for Elm 0.18), or else you must pass the appropriate --elm-version=0.19/--elm-version=0.18 command line argument.

Editor integration

<!-- Open-source editors will be listed before closed-source editors. -->

Find your editor in the table below. The recommended plugin for each editor is indicated with :trophy: (trophy emoji).

<table> <tr> <th>Editor</th> <th>Plugin</th> <th>Installation</th> <th><a href="https://github.com/avh4/elm-format/issues/104">Formatting</a></th> <th><a href="https://github.com/avh4/elm-format/issues/104">Format on save</a></th> <th><a href="https://github.com/avh4/elm-format/issues/104">Configuration</a></th> <th><a href="https://github.com/avh4/elm-format/issues/104">Error handling</a></th> </tr> <tr> <td rowspan=2><a href="https://atom.io/">Atom</a></td> <td>:trophy: <a href="https://atom.io/packages/elm-format">atom-elm-format</a></td> <td>:white_check_mark: <a href="#atom-elm-format-installation">2 steps</a></td> <td>:white_check_mark:</td> <td>:white_check_mark:</td> <td>:white_check_mark:</td> <td>:warning: no installation instructions</td> </tr> <tr> <!-- Atom --> <td><a href="https://atom.io/packages/atom-beautify">atom-beautify</a></td> <td>:warning: <a href="#atom-beautify-installation">3 steps</a></td> <td>:white_check_mark:</td> <td>:warning: requires configuration</td> <td>:white_check_mark:</td> <td>:white_check_mark:</td> </tr> <tr> <td rowspan=1><a href="http://lighttable.com/">Light Table</a></td> <td>:trophy: <a href="https://github.com/rundis/elm-light">elm-light</a></td> <td>:warning: <a href="#elm-light-installation">3 steps</a></td> <td>:white_check_mark:</td> <td>:warning: requires configuration</td> <td>:white_check_mark:</td> <td>:warning: no installation instructions</td> </tr> <tr> <td rowspan=1>Vim</td> <td>:trophy: <a href="https://github.com/ElmCast/elm-vim">elm-vim</a></td> <td>:x: <a href="#elm-vim-installation">6 steps</a></td> <td>:white_check_mark:</td> <td>⚠️ requires configuration</td> <td>:white_check_mark:</td> <td>:x: no error message</td> </tr> <tr> <td rowspan=1>Emacs</td> <td>:trophy: <a href="https://github.com/jcollard/elm-mode">elm-mode</a></td> <td>:x: <a href="#elm-mode-installation">4 steps</a></td> <td>:white_check_mark:</td> <td>:warning: requires configuration</td> <td>:white_check_mark:</td> <td>:warning: no installation instructions</td> </tr> <tr> <td rowspan=1>Visual Studio Code</td> <td>:trophy: <a href="https://marketplace.visualstudio.com/items?itemName=Elmtooling.elm-ls-vscode">Elm Tooling</a></td> <td>:warning: <a href="#visual-studio-code-installation">3 steps</a></td> <td>:white_check_mark:</td> <td>:warning: requires configuration</td> <td>:white_check_mark:</td> <td>:x: uninformative error message</td> </tr> </tr> <tr> <td rowspan=1>Sublime Text</td> <td>:trophy: <a href="https://packagecontrol.io/packages/Elm%20Language%20Support">Elm Language Support</a></td> <td>:white_check_mark: <a href="#sublime-text-installation">2 steps</a></td> <td>❔ TBD</td> <td>:white_check_mark:</td> <td>❔ TBD</td> <td>❔ TBD</td> </tr> <tr> <td rowspan=1>JetBrains (WebStorm, etc)</td> <td>:trophy: <a href="https://klazuka.github.io/intellij-elm/">intellij-elm</a></td> <td>:warning: <a href="#jetbrains-installation">4 steps</a></td> <td>:white_check_mark:</td> <td>:warning: requires configuration</td> <td>:warning: requires configuration</td> <td>❔ TBD</td> </tr> <tr> <td rowspan=1>TextMate</td> <td>:trophy: <a href="https://github.com/cmason/Elm.tmBundle">Elm.tmbundle</a></td> <td>:white_check_mark: <a href="https://github.com/cmason/Elm.tmBundle#installation">2 steps</a></td> <td>❔ TBD</td> <td>❔ TBD</td> <td>❔ TBD</td> <td>❔ TBD</td> </tr> </table>

Integration with other tools

These tools also integrate with elm-format:

Detailed installation instructions

If you can simplify or improve the installation instructions or add instructions for another editor, please make a pull request. The default behavior of elm-format-approved plugins is to format Elm files on save.

atom-elm-format installation

  1. Install elm-format

  2. Install atom-elm-format

    apm install elm-format
    

or use the Atom package manager in Atom's settings

atom-beautify installation

  1. Install elm-format

  2. Install atom-beautify

    apm install atom-beautify
    

or use the Atom package manager in Atom's settings

  1. Use ^⌥B (CTRL-ALT-B) to format a file

elm-light installation

  1. Install elm-format
  2. Install the elm-light plugin using the Light Table plugin manager
  3. To format on save, edit your user keymap by performing the following:
[:editor.elm "ctrl-s" :save :elm-format :elm.lint]

elm-mode installation

  1. Install elm-format

  2. If your Emacs has package.el (which is automatically the case for Emacs >= 24), you can install elm-mode from the package in MELPA:

    1. Ensure that you have added the MELPA source in your ~/.emacs.d/init.el:

      (require 'package)
      (add-to-list 'package-archives '("melpa" . "http://melpa.org/packages/"))
      
    2. Install elm-mode (official instructions): Use M-x list-packages and choose elm-mode.

  3. Add the following to your ~/.emacs.d/init.el:

    (add-hook 'elm-mode-hook 'elm-format-on-save-mode)
    

elm-vim installation

If you are an advanced vim user and already have a preferred vim plugin installation method, you may prefer to refer to the official elm-vim installation instructions. The instructions below are for those who need a step-by-step walkthrough of how to get the plugin set up.

  1. Install elm-format

  2. Install vim-plug (official instructions) NOTE: if you are using neovim, you will need to refer to the official instructions.

    1. Download vim-plug:

      curl -fLo ~/.vim/autoload/plug.vim --create-dirs \
          https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim
      
    2. Make sure ~/.vimrc exists and has a section like this:

      call plug#begin('~/.vim/plugged')
      " ... any active plugins
      call plug#end()
      
  3. Install elm-vim (official instructions)

    1. Add Plug 'elmcast/elm-vim' to the plug#begin plugin section in your ~/.vimrc
    2. Start vim and run :PlugInstall
  4. Add the following to your ~/.vimrc:

let g:elm_format_autosave = 1

Visual Studio Code installation

  1. Install elm-format

  2. Install the extension Elm Plugin for Visual Studio Code.

  3. Configure the extension to format on save:

    1. Find your settings.json file (instructions).
    2. Add the following key-value pair to your settings.json:
    "[elm]": {
        "editor.formatOnSave": true
    },
    

Sublime Text installation

  1. Install elm-format
  2. Install the Elm Language Support package.

JetBrains installation

This is for WebStorm and other JetBrains IDEs like IntelliJ and PyCharm.

  1. Install elm-format

  2. Install the intellij-elm plugin

  3. In IntelliJ, open Settings -> Languages & Frameworks -> Elm

    1. Specify the path to elm-format (try the "Auto Discover" button first)
    2. Check the "Run when file saved?" checkbox

Development info

Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.

Use the instructions below to get started. More detailed information is available in ./dev/Documentation/.

Building from source

  1. Install Haskell ghcup following the instructions for your operating system: https://www.haskell.org/ghcup/
# check out the repo
git clone https://github.com/avh4/elm-format.git
cd elm-format

# initial setup
ghcup install ghc 9.4.4
ghcup set ghc 9.4.4
cabal install hpack

# build
dev/build.sh -- build

# run the built elm-format
./_build/bin/elm-format/O0/elm-format

See dev/Documentation for more contributor and build command documentation.