Laravelでscssを書くときにstylelintで自動シンタックスチェック

これは何

概要

laravel-mix に stylelint-webpack-plugin を組み込むことで mix でのアセットコンパイル時にSCSSのシンタックスチェックを出来るようにしたい。これによりSCSSの記述方法がチーム内で揃えられることにより保守性を高めたい。
lintを組み込むメリットについては他の記事に任せるとして、この記事ではインストール方法、設定方法について書いていきたいと思います。

私は誰

M&Aクラウドという会社でエンジニアをやっています。入社してまだ２ヶ月ほどです。
もともと専門はインフラでしたが、幅広い分野を触るようになりました。新しく覚えることが多いので四苦八苦しています。　

前提

バージョンとか

# artisan --version
Laravel Framework 5.5.39

以下は package.json の抜粋

        "laravel-mix": "^2.1.14",
        "stylelint": "^9.5.0",
        "stylelint-config-standard": "^18.2.0",
        "stylelint-webpack-plugin": "^0.10.5",

諸々インストール

npm install laravel-mix stylelint stylelint-webpack-plugin　--save-dev

設定

webpack.mix.js 設定

だいたい以下のように書きました。

const mix = require('laravel-mix');

# このブロックが今回のミソです
const styleLintPlugin = require('stylelint-webpack-plugin');
mix.webpackConfig({
  plugins: [
    new styleLintPlugin({
      files: ['**/*.scss'],
      configFile: path.join(__dirname, '.stylelintrc'),
      syntax: 'scss',
    }),
  ],
});

mix.js('resources/assets/js/index.js', 'public/js').
    sass('resources/assets/sass/index.scss', 'public/css').
    version();

webpackConfig を使ってカスタム設定をやっています。
内部の書き方についてはstylelint-webpack-pluginのページを参考にできます。
以下抜粋

const StyleLintPlugin = require('stylelint-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    new StyleLintPlugin(options),
  ],
  // ...
}

.stylelint 設定

ルールはデフォルトでは「無し」で、自分で追加していく形になっています。

例としてcatしたものを貼っておきます。

$ cat .stylelintrc
{
  "extends": "stylelint-config-standard",
  "rules": {
      // 説明のために適当なルールを書いてあるだけです。
      "declaration-block-trailing-semicolon": "always"
  }
}

extends と rules について以下に説明します。

extends で Standardのルールを適用する。

以下のパッケージを入れて、.stylelintファイルで読み込みます。

npm install stylelint-config-standard --save-dev

新規プロジェクトの場合には、最初からスタンダードルールを適用してしまうのが良いと思います。
我々の場合、しばらく開発が進んでからこれを導入しているので、結構lintに怒られる箇所があり、直していくのは骨が折れそうです。

rules で個別のルールを適用する

rulesは個別のルールを書いていくところです。
以下のConfigGeneratorを使うと追加ルールどれにするかというのが簡単に決められそうです。
https://maximgatilin.github.io/stylelint-config/

その他

laravel-mix-styleline という npm パッケージがあるみたいなのだけど

便利そうです。
以下のようにwebpack.mix.jsファイルで設定をすれば動きました

require( 'laravel-mix-stylelint' );

mix.stylelint({
  configFile: path.join(__dirname, '.stylelintrc'),
  files: ['**/*.scss'],
  syntax: 'scss',
});

しかし以下の理由で採用を見送りました

• スター数が少ないので、今後メンテナンスされていくか不透明
• stylelint-webpack-plugin を直接使えば入れる必要があるパッケージは少なくてよく、それで大して記述が増えるわけではない

ハマりどころ

laravel-mix のバージョンが低いことにより mix.extend() メソッドがないよという問題がありました。単に最新版にアップデートすることで解決しました。

fix（自動修正）について

stylelintのCLIで　--fixオプションをつけると多くの簡単なルールは自動修正してくれます。

node_modules/stylelint/bin/stylelint.js  **/*.scss --fix

今後の課題

ESLintには自動で直せるところは直してくれる--fixオプションみたいなのがあったと思います。stylelintで同様のことをうまくできないか調査してみたいと思います。