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

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 - 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 do not you register as a user and use Qiita more conveniently?
  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
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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