eslintでflowの検証結果も表示させる
そんなにプログラミングするわけではないが、
javascriptは本当に色々変更が激しいなと最近感じてる。
今回は、eslintとflowを使って静的検証が行える環境構築手順を残そう。
eslintを実行させると、flowのチェックと結果を取得できるようにする
目次
- eslintを使ってみる
- flowを使ってみる
- npm run lintでflowの検証結果も表示
- npm run lintでflowのエラー結果も表示
- flow-remove-typesで実行用ファイルを作成する
1. eslintを使ってみる
npm install --save-dev eslint // .eslintrcを作成 ./node_modules/.bin/eslint --init
あとはコマンドライン上の質問に答えると、.eslintrc.jsonなどの設定ファイルができる
npm run lintでeslintが起動できるようにpackage.jsonの修正
package.json scripts : { lint: "eslint ./src" }
ディレクトリ、ファイルを作成する
mkdir src touch eslinttest.js
eslinttest.js function sum(x,y) { return x+y; } let result = sum(1,1);
これでnpm run lintと入力すると検証結果が表示される
3:11 error Infix operators must be spaced space-infix-ops 7:5 error 'result' is assigned a value but never used no-unused-vars 7:5 error 'result' is never reassigned. Use 'const' instead prefer-const 7:27 error A space is required after ',' comma-spacing 7:31 error Newline required at end of file but not found eol-last
2. flowを使ってみる
// npmで追加 npm install --save-dev flow-bin // .flowconfigを作成する ./node_modules/.bin/flow --init
npm run flowでflowが起動できるようにpackage.jsonの修正
package.json ... scripts :{ flow : "flow" } ...
touch ./src/flowtest.js
flowtest.js //@flow function sum(x: number, y: number): number { return x+y; } // あえて間違える let result: string = sum(1,1);
npm run flowでflowの検証結果が表示される
Error ---------------------------------------------------------- Cannot assign `sum(...)` to `result` because number [1] is incompatible with string [2]. src/flowtest.js:7:24 7| const result: string = sum(1, 1); ^^^^^^^^^ References: src/flowtest.js:2:37 2| function sum(x: number, y: number): number { ^^^^^^ [1] src/flowtest.js:7:15 7| const result: string = sum(1, 1); ^^^^^^ [2]
3. npm run lintでflowの検証結果も表示
flowの記述が残されたままだと、eslintは失敗する
なので、いくつか前準備が必要になる。
npm install --save-dev babel-eslint eslint-plugin-flowtype
.eslintrc.jsonも修正し、eslint-plugin-flowtypeのconfigurationをコピペ。
これでnpm run lintを実行すると、eslint単体のときと同様のエラーが表示される。
4. npm run lintでflowのエラー結果も表示
しかし、表示されるのはeslintの結果だけで、flowのエラーはこのままでは表示されない。
なので、もう一つplugin追加が必要となる。
npm install --save-dev eslint-plugin-flowtype-errors
.eslintrc.json ... "plugins": [ "flowtype", // 追加 "flowtype-errors" ], rules: { // 追加 "flowtype-errors/show-errors": 2, "flowtype-errors/show-warnings": 1 } ...
あとはnpm run lint!
これでeslintのエラーに加えてflowのエラー内容も表示される.
5. flow-remove-typesで実行用のファイルを作成
npm installl --save-dev flow-remove-types
npm run buildで起動できるようにpackage.jsonの修正
package.json scripts: { "build": "flow-remove-types src -d lib --pretyy" }
npm run buildを実行すると、flowの型情報を削除したファイルがlibに出来る。
最後に
jsはインタプリタ言語なのに静的検証やら型検査が普通になってきているのようだ。これもCIなどでbuildまでの時間を短くできるようになったのが、背景なのかもなと感じた。 これでバシバシ書いていけるぞ