Next.jsでStylelintとPrettierを使ってコード整形を行う方法

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

前提条件 Prettier の設定は既にしておく

↓Next.jsの場合はこの記事を参考

必要モジュールのインストール

yarn add -D stylelint stylelint-config-prettier stylelint-config-recess-order stylelint-order stylelint-prettier stylelint-config-recommended

上記コマンドで、必要モジュールのインストールをする

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