Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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 - npmlint-staged - npm のインストールを行う

$ yarn add husky lint-staged

参考

package.jsonに記載

{
    "scripts":{
        "precommit":"lint-staged",
    },
    "lint-staged":{
        "*.scss":[
            "yarn format:stylesheet && yarn lint:stylesheet",
            "git add"
        ]
    },
}

参考

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away