はる
Astro環境で、Stylelintの設定をして自動でCSSのプロパティーを整列してくれるようにする設定をメモメモ!
Astro環境以外も同じですが私がよくAstroを使うのでその設定に一部なってますがよしなに調整してください。
前提条件 Prettier の設定は既にしておく
↓Astro環境の場合この記事を参考
必要モジュールのインストール
yarn add -D stylelint stylelint-config-prettier stylelint-config-recess-order stylelint-config-recommended-scss stylelint-order stylelint-prettier stylelint-scss
上記コマンドで、必要モジュールのインストールをする
.stylelintrc.js の作成と設定
module.exports = {
extends: [
"stylelint-config-recommended-scss",
"stylelint-config-recess-order",
],
plugins: ["stylelint-order"],
ignoreFiles: [
"node_modules/**/*.scss",
"src/**/*.astro",
],
rules: {
"string-quotes": "double",
"no-descending-specificity": null,
"no-duplicate-selectors": null,
},
};
上記のように必要最低限の設定を行う。
Astro専用に設定されているのでAstro以外の場合は調整をしてください。
stylelintの拡張機能を入れてなかったら入れる
Stylelint - Visual Studio Marketplace
Extension for Visual Studio Code - Official Stylelint extension for Visual Studio Code