Elm Tooling: Text Editors

I’d like to open a discussion of what additional features text editors might offer in the way of support for Elm developers. My only suggestion for the moment has to do with large files, with which I have made my peace. The project I am working with illustrates this. There are 14 files, 4400 loc in all, with Main.elm at 2600, and a good bit of code off-loaded in libraries I’ve written for apps of this kind. It all looks pretty normal except or Main. I’ve found the key to keeping sane is to post section headers as guideposts along the way, e.g. – MODEL, – MSG, --DOCUMENT HELPERS, etc. This way it is easy to find things. If one keeps like things together and set off by section headings, just like in normal well-structured document, the size of the file is not a problem. I recently collected the guideposts/section headings in a table of contents neear the beginning of the file. This also helps.

But it strikes me that things could be much better with proper editor support. Here is short list of possbilities

  1. The editor automatically generates the table of contents (TOC)
  2. The entries in the act as live links to the topis in the body of the code.
  3. Topic headings could be written in Markdownish form, say, – # MODEL, – ## Some doc utlities,
    etc. to give more structure, both in the body and the TOC.
  4. Sections of the code can be expanded/collapsed, so as to make navigation and getting an overview still easier.

Perhaps this sort of thing could be done with a plug-in.

What other editor features would be useful?

File                                            blank        comment           code
src/Main.elm                                      846            109           2646
src/Request.elm                                   239             69            527
src/Document.elm                                   94             25            282
src/Utility.elm                                    99              7            256
src/Style.elm                                      70              4            156
src/TocZ.elm                                       54             23            147
src/TocManager.elm                                 47             26            135
src/Toc.elm                                       102            165            127
src/Codec.elm                                      19              1             44
src/CustomScalarCodecs.elm                         14              1             38
src/User.elm                                        9              0             35
src/CustomElement/CodeEditor.elm                   22             29             23
src/Data.elm                                       37             44             21
src/Preprocessor.elm                                6              0             15
SUM:                                             1658            503           4452
1 Like

Hi. I fell in love with Emacs. Because I work from iPad I’m limited to terminal code editors. My colleague recently told me that it would be nice to have opportunity to fold Elm code at global -- comments. It appears that Emacs supports it out of the box with 1 line of configuration. That’s called outline mode. And it has support to fold/unfold blocks of code, jump between headings and much more.

Personally I use different way of navigating file. I use go to definition at a point (Emacs way to call cursor) or jump to definition by name. Because most of the time I know where I want to go.


BTW my Emacs config is available online.


I wondered about these two particular points:

What are your thoughts about this implementation of navigating sections? It supports navigation using the keyboard and also clicking on the section headers to jump there. I think a video explains it better than I could with words:

As you can see in the video, I used the trick to model the section headings as Elm type declarations. This makes standard tooling pick them up and include it in the TOC for the types and functions in the Elm code file. By giving the section types a distinctive name, we make it easy to filter this TOC down to just the section headings.


For the same two points (1 and 2), in Atom there is elm-navigator which kind of does that. Maybe worth looking at or getting some inspiration from?
(I have used it but then uninstalled it because I rarely used it. A TOC is just not how I navigate through my code.)

1 Like

I use Visual Studio Code, remoting into WSL. The elm plugin is pretty good.
A small change would be opening the file currently being worked on using Elm Reactor.
A larger change would be updating the syntax highlighting as the file is being edited–not just when it gets saved.
I’ve found that “Go to/Peek Definition” doesn’t work at all–no symbols found–whether in the same file or in another package. Could be a quirk of my environment, or it could be a bug.

I think that code folding would make a ToC feature redundant.
Supporting markdown in the comments is an interesting idea.

1 Like

Go to Definition and Peek Definition work here:

  • Using the sbrink.elm extension: Across files but not into packages.
  • Using the elmtooling.elm-ls-vscode extension: Also works for definitions coming from packages (Also non-core packages).

Look at my occur function:

1 Like

Idris has some good editor features that I haven’t come across in other languages. It supports a command which can expand a symbol into cases - for instance if you have a case myMaybe it can generate the Just and Nothing clauses for you. Pretty nice for a big case statement in your update function, when you’ve added some new message types.

I believe the elm plugin for Intellij can do that, including expanding ones for custom types.

1 Like

The JetBrains IDEs (aka Intellij/WebStorm etc.) calls this Structure View. It’s a common interface that any language plugin can write an implementation for. It supports nesting/collapsing too, although the Elm plugin currently only provides a flat view.

There’s also Go To Definition and Find Usages, which works across packages too.

Here’s a few other great features:

1 Like

@Herteby How do you bring up the popups with type information and docs shown in the second to last gif?

1 Like

You can get it on hover and during autocomplete with these settings:

There’s also a keybinding but I don’t know it :sweat_smile:


Thank you so much! :heart: I’ve missed this feature so much when working in IntelliJ!

1 Like

On Windows, the key binding is Alt + Enter, and yes, it’s super important :smiley:

Would be great to have structure view in Intellij for Elm. I’m using it for most of my work now. The refactor (rename) tool is especially useful.

@jxxcarlson Intellij-elm does have structure view, it just doesn’t have nesting.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.