Elm language support for IntelliJ, WebStorm, PhpStorm and PyCharm (JetBrains)

View the Project on GitHub klazuka/intellij-elm

Elm language plugin for JetBrains IDEs (IntelliJ, WebStorm, PyCharm, etc.)


In More Detail

IntelliJ is a powerful and free IDE built on a unique architecture. Rather than working with source code in its text form, IntelliJ parses the source code into an abstract syntax tree (AST). All functionality and refactorings are built on this AST, allowing for much more sophisticated features than normally possible in a text editor that relies on regex and find/replace.

Here are a few of the advanced features provided by intellij-elm:

UI for elm-test

Run elm-test directly from within IntelliJ. Test results are shown using green and red lights for success and failure respectively. Differences between actual- and expected-output are shown using IntelliJ’s side-by-side comparison view.

Add Import Quick Fix

While you write code, intellij-elm checks that the functions and types that your program uses can be resolved based on what’s in scope. Errors are marked in red. If the error can be resolved by adding an import, intellij-elm will offer a quick fix action. Press Option-Enter (Alt-Enter on Windows) and then select “Import” to generate the appropriate import and add it to the top of your file. No more scrolling to the top and then back down again just to fiddle with imports!

Cleanup Unused Imports

Elm code tends to accumulate imports over time, some of which may no longer be needed. Unused imports are detected by the plugin and shown in gray. The plugin also detects functions exposed in an import but the exposed name is unused. In both cases, the plugin offers a quick-fix to cleanup the imports. Put the cursor on an unused import, then press Option-Enter (Alt-Enter on Windows), and and then select “Optimize imports”.

Rename Refactoring

Reliably rename types, functions, values, record fields, modules and files. Press Shift-F6 to rename the identifier under the cursor. All references will also be renamed, including import statements and exposing lists.

Find Usages

Find all usages of a type, function, value, record field or module. Press Option-F7 (Ctrl-F7 on Windows) while the cursor is on an identifier to find all of its usages.

Detect Unused Code

intellij-elm automatically detects unused functions, parameters, and types. Unused code will be displayed in gray, indicating that it can safely be deleted.

Infer Type of Expression

Show the inferred type of any Elm expression. Press Ctrl-Shift-P to see the type of the expression under the cursor, or expand the selection to include parent expressions.

Type Checking

Type mismatches are detected and shown directly within the editor. For instance, if you try to call a function that expects a String but you give it a Char, an error will be shown on the bad argument. The type checking is performed immediately within the plugin–no need to wait for the Elm compiler to be launched in an external process.

Quick Docs

Press Ctrl-J to display the documentation for a function, type, etc. It even works with doc comments within your own code. (Note: depending on your platform, the keyboard shortcut might be Ctrl-Q or F1)

Structure View

Get a 30,000 ft view of your Elm file’s types, functions and values.

Press Cmd-F12 (Ctrl-F12 on Windows) to popup the quick structure navigator. Use your keyboard to jump between functions and types effortlessly.

Code Folding

By default, a module’s imports are automatically collapsed using code folding. You can also collapse function and type declarations.

Manage the Exposing List

Tired of jumping around to the top of an Elm file to add/remove something from the exposing list? intellij-elm makes it easy by providing an intention action directly on the function/type declaration. Just put the cursor on the name of the function/type, press Option-enter, and then select “Add to exposing list” (or, if it’s already exposed, “Remove from exposing list”).

A special icon will be displayed next to exposed functions/types in the gutter next to the line number. Click the icon to jump to where it’s exposed.

Type-annotation-driven Development

When writing new code, it’s often helpful to write the type annotations first. Once you’ve written a type annotation, press Option-Enter (Alt-Enter on Windows) and select “Create” from the quick fix menu. A function declaration will be generated for you based on your type annotation.

WebGL / GLSL Support

Does your project use WebGL/GLSL? If you install the GLSL language plugin, all of its features will be available in GLSL code blocks in your Elm files. This includes syntax highlighting, code completion and rename support.


You can install the plugin from within the JetBrains IDE by going to Settings -> Plugins and then searching for “Elm”. Then click the Search in repositories link.

If, however, you need to install a specific version of the plugin, you can get it from the releases page.