ぱぱっと作るアプリだとscssのlintまでかけようとは思わないのですが、jsのlintツールであるstandardを導入したついでにやってみました。
Installation
こちらに記載されています。
Linting CSS-like languages and CSS within containers
yarn add --dev stylelint stylelint-config-standard-scss
Settings
.stylelintrc.json に書けと記載されてますが、特にこだわりもなく大した設定にならないはずなので、package.json に詰め込みます。
"stylelint": { "extends": "stylelint-config-standard-scss" }
公式にもpackage.jsonでも.stylelintrcでも.stylelintrc.{cjs,js,json,yaml,yml}でもstylelint.config.{cjs,js}でも良いと書かれています。
Configuring | Stylelint
package.json script
yarn run lintでjsもcssもどちらのlintも実行できるように以下にしておきます。
"lint": "yarn run lint:js && yarn run lint:css",
"lint:js": "standard --verbose | snazzy",
"lint:css": "stylelint '**/*.scss'"
こんな感じ
ついでにvscode
Stylelint - Visual Studio Marketplace
を入れれば良いのですが、こちらは少しハマりました。
stylelint.validate オプションのデフォルトが ["css", "postcss"] になっているため、scssでは動作しませんでした。
vscodeのsetting.jsonに以下を追加することで問題なく動作しました。
"stylelint.validate": ["css", "scss"]
