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公式の拡張機能だけで実現したいし、保存時の自動フォーマットはできればやりたいぐらいなので、保存自動フォーマットは現状は取り入れていないです。
Read next
- 2021年12月19日Next.jsとmicroCMSで動的にサイトマップを生成する
- 2021年11月27日Firebase v8→v9でFirestoreのコレクション取得やドキュメント追加などのデータ操作の書き方
- 2021年11月20日Next.js × microCMSでカテゴリ一覧ページを作る