Elm-format as Prettier plugin?

Hi everyone :wave:

I became interested in formatting ```elm code blocks inside markdown files and my first approach to this was to tweak atom-beautify: https://github.com/Glavin001/atom-beautify/pull/1990. The PR is still waiting to be merged, but I’m generally happy with the solution locally even despite two issues described in https://github.com/avh4/elm-format/issues/65#issuecomment-353570877.

Unfortunately, the tool I’ve got is Atom-specific and only works when Remark is chosen as a beautifier for markdown (which is not so by default). Of course, the situation is far from a zero-config command-line heaven or from supporting other editors like VSCode :sweat_smile:

I recently noticed that Prettier (a fast-growing opinionated code formatter) added plugin support. Potentially, that’s great news for the Elm community, because it seems like it is now possible to access elm-format via unified Prettier API from anywhere. In addition to that, the docs mention something called embed, which possibly means that elm-format can be applied to markdown code blocks that start with ```elm :tada:

I’m starting this topic because I have not yet found an npm package called prettier-plugin-elm and would like to help with putting it together. There is a chance that I might find some time on implementing a prototype in the next several weeks, but I’d be keen to see a bit of support from experienced members of the Elm community.

Who would like to join? What do you think of this idea in general?

1 Like

This discussion started in Elm-format as prettier plugin? · Issue #459 · avh4/elm-format · GitHub and was shortly moved here as Discourse feels like a more suitable place.

A comment by @ohanhi on GitHub:

From what I can tell, Prettier plugins need to be JavaScript. elm-format is written in Haskell. I don’t know if you can somehow write a middle layer that could make the elm-format binary to work as a Prettier plugin parser, but surely it would not be easy. I’m not saying it’s not a good idea, just that it might not be as straightforward as one might think.

PS The original issue on GitHub has got more references because:

Sorry, new users can only put 2 links in a post.

I feel like they do have similar goals, parsing your code to an AST and outputting a formatted version. It looks like the python version does shell out to python code, and it gets back a JSON version of the AST (https://github.com/prettier/prettier/pull/3349/files#diff-1b6669b375561bc0913be0f6ea082d67R6).

I think it will be difficult to do…

Yeah I also looked through a few upcoming plugins like for python, php etc and noticed that they all generate ASTs with JS. But what if Elm AST always consists of a single Node (ie everything)? The printer can get this as a single string generate the formatted output by simply spawning elm-format binary (it is a part of the npm module, so does not need to be installed globally).

What’s stopping the plugin from that?

As a side note, if someone is interested in getting elm-format to compile to javascript with ghcjs, similar to what Luke did with ellie-app.com for elm-compiler https://www.youtube.com/watch?v=gNWx-zWxUd4, I would be interested in supporting that effort.

4 Likes

I started a repo on github and implemented the simplest possible plugin called prettier-plugin-elm. It just spawns elm-format and gets a formatted string out of it, which is then converted into a single AST Node of type ElmFormat. Printing means nothing more than returning that string.

I’ll be happy to get help from those who is interested in prettifying Elm code with prettier. What I’m looking forward to do myself is to format ```elm blocks inside markdown files. It’d be great to get this working with prettier and prettier-plugin-elm!

I seem to recall Luke and Evan discussing that this approach would be unlikely to work anymore with 0.19 because of some of the performance optimizations in the 0.19 compiler.

I would double check with Luke before starting work on that!

OK, my prettier-plugin-elm seems to be more or less ready. Feel free to try it and don’t hesitate to leave your feedback!

6 Likes