概要
- SCSSに対して、stylelintのルールにのっとったフォーマット変換をPrettierで行いたい
- VSCode上のformatOnSaveでstylelintに即したフォーマットがかかることが理想系
- セットアップするときにいつも適用済みのリポジトリを探すのがめんどくさいのでメモしておく
手順
- ライブラリをインストール
-
stylelint-config-idiomatic-order
はCSSの記載順序のルール - こだわりはないけど何かしらの規則がないと落ち着かないので入れてる
-
yarn add -D stylelint stylelint-config-idiomatic-order stylelint-config-recommended-scss stylelint-scss prettier-stylelint
# or
npm i -D stylelint stylelint-config-idiomatic-order stylelint-config-recommended-scss stylelint-scss prettier-stylelint
- stylelintの設定ファイル
.stylelintrc.js
を作成- シングルクォートにしてるのは単なる好み
.stylelintrc
module.exports = {
extends: [
'stylelint-config-idiomatic-order',
'stylelint-config-recommended-scss',
'./node_modules/prettier-stylelint/config.js',
],
rules: {
'string-quotes': 'single',
},
};
-
package.json
にコマンド追加-
yarn lint:css
はstylelintの結果を見るだけ -
yarn format:css
はstylelintのルールに合わせてformatをかける
-
package.json
{
// ...
"scripts": {
// ...
"lint:css": "stylelint \"src/**/*.scss\"",
"format:css": "prettier-stylelint --write \"src/**/*.scss\""
}
}
- VSCodeのプラグインを入れる
- Prettier


