毎日更新

109日目 個人開発記 16 -stylelint入れてみた-

おはようございます。

今日は、久々に個人開発記「Stylelint入れてみた」です。

jsに関してはESLintを入れていたので、.tsxと.tsのファイルは編集中にリアルタイムでエラーを出してくれるし保存するたびに自動で整形してくれてます。

「同じことをSCSSでもやりたいなー」と思ったので、Styelintを入れることにしました。

Laravelのプロジェクトだと、『Laravel-mix』というツールがデフォルトで装備されていて、モジュールのコンパイルやバンドルを行います。
中身はwebpackで、webpackの設定をより分かりやすく簡単に書けるよう設定ファイルをラップしてくれているものになります。

「webpack x stylelint」ならいっぱい記事出てくるんですが、「Laravel-mix x stylelint」だと記事が見当たらず、最終的には『laravel-mix-stylelint』というnpmパッケージの公式リファレンス(laravel-mix-stylelint - npm)を頼りに実装するに至りました。webpackの中身をあまり理解できていないので、当然laravel-mixについてはもっと理解できていません。どこかで時間とってwebpackについてもキャッチアップしなければ。

参考までに、実装したコードを載せておきます。

まずは、必要なパッケージをインストール

$ npm i -D laravel-mix-stylelint stylelint stylelint-config-prettier stylelint-config-recommended stylelint-config-recommended-scss stylelint-prettier stylelint-scss stylelint-webpack-plugin


package.jsonnにモジュールが追加されます。

"devDependencies": {
// 中略
+  "laravel-mix-stylelint": "^0.2.0",

+  "stylelint": "^13.8.0",
+  "stylelint-config-prettier": "^8.0.2",
+  "stylelint-config-recommended": "^3.0.0",
+  "stylelint-config-recommended-scss": "^4.2.0",
+  "stylelint-prettier": "^1.1.2",
+  "stylelint-scss": "^3.18.0",
+  "stylelint-webpack-plugin": "^2.1.1",
// 中略
}

Laravel-mixの設定を追加

+  require('laravel-mix-stylelint');


  mix.ts("resources/js/app.tsx", "public/js")
    .sass("resources/sass/app.scss", "public/css")
+   .stylelint({ files: ['*/.scss'] })

stylelint({ files: ['*/.scss'] })

でファイルをscssに限定しているのは、デフォルトだと.scss, .vue, .bladeの3種類が指定されていて、今回は.bladeでcssを使っていなくてコンパイル時にエラーが出てしまったので、「.scssファイルだけでいいですよ」ってのを明示しています。

デフォルトの設定↓↓↓

とりえず、最小限の設定だけ。もっと細かく設定を指定したい場合は、ここを充実させていく。がんばってください。

module.exports = {
  "extends": [
  "stylelint-config-recommended-scss",
  "stylelint-prettier/recommended"
 ]
}

あとは、VSCode側でstylelintのプラグインを入れて、

VSCodeの設定ファイル(setting.json)を開く。「⌘ + shift + P」でこんなのが開くので

「setting」と入力する。

「基本設定:設定(JSON)を開く」を選択するとVSCodeの設定ファイル(setting.json)が開くので、設定を追加します

+  "stylelint.config": {
+    "stylelint.enable": true
+  },

なんか、npmのモジュールで動いてんのかVSCodeのプラグインで動いてるのかよくわからない。これでいいのかな。

とりあえず、「Laravel-mix x stylelint x VSCode」という環境であれば、上記ソースで動くはず。

おわり。

  • この記事を書いた人

きわっち

元食品メーカー製造マンが未経験からwebエンジニアになりました。 エンジニアとして0から成長していく過程を発信していきたいと思っています。