elm-formatのインストール

Windows10でElmを書く場合で、Visual Code Studioに「Elm-format」をインストールする方法をメモ。

基礎からわかる Elm

(p.22)

elm-formatのインストール

elm-formatは自動でコードを整形するためのツールで、事実上の標準のツールになっています。

elm-format

www.google.com

https://github.com/avh4/elm-format

github.com

Editor integration

Find your editor in the table below. The recommended plugin for each editor is indicated with 🏆 (trophy emoji).

Visual Studio Code installation

1. Install elm-format
2. Install the extension Elm Plugin for Visual Studio Code.
3. Configure the extension to format on save:
   1. Find your settings.json file (instructions).
   2. Add the following key-value pair to your settings.json:

      "[elm]": {
          "editor.formatOnSave": true
      },
      

Visual Studio Code - Elm Tooling

https://marketplace.visualstudio.com/items?itemName=Elmtooling.elm-ls-vscode

marketplace.visualstudio.com

Visual Studio Codeを起動して、画面左列にある「拡張機能」ボタンをクリックする。

プラグインの検索窓で「elm tooling」と入力する。

ずらずらと列挙された候補の中から「Elm」 をクリックする。

（2021年2月現在の最新バージョンは、v2.0.2だった。）

「インストール」ボタンをクリックする。

これで「Elm Tooling」（Visual Studio Code用のelm-format）のインストールが完了。

次は、設定ファイルを編集する。

Visual Studio Codeのsettings.json

https://code.visualstudio.com/docs/getstarted/settings#_settings-file-locations

code.visualstudio.com

Windows10の場合、Visual Studio Codeの設定ファイル（settings.json）は、以下の場所に置かれている。

C:\Users\ユーザー名\AppData\Roaming\Code\User\settings.json

（参考）

qiita.com

qiita.com

Visual Studio Codeからコマンド操作でsettings.jsonを開く場合、

画面上部のメニューバーから、[ファイル] → [ユーザー設定] → [設定] をクリックする。

「設定」画面が開いたら、右上にある「設定（JSON）を開く」ボタンをクリックする。

"[elm]": {
    "editor.formatOnSave": true
},

という内容をコピペして保存する。

Visual Studio Codeを再起動する。

これでelm-formatの設定が完了した？

Visual Studio Codeを起動して、Hello.elmファイルを開いてみたけど、フォーマットのメニューが見当たらなかった。（何か設定方法が間違えているのかも？）

原因調査が面倒くさいので、また今後調べてみようｗ

（終わり）