eslintでflowの検証結果も表示させる

そんなにプログラミングするわけではないが、
javascriptは本当に色々変更が激しいなと最近感じてる。
今回は、eslintとflowを使って静的検証が行える環境構築手順を残そう。
eslintを実行させると、flowのチェックと結果を取得できるようにする

目次

  1. eslintを使ってみる
  2. flowを使ってみる
  3. npm run lintでflowの検証結果も表示
  4. npm run lintでflowのエラー結果も表示
  5. 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までの時間を短くできるようになったのが、背景なのかもなと感じた。 これでバシバシ書いていけるぞ