Laravelにstylelint導入

前提

• Laravelのプロジェクトにstylelintを導入する
• プロジェクトのCSSはSCSSで書かれている
  → LaravelにSCSSを導入する方法はこちらの記事を参考にしてください。
  
  LaravelにSCSSを導入する方法

stylelintでできること

コードの一貫性を保ち、エラーを減らすことが可能になる

---

構文エラーチェックの例だと

.sample {
  background-color: #fffffff;
  disply: block;
}

無効な16進数のカラーコードとdisplayのスペルミスがあります。stylelintのcolor-no-invalid-hexルールとproperty-no-unknownルールでエラーを発見することができます。

その他にもスタイルの重複を避けることができたり、書き方を統一できたり、stylelintを導入すると様々なメリットがあります。

stylelintのルールについて

stylelintの導入

一番簡単な方法は、プロジェクトのルートディレクトリに.stylelintrcファイルを作ることです。
作成した.stylelintrcにルールを設定していきます。

例)

{
  "rules": {
    "color-named": "never",
    "declaration-no-important": true,
    "function-url-quotes": "never",
    "number-leading-zero": "never",
    "property-no-vendor-prefix": true,
    "selector-max-type": 0,
    "selector-no-qualifying-type": true,
    "string-quotes": "single"
  }
}

git commit時にstylelintのルールを適用する

ルートディレクトリのpackage.jsonにコードを追加していく。

package.json

{
  "scripts": {
    "stylelint": "node ./node_modules/stylelint/bin/stylelint.js  resources/assets/sass/*.scss",
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "resources/assets/sass/*.scss": [
      "npm run stylelint",
      "git add"
    ]
  }
}

huskyとlint-stagedのパッケージをインストールするのを忘れないでくださいね＾＾

参考記事

チームで美しくメンテナブルなCSSを書くための 「Stylelint」導入のすすめ