ESLintで特定のソースコードのチェックを無効にする

ESLintはJavaScriptの構文をチェックしてくれるツールです。
本エントリーでは、プラグイン利用時に発生したESLintのエラーを例を元に、特定のソースコードのチェックを無効にする方法を紹介します。

ESLintのno-unused-varsについて

JavaScriptの構文チェックツールとしてESLintを用いた場合、no-unused-varsのルールによって、宣言はしているが利用していない不要な変数に対して警告してくれます。

例えば、以下のようなレスポンシブ対応のスワイプを実現してくれるSwiper.jsプラグインを使用した場合にもエラーが出力されます。

// Swiperインスタンスの生成
var swiper = new Swiper('.swiper-container', {
  autoplay: 5000,
  autoplayDisableOnInteraction: false,
  loop: true,
  pagination: '.swiper-pagination',
  paginationClickable: true,
  spaceBetween: 30,
  speed: 500,
  effect: 'fade'
});

上記の場合は、次のようなエラーを出力します。

message: ''swiper' is assigned a value but never used. (no-unused-vars)'

この例では、Swiperコンストラクタを用いてインスタンスを生成していますが、var swiperはこれ以外の箇所で使用されることはありません。
そのため、ESLintのno-unused-varsのルールに反し、エラーが出力されます。

特定の行のみESLintを無効にする

この場合の解決方法として、任意の行数に対してESLintのチェックを除外する方法があります。

var swiper = new Swiper('.swiper-container', { // eslint-disable-line
  autoplay: 5000,
  autoplayDisableOnInteraction: false,
  …
});

上記のように、

// eslint-disable-line

を記述することで、ESLintのチェックを無効にすることができます。

特定のルールのみを無効にする場合には、eslint-disable-lineの後に続けて特定のルールを記述することで、特定のルールのみを無効にすることができます。

// eslint-disable-line no-unused-vars

つまり、先ほどの例は次のように書き直すことができます。

var swiper = new Swiper('.swiper-container', { // eslint-disable-line no-unused-vars
  autoplay: 5000,
  autoplayDisableOnInteraction: false,
  …
});

複数行にかけてESLintを無効にする

例えば、複数行をまたいでESLintのチェックを無効にしたい場合は、次のように記述します。

/* eslint-disable */

var swiper = new Swiper('.swiper-container', {
  autoplay: 5000,
  autoplayDisableOnInteraction: false,
  loop: true,
  pagination: '.swiper-pagination',
  paginationClickable: true,
  spaceBetween: 30,
  speed: 500,
  effect: 'fade'
});

/* eslint-enable */

上記の例では、

/* eslint-disable */

以降から

/* eslint-enable */

までのソースコードに対して、ESLintのルールを無効にします。

また、特定のルールを無効にする場合は、先ほどと同様に、eslint-disableの後に無効にしたいルールを記述します。

/* eslint-disable no-unused-vars */

var swiper = new Swiper('.swiper-container', {
  autoplay: 5000,
  autoplayDisableOnInteraction: false,
  …
});

/* eslint-enable no-unused-vars */

まとめ

上記の例では、プラグイン利用時にインスタンスを生成する時のみ必要な変数に対して、eslint-disable-lineを用いて、ESLintのno-unused-varsのルールから除外することで、構文エラーを出力させないように書き換えました。

必要に応じて、

// eslint-disable-line

もしくは、

/* eslint-disable */

を利用することで、プラグイン利用時の避けられない構文エラーなどを回避する助けになるのではないかと思います。