DevotionGeo

DevotionGeo

Erlang Blog Post: Formatting your Erlang code in Visual Studio Code

There are 3 main formatters for Erlang which you can use from the command-line,

Visual Studio Code’s extension called Erlang Formatter uses these formatters to format Erlang code on save or when the shortcut keys combination is pressed which is Shift + Alt + F on Windows, Shift + Option + F on Mac and Ctrl + Shift + I on Linux.
(Note: the erlang extension also tries to format Erlang code, but it wasn’t working for me, and it doesn’t have any setting to set the desired formatter).

Following were the steps I used to make it work (all the settings and instructions can be found at Github READMEs of Erlang Formatter for VSCode and rebar3_format, and the Getting Started Page of rebar3, but I’m trying to make it a tiny bit less confusing than how I found it).

  1. Install rebar3:
    If you already have Elixir installed, chances are that there is a rebar3 binary somewhere in that installation. Mine was at ~/.asdf/installs/elixir/1.10.4-otp-23/.mix/rebar3 as I use asdf for version management. In that case you can run the following command, replacing the path with the path to rebar3 on your machine, or can go to the directory where rebar3 is located and run as ./rebar3.
    ~/.asdf/installs/elixir/1.10.4-otp-23/.mix/rebar3 local install

    Then add export PATH=$PATH:~/.cache/rebar3/bin to your .bashrc or .zshrc. And after that run the second command as,
    rebar3 local upgrade
    (this time you don’t need to add ./ or the complete path to the command, as rebar3 (the new copy) is already installed to ~/.cache/rebar3/lib and is added to the path).

    Alternatively you can run the following commands to install from sorce.
    git clone https://github.com/erlang/rebar3.git
    cd rebar3
    ./bootstrap
    ./rebar3 local install
    Don’t forget to add export PATH=$PATH:~/.cache/rebar3/bin to your .bashrc or .zshrc.

  2. Create a rebar.config file under ~/config/rebar3/ or simply run the following comand in the terminal.
    code ~/.config/rebar3/rebar.config
    which will open a rebar.config file under ~/.config/rebar3/ in vscode.
    Add the format configuration to this file. You can find the configuration options at the rebar3_format README at Github.
    Following is my rebar.config (notice the comments).

{plugins, [rebar3_format]}.
{format, [
    % {files, ["src/*.erl", "include/*.hrl", "test/*.erl"]},
    {files, ["**/*.erl"]},
    {formatter, default_formatter},
    {options, #{
        % paper => 100,
        % inline_qualified_function_composition => true,
        % inline_simple_funs => true,
        % inline_items => all,
        % inline_attributes => all,
        % inline_expressions => true,
        inline_clause_bodies => true
    }}
]}.
  1. Install the VSCode extension Erlang Formatter, if not installed already, and add the following settings to your settings.json.
  "[erlang]": {
    "editor.tabSize": 4,
    "editor.defaultFormatter": "szTheory.erlang-formatter",
    "editor.formatOnSave": true
  },
  "erlangFormatter.formatter": "rebar3_format",

I wanted to have a 2 spaces tab size for Erlang, but looks like it’s a setting of rebar3_format which can’t be overridden, so I set it to 4 spaces in the editor too, so that the indent guides don’t look off.

(Note: feel free to edit this post).


Posted via Devtalk (see this thread for details).

Where Next?

Popular in Blog Posts Top

sashaafm
How to use the blogs section You can post links to your blog posts either in one of the Official Blog Posts threads (like this one), or, ...
296 25903 131
New
blackode
https://medium.com/blackode This article comprises of two biggest changes of ExUnit. Arguments in the failure report Running mix tes...
New
AstonJ
Update: How to use the blogs section You can post in one of the Official Blog Posts threads (like this one), or, via Devtalk and a new t...
New
mudasobwa
Blogged about the motivation and reasoning behind my idea to create yet another FSM library. Long story short: I did it in a proper way :...
New
davydog187
Hello all! I wrote a blog post called Elixir Observability: OpenTelemetry, Lightstep, Honeycomb. The post post covers how to integrate ...
New
mssantosdev
This post is a guide on how Norba and I are building LiveMatch, a real-time app for soccer to follow multiple games in one place. https:...
New
mssantosdev
Our take on how to build a frontend style guide with Phoenix Components, Atomic Design and plain CSS, with focus on reusability and code ...
New

Other popular topics Top

Qqwy
Update: How to use the Blogs & Podcasts section You can post links to your blog posts or podcasts either in one of the Official Blog...
3271 131117 1222
New
electic
Hi, I am new to Elixir. I am trying to use the DateTime component to insert a date into MySQL however the there seems to be no way to fo...
New
Brian
What is the proper way to load a module from a file in to IEX? In the python world, doing something like this pretty standard: from ....
New
jononomo
For some reason my phoenix channels are working for me in my local dev environment, but as soon as I deploy via Docker, I get a 403 error...
New
AstonJ
Seen any cool LiveView demos, sample apps or examples? Please post them here! :003:
New
shijith.k
I am trying to start a new phoenix project with elixir 1.9, but mix phx.new does not work. It says that ** (Mix) The task "phx.new" could...
New

We're in Beta

About us Mission Statement