A bag of tricks for developing with Elm.
https://atom.io/packages/elmjutsu
elm-oracle
or goto
).Error Highlighting
:
linter-ui-default:expand-tooltip
to some key and hold it to expand them.atom-ide-ui
to linter
(and vice versa), you need to reload Atom for now.Go to Definition
:
Autocomplete
:
Datatips
:
Note: Features marked with *
are disabled by default. You may enable them in the Settings view.
Navigation
Information
*
*
Imports Management
Package Management
Refactoring
This package parses your projects' source files to extract information, and downloads documentation of 3rd-party Elm packages. The downloaded documentation files will be saved to the path set in Cache Directory
in the Settings view. If Cache Directory
is blank, a temporary directory will be used. Take note that most operating systems delete temporary directories at bootup or at regular intervals.
Elm Path
is properly configured in the package settings. The default works for most cases.Elm Test Path
setting to use elm-test
to check for compile errors in test files (.elm
files inside the tests
directory). NOTE: This only works with elm-test@beta
(0.19-beta10
) right now.Run elm make
to "never" and use linter-elm-make instead.~/.atom/styles.less
(where ~/.atom
is your Atom directory).Diagnostics: Go To Next Diagnostic
Diagnostics: Go To Previous Diagnostic
Diagnostics: Toggle Table
Linter Ui Default: Next
Linter Ui Default: Previous
Linter Ui Default: Toggle Active Editor
Linter: Next Error
Linter: Previous Error
Linter: Toggle
If enabled, the main file(s) will always be compiled instead of the file being edited. The main files can be set using the Elmjutsu: Set Main Paths
command. If not set, the linter will look for Main.elm
files in the source directories. Take note that if this is enabled, modules unreachable from the main modules will not be linted.
The main paths will be ignored if the project type is "package"
(in elm.json
).
Disabled by default.
Elmjutsu: Set Main Paths
Sets the main paths of the project and saves them to elmjutsu-config.json
.
Example:
{
"mainPaths": ["Todo.elm", "Test.elm"]
}
The main paths are only relevant if Always Compile Main
is enabled. See Always Compile Main.
Elmjutsu: Set Compile Output Path
Sets the output path of the project and saves it to elmjutsu-config.json
. Defaults to "/dev/null" if not set.
Example:
{
"outputPath": "main.js"
}
Report Warnings
is also checked.--debug
flag to elm make
.Compile With Optimizations
.--optimize
flag to elm make
.Compile With Debugger
.Diagnostics: Show Actions At Position
command or click on the appropriate button from the panel. You can uncheck Enable Code Actions
in the Settings view if you do not want to show the buttons.Elmjutsu: Quick Fix File
This provides suggestions for imports, project symbols, and 3rd-party package symbols.
Enable autocomplete
of the language-elm package to prevent duplicate suggestions.*
Enable Global Autocomplete
if you want to include unimported project symbols.
Auto import
completion (which works like Add Import).You can check Enable Autocomplete Fuzzy Filtering
to filter suggestions using fuzz-aldrin-plus.
If the typed text starts with a slash (/
), the rest of the characters will be used as a regular expression to filter the suggestions by name.
If the typed text starts with a colon (:
), the rest of the characters will be used as a regular expression to filter the suggestions by type signature.
If you want to filter by name and type signature, put two underscores (__
) in between. For example, :cons__String
will suggest String.cons
(Char -> String -> String
) and String.uncons
(String -> Maybe.Maybe ( Char, String )
).
Use underscores in lieu of spaces (e.g. to match List a
, type List_a
).
Remember to escape dots, vertical bars, braces (for records), parentheses (for tuples), etc.
*
Enable Autocomplete Snippets
if you prefer.Press tab to go to the next tab stop (similar to how snippets work). Special completions can be disabled individually in the package settings.
:zap:Insert program
Type "html"
, "Html.program"
, "platform"
, or "Platform.program"
in an empty editor to insert skeleton code.
Insert module
Insert let/in
Insert if/then/else
Insert case/of
Insert default arguments
Replace type with default
Define from type annotation
:zap:Auto import
See Global Autocomplete.
:zap:Replace with inferred type
See Type-Aware Autocomplete for a screenshot.
*
Enable Type-Aware Autocomplete
if you want to prioritize suggestions matching the expected type at cursor position.
Infer Type
command, but it's recommended to check Infer Expected Type At Cursor On The Fly
in the package settings instead.Enable Global Autocomplete
is also checked.It's recommended to uncheck Enable autocomplete
of the language-elm package. No need to install elm-oracle
.
If you are experiencing lag while typing, you can set the value of Max Number of Autocomplete Suggestions
to a small number such as 50
so that Atom will have less items to render.
Enabling both Global Autocomplete and Type-Aware Autocomplete will usually result to lag because there will be lots of computations involved. This may be improved in the future.
Elmjutsu: Go To Definition
Enable Hyperclick
to jump to definition using Ctrl
+ click / Cmd
+ click (Mac).Elmjutsu: Go To Symbol
:
(colon) in the text box to also filter by type.Elmjutsu: Find Usages
Elmjutsu: Go To Next Usage
Moves the cursor to the position of the next usage.
Elmjutsu: Go To Previous Usage
Moves the cursor to the position of the previous usage.
Elmjutsu: Go Back
The current cursor position is added to a navigation stack before jumping via:
Go To Definition
Go To Symbol
Go To Next Usage
Go To Previous Usage
Invoke this command to jump back to the previous position.
Elmjutsu: Hide Usages Panel
Closes the Usages
panel (the panel is shown after invoking Find Usages
or Rename Symbol
).
Provides support for Datatips. The atom-ide-ui package should be installed for this to work.
Provides support for Signature Help. The atom-ide-ui package should be installed for this to work.
*
This is disabled by default. To turn it on, check Show Types in Tooltip
in the package settings. You can also change the placement of the tooltip (Types Tooltip Position
).
Elmjutsu: Toggle Sidekick
Shows the type hints and documentation for the symbol at cursor position. The size, position of the panel, and amount of information to show can be modified in the package settings.
Sidekick Position
= "bottom", Sidekick Size
= 0 (Automatically resizes to fit content.)Sidekick Position
= "right", Sidekick Size
= 300Sidekick Position
= "bottom", Show Types in Sidekick
is checked, Show Doc Comments in Sidekick
and Show Source Paths in Sidekick
are unchecked.Elmjutsu: Infer Type
Elm Make Path
is properly configured in the package settings. The default works for most cases.Show Types in Tooltip
is checkedShow Datatips
is checked*
Infer Expected Type At Cursor On The Fly
and Infer Type Of Selection On The Fly
options in the package settings.Infer Type Of Selection On The Fly
currently has bad interactions with some packages that decorate the markers (e.g. Find And Replace
) :cry: This will be fixed in the future.Elmjutsu: Add Import
Quickly adds an import without scrolling to the top of the file. Also sorts the imports, removes duplicates, and removes defaults automatically.
Add Import
and choosing an already imported symbol (like +
, for example).Elmjutsu: Add Import As
Adds an alias to the added import (see Add Import).
Elmjutsu: Install Package
Quickly installs a package.
Elm 0.19 and above
elm install <name>
.Elm Path
is properly configured in the package settings. The default works for most cases.Elm 0.18
elm-package install --yes <name> <version>
(or elm-package install --yes <name>
if the selected version is "Auto").Elm Package Path
is properly configured in the package settings. The default works for most cases.Elmjutsu: Uninstall Package
Removes an installed package.
Elm 0.19 and above
Elm 0.18
elm-package.json
, then runs elm-package install --yes
to clean up.Enable Hot Reloading
should be checked in the Settings view to start a hot reloading server.
You can then add something like the following to your HTML file to watch a specific JS file for changes:
<script src="http://localhost:3000/build?path=~/Desktop/project/Main.js"></script>
Replace ~/Desktop/project/Main.js
with the output file path from elm make
(--output
flag). You can also use the Set Compile Output Path command to set the output file path for your project.
This uses elm-hot to inject hot reloading code into the Elm app. The modified code is then sent to the browser via a web socket connection.
Elmjutsu: Rename Symbol
Renames the symbol across the whole project. Take note that this is not an undoable operation.
Elmjutsu: Surround With Let
Elmjutsu: Lift To Let
Elmjutsu: Lift To Top Level
Here is an example:
'atom-text-editor:not([mini])[data-grammar^="source elm"]':
'f12': 'elmjutsu:go-to-definition'
'ctrl-r': 'elmjutsu:go-to-symbol'
'shift-f12': 'elmjutsu:find-usages'
'f8': 'elmjutsu:go-to-next-usage'
'shift-f8': 'elmjutsu:go-to-previous-usage'
'ctrl-f12': 'elmjutsu:go-back'
'alt-insert': 'elmjutsu:add-import'
'f2': 'elmjutsu:rename-symbol'
'alt-shift-l': 'elmjutsu:surround-with-let'
'alt-l': 'elmjutsu:lift-to-let'
'alt-t': 'elmjutsu:lift-to-top-level'
'alt-i': 'elmjutsu:infer-type'
'f6': 'diagnostics:show-actions-at-position'
'atom-workspace':
'f1': 'elmjutsu:toggle-sidekick'
'ctrl-shift-f12': 'elmjutsu:hide-usages-panel'
'ctrl': 'linter-ui-default:expand-tooltip' # For linter and linter-ui-default users
Add them to your keymap.cson
or bind them from Settings
> Keybindings
.
CHANGELOG.md
before upgrading to a newer version to check for breaking changes.elm.json
or elm-package.json
(Elm 0.18) files in your Elm project directories. This issue will be handled properly in the future.