手間ゼロでコード統一！scssにStylelintを入れて快適整形

2025.07.15 09:00

2025.07.15 08:31

Sass（SCSS）を書いていると、気づけば書き方がバラバラになってしまうこと、ありませんか？
自分も「ネストしすぎたな…」「プロパティの順番、なんか気持ち悪い」と感じながらそのまま進めてしまうことがよくありました。そこで今回は、Stylelintを導入して、SCSSをキレイに整える方法を自分用の備忘録としてまとめてみました。

まずは必要ライブラリをインストール

npm install --save-dev stylelint stylelint-scss stylelint-order chokidar

次にstylelint.config.cjs というやつをpackage.jsonと同じ場所に作成。

module.exports = {
  extends: [
    "stylelint-config-standard-scss",
    "stylelint-config-prettier"
  ],
  plugins: ["stylelint-order"],
  rules: {
    "selector-type-no-unknown": null,
    "selector-class-pattern": null,
    "at-rule-no-unknown": null,
    "scss/at-use-no-unnamespaced": null,
    "no-invalid-double-slash-comments": null,
    "order/properties-order": [
      "position", "top", "right", "bottom", "left",
      "display", "flex-direction", "justify-content", "align-items", "gap",
      "width", "height", "padding", "margin",
      "font-size", "font-weight", "line-height",
      "color", "background", "border", "border-radius"
    ]
  }
};

「order/properties-order」は「要素をこの順番で並べ替えてね！」ってことみたいですね。

package.jsonに追記

"scripts": {
  "watch:sass": "npx sass assets/scss/app.scss pre/css/app.min.css --style compressed --watch",
  "watch:lint": "chokidar 'assets/scss/**/*.scss' -c 'stylelint assets/scss/**/*.scss --fix'",
  "dev": "npm-run-all --parallel watch:sass watch:lint"
}

※ npm-run-all も必要なので入れとく

npm install --save-dev npm-run-all

これで完成！あとはこのコマンドを打てば監視＆自動書き換え開始！

npm run dev

これでSCSSが保存されるたびにCSSを自動コンパイルし、同時に、stylelintが命名とかプロパティ順とかを整えてくれるみたいです。便利ですね！

脳みそのメモリを節約できるし、過去の自分のコードが一瞬で整うの気持ちいいですね。
今回は以上です！

手間ゼロでコード統一！scssにStylelintを入れて快適整形

Category