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 DiagnosticDiagnostics: Go To Previous DiagnosticDiagnostics: Toggle TableLinter Ui Default: NextLinter Ui Default: PreviousLinter Ui Default: Toggle Active EditorLinter: Next ErrorLinter: Previous ErrorLinter: ToggleIf 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 PathsSets 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 PathSets 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 FileThis 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.
⚡Insert program
Type "html", "Html.program", "platform", or "Platform.program" in an empty editor to insert skeleton code.
Insert moduleInsert let/inInsert if/then/else
Insert case/of
Insert default arguments
Replace type with default
Define from type annotation
⚡Auto import
See Global Autocomplete.
⚡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 UsageMoves the cursor to the position of the next usage.
Elmjutsu: Go To Previous UsageMoves the cursor to the position of the previous usage.
Elmjutsu: Go BackThe current cursor position is added to a navigation stack before jumping via:
Go To DefinitionGo To SymbolGo To Next UsageGo To Previous UsageInvoke this command to jump back to the previous position.
Elmjutsu: Hide Usages PanelCloses 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 SidekickShows 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 = 300
Sidekick Position = "bottom", Show Types in Sidekick is checked, Show Doc Comments in Sidekick and Show Source Paths in Sidekick are unchecked.
Elmjutsu: Infer TypeElm 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) 😢 This will be fixed in the future.
Elmjutsu: Add ImportQuickly 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 AsAdds an alias to the added import (see Add Import).
Elmjutsu: Install PackageQuickly 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 PackageRemoves 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:
<span src="http://localhost:3000/build?path=~/Desktop/project/Main.js"></span>
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 SymbolRenames 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.