VSCodeのStylelintでSCSSの整形を有効にする
↓以下がGeminiが生成した手順書
VScodeのStylelint拡張機能でSCSSファイルの構文チェックと自動整形を有効にするための設定手順 前提条件
以下のnpmパッケージをインストールされている必要があります。
stylelint
stylelint-config-standard-scss
stylelint-scss
postcss-scss (customSyntaxとして必要)
code:json:package.json
{
"devDependencies": {
"stylelint": "^16.23.0",
"stylelint-config-standard-scss": "^15.0.1",
"stylelint-order": "^7.0.0", // (任意)
"stylelint-scss": "^6.12.1"
}
}
1. Stylelintの設定ファイル（.stylelintrc.json）を編集する
SCSS用の設定を追記します。
extendsにstylelint-config-standard-scssを追加して、基本的なSCSSのルールを導入します。
customSyntaxにpostcss-scssを指定して、SCSSの構文を正しく解析できるようにします。
（任意）rulesにscss/at-rule-no-unknownなどを追加して、SCSS固有の構文（@mixin, @includeなど）でエラーが出ないようにします。
code:json:.stylelintrc.json
{
"extends": [
"stylelint-config-standard-scss"
],
"plugins": [
"stylelint-order"
],
"rules": {
"order/properties-order": [
// ...プロパティ順のルール
],
"scss/at-rule-no-unknown": true
},
"customSyntax": "postcss-scss"
}
2. VSCodeの設定ファイル（.vscode/settings.json）を作成・編集する
プロジェクトのルートに.vscodeフォルダを作成し、その中にsettings.jsonファイルを作成します。
この設定により、VSCodeのStylelint拡張機能がSCSSファイルも監視・整形するようになります。
code:json:.vscode/settings.json
{
"stylelint.validate": [
"css",
"scss"
]
}
3. VSCodeを再起動する
設定を確実に反映させるため、VSCodeのウィンドウをリロードするか、一度再起動してください。
以上の手順で、VSCode上でSCSSファイルを保存した際などに、Stylelintによる自動整形が適用されるようになります。
public.icon