Elm and VSCode: Formatter messes up spacing

Question

So I started learning Elm today. I use VSCode as my editor.

I followed the docs for the set up and installed elm as well as el-format via npm install -g elm elm-format. I also installed the VSCode Elm extension.

Next, in my settings.json I set:

"[elm]": {
  "editor.formatOnSave": true
},

Then I went on with the tutorial. In it the code is formatted like this:

import Browser
import Html exposing (Html, Attribute, div, input, text)
import Html.Attributes exposing (..)
import Html.Events exposing (onInput)



-- MAIN


main =
  Browser.sandbox { init = init, update = update, view = view }



-- MODEL


type alias Model =
  { content : String
  }


init : Model
init =
  { content = "" }



-- UPDATE


type Msg
  = Change String


update : Msg -> Model -> Model
update msg model =
  case msg of
    Change newContent ->
      { model | content = newContent }



-- VIEW


view : Model -> Html Msg
view model =
  div []
    [ input [ placeholder "Text to reverse", value model.content, onInput Change ] []
    , div [] [ text (String.reverse model.content) ]
    ]

But when I hit safe, it formats the code like this:

module Main exposing (Model, Msg(..), init, main, update, view)

import Browser
import Html exposing (Attribute, Html, div, input, text)
import Html.Attributes exposing (..)
import Html.Events exposing (onInput)



-- MAIN


main =
    Browser.sandbox { init = init, update = update, view = view }



-- MODEL


type alias Model =
    { content : String
    }


init : Model
init =
    { content = "" }



-- UPDATE


type Msg
    = Change String


update : Msg -> Model -> Model
update msg model =
    case msg of
        Change newContent ->
            { model | content = newContent }



-- VIEW


view : Model -> Html Msg
view model =
    div []
        [ input [ placeholder "Text to reverse", value model.content, onInput Change ] []
        , div [] [ text (String.reverse model.content) ]
        ]

So it adds extra lines, and extra module Main exposing ... and doubles the number of spaces. I tried setting spaces to 2 again using the footer in VSCode, but that didn't help.

My questions are:

1. Is it okay that saving adds the extra module Main ...?
2. Is having 2 spaces best practice / community standard, or 4?
3. If it is 2 (like it is in the tutorial's default code) how can I get my formatter to respect that?
4. If it is not, why has the tutorial the non-standard indentation?

Answer 1

First of all, this question is both too broad and primarily opinion-based and will probably be closed because of that. It would have been more suited for the forums I think.

That said, I'm going to try to answer it as best as I can anyway, since it's here:

1. Yes? Most modules won't be very useful without exposing something and it's good practice to be explicit about what's being exposed.

2. elm-format is the community standard, so 4 it is.

3. You can't. This is by design. It has also been discussed to death in various fora. Here's one issue discussing it

4. You'd have to ask Evan about that. It might be related to formatting for the web, or just Evan being lazy.