web

Stylelint + Prettier でCSSプロパティの並び順を自動フォーマットする

公開日:2021年12月26日
最終更新日:2021年12月26日
目次

共同でCSSを書く時に、ルールが決まっていないとどうしてもプロパティの書き順がばらばらになってしまいます。
そこでStylelintとPrettierでアルファベット順に整形してみます。

前提としてSassを使った方法です。
テンプレート作ってるので、よかったら参考にしてください
https://github.com/mismith0227/web_template_gulp

必要なパッケージを追加

以下のコマンドを打ちます。

yarn add stylelint stylelint-config-prettier stylelint-config-recommended-scss stylelint-order stylelint-prettier stylelint-scss


.stylelintrc.jsonを作成

.stylelintrc.jsonを作り以下のように書きます。

{
  "plugins": ["stylelint-order"],
  "rules": {
    "order/properties-alphabetical-order": true
  },
  "extends": [
    "stylelint-config-recommended-scss",
    "stylelint-prettier/recommended",
    "stylelint-config-prettier"
  ],
  "ignoreFiles": ["./src/scss/foundation/_reset.scss"]
}


package.jsonにlintのコマンド追加

package.jsonのscriptsにlintのコマンドを追加します。

"scripts": {
  "dev": "npx gulp dev",
  // 省略
  "lint:css": "stylelint --fix **/*.scss" // 追加
},


自動フォーマットしてみる

yarn lint:css を実行するとアルファベット順に自動でフォーマットしてくれます

body {
  background-color: $color--body;
  margin: 0;
  padding: 0;
  letter-spacing: 0.05em;
}

// コマンド実行後 ↓
body {
  background-color: $color--body;
  letter-spacing: 0.05em;
  margin: 0;
  padding: 0;
}


VSCoceで保存時にフォーマットする

ここまでできたらいいですが、残念ながらうまく動いていないです。
調べてみると、拡張機能の vscode-stylelint を追加し、vscodeのsetting.json以下を書けばいいという記事はたくさんあるのですが、うまく動かないんですよね...。
vscode | editor.codeActionsOnSave

{
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true
  }
}


stylelint-plusという拡張機能を使えば保存時に自動フォーマットされましたが、できればStylelint公式の拡張機能だけで実現したいし、保存時の自動フォーマットはできればやりたいぐらいなので、保存自動フォーマットは現状は取り入れていないです。

About the author

大阪でフロントエンドエンジニアをしています。写真を撮るのが趣味です。よかったら500pxに載せてる写真も見てください。
web上に公開しているので、正確さに可能な限り努力してますが、個人の備忘録程度に書いてるので、ご自身の判断で参考程度に読んでください。
間違いやご意見があれば、コンタクトやSNSに気軽にご連絡ください。

Read next

Category

  • web
  • 雑記