vite-elm-template VS elm-format

After that point I started looking into how Elm works from the web dev perspective with resources like Elm in Action and Frontend Masters courses (first working in ellie-app-for-elm-dev then upgrading to vite-elm-template).

Using vanilla HTML and JS is nice, but most of the time at work or in larger projects we're using some sort of build tooling to have a more streamlined experience. I'm personally a big fan of Vite, the frontend tooling solution by the creator of Vue. I maintain a Vite template for building Elm applications, which utilized the excellent Elm plugin for Vite to achieve hot module reload and directly importing our .elm files into our Javascript.

This was a template I created to scratch my own itch. As a Vue developer, I love working with Vite, and really wanted a base template for Vite that I could use to build Elm applications. vite-elm-template is a basic Vite template intended to get you started writing in Elm without having to spend time configuring everything yourself. Unlike elm-pages or elm-spa, it's not a framework of any sort. If you want to bring in single-page application features, or other functionalities, you will have to build those in yourself. That said, it's perfect for getting started with a basic environment.

Keep in mind for the pipes, many in Elm, whether they’re using elm-format or not, will break the pipes to a different line in case there are many of them. For some, they find this more readable (I’m in that group). Let’s show an example of that using the same pattern to design a Paginator, the row of numbered buttons that allow you to move between pages of data.

9ᵗʰ - Aaron VonderHaar releases a new version of elm-format.

Unlike Javascript, Elm has an official Style Guide for how Elm code should be structured. In addition, some formatting is built into the language itself, such as requiring indents of four spaces. This removes a major point of contention within teams. In addition, the community has put together a wonderful tool called elm-format. Similar to Prettier, this utility can be used to ensure that all Elm code matches the official style guide. Unlike Prettier, there is no custom configuration, meaning once again that your team can focus on writing code instead of what kind of quotes to use.

Regarding user experience and tooling, I'd suggest you use an editor that is compatible with the elm language server: https://github.com/elm-tooling/elm-language-server VSCode is a good default choice. You'll also be interested in other toolings. elm-json (https://github.com/zwilias/elm-json) is great to simply install and uninstall dependencies. elm-format (https://github.com/avh4/elm-format) is a must since most active people in the community use it, and simply viewing your code being moved around on save is a good sign that you wrote something with a good syntax.

Take for example the debate about 2 vs 4 spaces. People often (but not always) have very strong opinions about this, yet it is clear that this formatting choice will probably not be the dominant factor in the success of a project. A quick google search also reveals no scientific research in this field. Concerning surveys, I found this interesting (from a survey on 2 vs 4 spaces in elm-format) as one datapoint: