これは何
概要
laravel-mix に stylelint-webpack-plugin を組み込むことで mix でのアセットコンパイル時にSCSSのシンタックスチェックを出来るようにしたい。これによりSCSSの記述方法がチーム内で揃えられることにより保守性を高めたい。
lintを組み込むメリットについては他の記事に任せるとして、この記事ではインストール方法、設定方法について書いていきたいと思います。
私は誰
M&Aクラウドという会社でエンジニアをやっています。入社してまだ2ヶ月ほどです。
もともと専門はインフラでしたが、幅広い分野を触るようになりました。新しく覚えることが多いので四苦八苦しています。
前提
バージョンとか
# 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で同様のことをうまくできないか調査してみたいと思います。