Laravelでstylelintを導入する

eslintはEcmaScript(JavaScript)のLintツールですが、stylelintとはCSSのLintツールです(もちろんSCSSもOKです)。好奇心でけっこう前に導入してみました。思いの外いろいろ教えてくれて良い感じです。

stylelintとは

公式サイトは下記になります。

stylelint

stylelintはeslintにすごく似てます。eslintはeslintrcというJSONファイルで設定しますが、stylelintはstylelintrcというJSONファイルを利用します。

stylelint-config-standardという標準ルール的なものもあります。

stylelint-config-standard

stylelintを実行するとこんな感じで悪そうなところを教えてくれます。
下記だと、不要な無視されるプロパティを教えてくれて意外とちゃんと教えてくれるんだなーと思いました。インデントとかスペースの有無などももちろん教えてくれます。

resources/assets/sass/front/_form.scss
205:4   ⚠  Unexpected property "top" that is ignored because of "position: static" (declaration-block-no-ignored-properties) [stylelint]
342:3   ⚠  Unexpected property "float" that is ignored because of "display: inline-block" (declaration-block-no-ignored-properties) [stylelint]

Laravelで導入するには

Laravel Elixirが前提です。laravel-elixir-stylelintという素晴らしいNPMがあります。

laravel-elixir-stylelint

ぼくの場合設定は下記のようになりました。

const elixir = require('laravel-elixir');
const scss = require('postcss-scss');

require('laravel-elixir-stylelint');

elixir(function(mix) {
  mix.stylelint([
    './resources/assets/sass/**/*.scss'
  ], {syntax: scss});
});

package.jsonはこんな感じです。

{
  "private": true,
  "dependencies": {
    "gulp": "^3.9.1",
    "laravel-elixir": "^5.0.0",
    "laravel-elixir-stylelint": "^3.5.0",
    "stylelint": "^6.5.1",
    "stylelint-config-standard": "^8.0.0",
  }
}

stylelintrcの設定例です。

{
  "extends": "stylelint-config-standard",
  "rules": {
    "block-no-empty": null,
    "color-no-invalid-hex": true,
    "indentation": ["tab", {
      "except": ["value"]
    }],
    "max-empty-lines": 3,
    "unit-whitelist": ["px", "em", "rem", "%", "s", "deg"],
    "at-rule-empty-line-before": null,
    "color-hex-case": null,
    "selector-list-comma-newline-after": null,
    "number-zero-length-no-unit": null,
    "selector-pseudo-element-colon-notation": null,
    "color-hex-length": null,
    "no-missing-eof-newline": null,
    "shorthand-property-no-redundant-values": null,
    "media-feature-no-missing-punctuation": null,
    "declaration-colon-space-after": null,
    "block-opening-brace-space-before": null
  }
}

gitignore的なstylelintignoreという設定も可能です。

./**/_hoge.scss