Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。

IE9でも動くようにES6のシンタックスを使用していないことをeslintでチェックする

参考にさせて頂いたページ

はじめに

業務でIE9に対応したJSを書くことになりました。
babelは導入されていないのですが、つい癖でうっかりES6のシンタックスで書いてしまいます。
それがそのままマージされてしまうとIE9で動かなくなるので、せめてマージされないようにeslintでエラーを出してもらおうと思います。

ES6のシンタックスを使用していないことをチェックする

eslintをグローバルにインストールする

npm install -g eslint

.eslintrc.jsonを作成する

以下の通り書きました。

{
  "env": {
    "es6": false,
    "browser": true
  }
}

以下は引用ですが、公式ページによると最近は拡張子を付けた方が良いらしい。

Deprecated - use .eslintrc, which can be either JSON or YAML.

ES6シンタックスを使っていないファイルにeslintを実行してみる

ES6を使わない記述で以下の通りファイルを作成します。

var hoge = {
  example: function() {
    console.log('example');
  }
}

構文チェックを実行します。

eslint sample.js

エラーは出ませんでした。

ES6シンタックスを使っているファイルにeslintを実行してみる

ES6を使った記述で以下の通りファイルを作成します。

const hoge = {
  example() {
    console.log('example');
  }
}

構文チェックを実行します。

eslint sample_es_6.js

以下のようにエラーが出ました。

  2:1  error  Parsing error: The keyword 'const' is reserved

✖ 1 problem (1 error, 0 warnings)

constをvarに書き換えて再度実行してみます。

以下のように3行目がエラーになりました。 意図通りの挙動です。

  3:10  error  Parsing error: Unexpected token (

✖ 1 problem (1 error, 0 warnings)

任意のディレクトリ内の複数のJSファイルの構文をチェックする

例えばjavascriptsというディレクトリにJSファイルを複数入れて、以下のコマンドを実行します。

eslint javascripts/**.js

.eslintrc.jsonを任意のファイル名にしたい

例えば以下のようにファイル名を指定して実行できます。

eslint -c .eslintrc_for_ie_9.json javascripts/**.js

おわりに

これであとはCircleCIで実行するだけかしら。

なんだか本当にこれでいいのか心配だけど。