ソース内で各linterの設定をスイッチする

5106 ワード
Linter lint lint テキストリンク

sass-lint

sass-lintの場合、ソース内からルールを変更することはできず、ルールの拒否か復活かしかできない。

また各ルール内のオプションだけをスイッチすることもできない。

全てのルールを拒否

// sass-lint:disable-all

sass-lint:disable-allはスペースを挟まずに記述しないと作動しない。

拒否されたルールを途中から復活させたい場合、

// sass-lint:enable-all

と記述する。

単数ないし複数のルールを拒否

// sass-lint:disable class-name-format
// sass-lint:disable class-name-format, variable-name-format, nesting-depth

sass-lint:disableはスペースを挟まずに記述しないと作動しない。

ルール名はカンマ,区切りで複数記述できる。

また、ソース頭に書かずに途中で書くとその場所から拒否する。

拒否されたルールを復活させるには

// sass-lint:enable class-name-format, variable-name-format, nesting-depth

のようにsass-lint:enableを使う。

ブロック内のルールを拒否

body {
  section {
    // sass-lint:disable-block no-color-literals
    color: #F0F0F0;
  }
}

sass-lint:disable-blockはスペースを挟まずに記述しないと作動しない。

ブロック内で拒否したルールをさらに復活させることはできない

１行のみルールを拒否

body {
  section {
    color: #F0F0F0; // sass-lint:disable-line no-color-literals
  }
}

stylint

ルールごとの変更や拒否はできず、ルール全ての拒否か復活のみができる

全てのルールを拒否

// @stylint off
.button_block .btn-default {
  background-color: green;
  color: white;
}
// @stylint on

@stylint offで全ルール拒否、@stylint onでルールを復活できる。

１行のみルールを拒否

:root
  font-size 14px // @stylint ignore

この方法はsortOrderなどの複数行に渡るエラー検査は拒否できない。

eslint

eslintの場合、ルール内オプションを含め、ほぼ全てのルールをソース内で変更できる。

全てのルールを拒否

/* eslint-disable */

拒否されたルールを途中から復活させたい場合、

/* eslint-enable */

と記述する。

単数ないし複数のルールを変更

/* eslint no-var: 0 */

/* eslint no-var: 0, no-unused-vars: 2 */

/*
  eslint
    no-var: 0,
    no-unused-vars: 2,
    indent: [2, 2, { SwitchCase: 1 }]
*/

/*
  eslint {
    "no-var": 0,
    "no-unused-vars": 2,
    "indent": [2, 2, { "SwitchCase": 1 }]
  }
*/

上記全てのルールが正常に処理される。

0ないし"off"でルール拒否、1ないし"warn"で警告処理、2ないし"error"でエラー処理となる。

１行のみルール拒否

alert('foo'); // eslint-disable-line no-alert

// eslint-disable-next-line no-alert
alert('foo');

ブロック単位のルール変更などはできない。