Elm を書く環境を整える
こんにちは。齋藤です。
この記事は Elm アドベントカレンダー 11日目の記事です。
この記事では 以前書いた記事 をベースに Elm の環境をセットアップに関して整理してみます。
今回書く内容は以下の内容です。
- elm のセットアップ
- elm のインストール
- vscode-elm のインストールと設定
- elm-test のセットアップ
- いくつか書いてみる
- vscode-elm と elm-testのフォルダ構成で詰まった話
- elm-format によるフォーマット
- elm-analyse によるLint
- なぜかLintされない話
elm のセットアップ
まずは elmを使う為には npm が必要です。 npm のセットアップをしたあと、elm を インストールしていきます。
npm init -y npm install elm -D
ライブラリをインストールしてみましょう。
npx elm package install elm-lang/html -y
すると 以下のような、elm-package.json が 生成されると思います。
{
"version": "1.0.0",
"summary": "helpful summary of your project, less than 80 characters",
"repository": "https://github.com/wreulicke/elm-sandbox.git",
"license": "MIT",
"source-directories": [
"."
],
"exposed-modules": [],
"dependencies": {
"elm-lang/core": "5.1.1 <= v < 6.0.0",
"elm-lang/html": "2.0.0 <= v < 3.0.0"
},
"elm-version": "0.18.0 <= v < 0.19.0"
}
vscode-elm のインストールと設定
VSCodeのワークスペース設定に以下の内容を書き込みます。 絶対パスで記述している理由は後ほど記述します。
{
"elm.makeCommand": "/Users/John.Doe/repo/elm-sandbox/node_modules/.bin/elm-make"
}
elm-test のセットアップ
まずは elm-testをインストールします。
npm install elm-test -D
次のコマンドでリポジトリでのテスト環境をセットアップ可能です。
npx elm-test init
以下のようなツリー構成になります。
├── Main.elm
├── elm-package.json
├── package-lock.json
├── package.json
└── tests
├── Example.elm
└── elm-package.json
いくつか書いてみる
以下のような形でテストがかけます。 fuzz を使ったテストは [Elm] Fuzzer でテストデータを量産しよう を見るといいでしょう。 テストデータを自動で生成することができます。
module Example exposing (..)
import Expect exposing (Expectation)
import Fuzz exposing (Fuzzer, int, list, string)
import Test exposing (..)
suite : Test
suite =
describe "first test"
[ todo "test todo"
, test "my first case" <|
\_ -> Expect.equal 2 2
, fuzz string "test" <|
\str ->
case str of
"" ->
Expect.pass
" " ->
Expect.pass
_ ->
Expect.fail "sss"
]
vscode-elm と elm-testのフォルダ構成 で詰まった話
以前の記事でも書いたのですが、
開いているファイルから見て一番近い親にある elm-package.json をベースにelmの実行ファイルを検索するため、
以下の形で設定を記述していると動きません。
{
"elm.makeCommand": "./node_modules/.bin/elm-make"
}
そのため、elm-test で作ったサブディレクトリのファイルではコンパイラが見つからず エディタの連携が動きません。
解決方法としては現状以下の2つです。
- PATHにelmを入れる
- ワークスペースにあるファイルを絶対パスで指定
将来的に elm 本体に test ライブラリが取り込まれ この問題は解決されるかもしれません。
elm-format の設定
elmにはelm-formatというフォーマッタがあります。 インストールして設定してみましょう。
npm i elm-format -D
VSCodeのワークスペース設定に以下の記述を追加すると良いです。
{
"elm.formatCommand": "/Users/saito.masaya/repo/elm-sandbox/node_modules/.bin/elm-format",
"elm.formatOnSave": true
}
次のコマンドでもフォーマットが可能です。
npx elm-format . --yes
elm-analyse のセットアップ
elmにはelm-analyseというLinterがあります。 インストールして設定してみましょう。
npm i elm-analyse -D
VSCodeのワークスペース設定に以下の記述を追加すると良いです。
{
"elm.analyseCommand": "/Users/saito.masaya/repo/elm-sandbox/node_modules/.bin/elm-analyse",
"elm.analyseEnabled": true
}
チェックしてくれる項目に関しては 同じアドベントカレンダーに記事があるので そちらを参照すると良いでしょう。
なぜかLintされない話
自分の環境ではなぜかLintされないケースがありました。
原因としては、ファイル名の先頭が小文字だったことです。 解決方法としてはファイル名の先頭を大文字にしましょう。 モジュール名と合わせるのが正解なのかな。
ちなみに、elm-formatでフォーマットしているはずのファイルで
elm-analyseから Unformatted file と怒られるのは
どうしてでしょうか・・・。
まとめ
今回は elmの環境のセットアップについて記事にしました。 いかがだったでしょうか。
個人的に詰まった内容を書いてみました。
明日は aiya000 さんによる 「How to make type classes without implicit caller in Elm」だそうです。 型クラスの話でしょうか？
