VSCode で Elm の開発環境を準備する

VSCode を使って Elm を開発する環境を用意します。

Elm をインストール

fika:zenn shuma$ npm install -g elm

プラグインをインストール

Elm 用の VSCode 拡張機能をインストールします。

「Elm」という拡張機能があるので、こちらをインストールします。（頭が小文字の別パッケージがあるので要注意）次に、elm-format と elm-test をインストールします。

fika:zenn shuma$ npm install -g elm-test elm-format

プロジェクト作成

fika:zenn shuma$ elm init
fika:elm shuma$ ls
elm.json	src

"Hello, World" と出力するだけのプログラムを作成します。

import Html exposing (text)

main = text "Hello, world"

適切に VSCode のプラグインが読み込まれていれば、エディター上で色がついているはずです。

コンパイルして表示

コマンドを使用して Elm ファイルをコンパイルする。

fika:elm shuma$ elm make test.elm 
Starting downloads...

  ● elm/virtual-dom 1.0.3

Dependencies ready!         
Success! Compiled 1 module.

    Main ───> index.html

これで、index.html というファイルが作成されます。これを適当なブラウザで表示してみてください。