Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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 */

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

blajir
都内で働くフロントエンドエンジニアです。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした