jackmiwamiwa devblog

フロントエンドをメインに行ったことをまとめていくサイトになります。

stylelint,prettierを使ってscssのコード品質を保つ

scssのみでjsについての変更・設定はなし

stylelint, prettierのインストール

$ yarn add stylelint stylelint-config-standard stylelint-scss prettier prettier-stylelint stylelint-config-prettier

参考

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-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"
        ]
    },
}

参考