scssのみでjsについての変更・設定はなし
stylelint, prettierのインストール
$ yarn add stylelint stylelint-config-standard stylelint-scss prettier prettier-stylelint stylelint-config-prettier
参考
- stylelint - npm
- stylelint-config-standard - npm
- stylelint-scss - npm
- prettier - npm
- prettier-stylelint - npm
- stylelint-config-prettier - npm
prettierの設定・stylelintの設定
.prettier
{
"printWidth":120,
"tabWidth":2,
"useTabs":false,
"singleQuote":true,
"proseWrap":"preserve"
}
参考
.stylelintrc.json
{
"plugins":[
"stylelint-scss",
],
"rules":{
"indentation":2,
"declaration-block-no-shorthand-property-overrides":true,
"declaration-colon-newline-after":null,
"at-rule-no-unknown":[true,{
"ignoreAtRules":["function","if","for","each","include","mixin","content"]
}],
},
"extends":[
"stylelint-config-standard",
"stylelint-config-prettier"
]
}
参考
package.json(npm script)
app/frontend/stylesheets/ よりも下にscssファイルを入れている場合。
{
"scripts":{
"lint:stylesheet":"stylelint --fix app/frontend/stylesheets/**/*.scss",
"format:stylesheet":"prettier-stylelint --quiet --write app/frontend/stylesheets/**/*.scss"
},
}
ルールについての一部
- stylelintのルール簡単説明（v5.4.0） · GitHub
- selector-list-comma-newline-after · stylelint
- no-descending-specificity · stylelint
- at-rule-no-unknown · stylelint
要素の並び替えを行う
stylelint-order - npm をインストールする
$ yarn add stylelint-order
参考
.stylelintrc.json に設定を記載する
記載後の状態
{
"plugins":[
"stylelint-scss",
"stylelint-order"
],
"rules":{
"indentation":2,
"declaration-block-no-shorthand-property-overrides":true,
"declaration-colon-newline-after":null,
"at-rule-no-unknown":[true,{
"ignoreAtRules":["function","if","for","each","include","mixin","content"]
}],
"order/order":[
"less-mixins",
"dollar-variables",
"custom-properties",
"declarations",
"rules"
]
},
"extends":[
"stylelint-config-standard",
"stylelint-config-prettier"
]
}
参考
commit時に自動的に反映されるようにする
パッケージをインストール
husky - npm と lint-staged - npm のインストールを行う
$ yarn add husky lint-staged
参考
package.jsonに記載
{
"scripts":{
"precommit":"lint-staged",
},
"lint-staged":{
"*.scss":[
"yarn format:stylesheet && yarn lint:stylesheet",
"git add"
]
},
}