.eslintrcの設定

2021.03.07

ESLintはJavaScriptの構文をチェックするツール（Linter）の一つで、.eslintrcはESLintの設定ファイルです。以下を記述することでESLint推奨のルール設定が導入できます。

{
	'extends': 'eslint:recommended',
}

適用されているルール設定は以下のサイトで確認できます。適用ルールにはチェックが付いています。
List of available rules - ESLint - Pluggable JavaScript linter

ルール設定の日本語訳は以下のサイトで確認できます。
eslint-recommended.md

次に、このESLint推奨のルール設定をカスタマイズします。'env'に以下を記述することで、指定した環境下で使用される変数をチェック対象から除外します。

{
	'env': {
		'browser': true,
		'jquery': true
	}
}

'browser': trueでwindowやdocument等ブラウザ組み込みのオブジェクトがno-undef（未定義変数への参照エラー）になるのを防ぎます。また、'jquery': trueで「$」がno-undefになるのを防ぎます。

//'env'の設定で「window」と「$」のno-undefエラーを発生させない
$(window).on('load', function() {
  $('.js-pagetop').on('click tap', function() {
    $('body, html').animate({ scrollTop: 0 }, 300, 'swing');
  });
});

次に、'rules'に以下を記述することでルールを変更及び追加します。

{
	'rules': {
		'no-unused-vars': 0,
		'no-extra-semi': 'warn',
		'no-undef': 'warn',
		'quotes': ['warn', 'single'],
		'space-before-blocks': ['warn', { 'functions': 'always' }]
	}
}

なお、ルールに設定した値は以下の動作になります。
0 or 'off'：チェックしない
1 or 'warn'：チェックする（違反するとwarning判定）
2 or 'error'：チェックする（違反するとerror判定）

■ no-unused-vars
no-unused-varsのルールを変更します。宣言されていて使用されていない変数または関数があっても、errorを発生させません。

■ no-extra-semi
no-extra-semiのルールを変更します。不要なセミコロンがある場合、errorをwarningに変更します。if文最後の「}」の後にセミコロンは不要です。

//error
if(pagetop_pos > mv_height){
	$('.js-pagetop').addClass('is-overed');
};
↓
//warning
if(pagetop_pos > mv_height){
	$('.js-pagetop').addClass('is-overed');
};

■ no-undef
no-undefのルールを変更します。未定義変数への参照がある場合、errorをwarningに変更します。

//error
var aaa = bbb + 1;
↓
//warning
var aaa = bbb + 1;

■ quotes
quotesのルールを追加します。ダブルクォーテーションが使用されている場合、warningを発生させます。コードはシングルクォーテーションで統一します。

var = "aaa";
↓
//warning
var = "aaa";

■ space-before-blocks
space-before-blocksのルールを追加します。functionの「{」の直前に半角スペースがない場合、warningを発生させます。

function(){
↓
//warning
function(){

次に、'globals'に以下を記述することで、プラグイン等で使用される独自の変数をチェック対象から除外します。

{
	'globals': {
		'Swiper': true,
		'Stickyfill': true
	}
}

//'globals'の設定で「Swiper」のno-undefエラーを発生させない
$(window).on('load', function() {
  $('.js-slider').each(function() {
    new Swiper($(this), {
      loop: true,
      speed: 700,
      slidesPerView: 1,
    });
  });
});

.eslintrcの全ての設定は以下の通りです。

{
	'parser': 'babel-eslint',
	'extends': 'eslint:recommended',
	'env': {
		'browser': true,
		'jquery': true
	},
	'rules': {
		'no-unused-vars': 0,
		'no-extra-semi': 'warn',
		'no-undef': 'warn',
		'quotes': ['warn', 'single'],
		'space-before-blocks': ['warn', { 'functions': 'always' }]
	},
	'globals': {
		'Swiper': true,
		'Stickyfill': true
	}
}