👐

VScodeとstylelintでscssとcssをいい感じに並べ替える

2023/10/31に公開

CSS

Scss

Stylelint

tech

cssの並べ替え、便利だけどググるとcsscombをすすめる記事ばかりなので、stylelintでやる。
csscomb自体もうとっくに終わっている仕組みなので、postcssやstylelintにやらせよう。

自分はまだscssを使っているので、cssとscssをVScodeでいい感じにしていく。

目的

VScodeとstylelintを使って、保存時にcssとscssをいい感じに並べ替える。
ついでに少し整形もする。

結論

node.jsがインストール済で、VScodeにstylelintの拡張をいれてれば、以下を叩くだけでよい。
.stylelintrc.jsはjsonでもいいけど、コメントを残したいのでjsにしてプロジェクト直下におく。

$ npm init
$ npm install -D stylelint stylelint-config-standard-scss stylelint-config-recess-order

.stylelintrc.js

module.exports = {
  "extends": [
    "stylelint-config-standard-scss",
    "stylelint-config-recess-order"
  ],
  ignoreFiles: [
    '**/node_modules/**',
  ],
  rules: {
    "property-no-vendor-prefix": null,
    "comment-empty-line-before": "always",
    "media-feature-range-notation": "context",
    "at-rule-empty-line-before": [
      "always",
      {
        except: ["blockless-after-same-name-blockless", "first-nested"],
        ignore: ["inside-block", "after-comment"]
      }
    ]
  }
};

解説

package.jsonを作成する

プロジェクト直下にnpmでstylelintをインストールする。
VScodeの場合はプロジェクト開いた状態で、VScode内のターミナルを開くとそこが直下なので便利かも。

なおnpmをインストールするにはnode.jsなので、それば別途インストールしておくこと。homebrewでもnodebrewでも公式サイトからでも。

$ npm init

npmから必要なモジュールをインストールする

stylelint本体と、css並べ替えに必要なパッケージをインストールしていく。初めての場合は、ひとまずstylelint本体をインストールして、挙動を確認したほうがよい。

$ npm install -D stylelint

この時点で以下のコマンドを叩くとルールチェックがされる。されない場合はなにかがおかしいので確認しよう。

$ npx stylelint "**/*.css"

validateが走ってデフォ設定と違うところは警告がでる

問題なさそうであれば、必要なモジュールをインストールする。
scssを使っているのであれば、stylelint-config-standard-scssはscssとcss両方対応していて、これだけで大丈夫そう。
stylelint-config-recess-orderは並び替えのモジュールで、デフォルトでyandexとかに近い種類順に整形してくれる。

$ npm install -D stylelint-config-standard-scss stylelint-config-recess-order

stylelintの設定をする

プロジェクト直下に、.stylelintrc.jsというファイルを作成して設定を書く。
設定はjsonファイルでも可だが、自分はコメントを残したいのでjsファイルで作っている。ルール自体は公式のドキュメントにたくさんあるが、ひとまず自分が見やすいようになればいいので最低限。

.stylelintrc.js

module.exports = {
  "extends": [
    "stylelint-config-standard-scss",
    "stylelint-config-recess-order"
  ],
  ignoreFiles: [
    '**/node_modules/**',
  ],
  rules: {
    // ベンダープレフィックスの統一化
    "property-no-vendor-prefix": null,
    // コメントの整形
    "comment-empty-line-before": null,
    // メディアクエリの演算子
    "media-feature-range-notation": "context",
    // @media,@includeなどの改行ルール
    "at-rule-empty-line-before": [
      "always",
      {
        except: ["blockless-after-same-name-blockless", "first-nested"],
        ignore: ["inside-block", "after-comment"]
      }
    ]
  }
};

設定の詳細

"property-no-vendor-prefix": null
『Autoprefixerが扱わない非標準のベンダープレフィックスプロパティを無視するかどうか。』VScodeの拡張機能でベンダープレフィックスをつけている場合、これを無効にしておかないと最終的にベンダープレフィックスが勝手に消されたりする。
"comment-empty-line-before": null
コメントの整形。自分はcss用のコメントアウトをプロパティの横につけたりするので、無効にしておかないととっちらかる。
"media-feature-range-notation": "context"
メディアクエリの書き方をこれまでのmin/maxでやるか、不等号を使うかの設定。

VScodeにstylelintの拡張をいれる

設定がおおすぎて自分で把握できていないが、ついでに以下をVScodeの設定に加えておく。
VScodeのvalidateを切って、stylelintにさせている。

{
  "css.validate": false,
  "scss.validate": false,
  "stylelint.validate": ["css", "scss"],
}

注意とまとめ

これでVScodeでcssとscssのファイル保存時に、cssがいい感じに並ぶようになった。

live sass compilerなどを使ってscssをコンパイルしている場合、吐き出されたcssは整形されてないので、改めてcssを保存して整形させる必要がある。