Astro環境【scss】Stylelint設定 CSSプロパティーの自動設定まで

はる

Astro環境で、Stylelintの設定をして自動でCSSのプロパティーを整列してくれるようにする設定をメモメモ！
Astro環境以外も同じですが私がよくAstroを使うのでその設定に一部なってますがよしなに調整してください。

前提条件 Prettier の設定は既にしておく
必要モジュールのインストール
.stylelintrc.js の作成と設定
stylelintの拡張機能を入れてなかったら入れる

前提条件 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以外の場合は調整をしてください。