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

参考

Options · Prettier

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

参考

stylelintの設定ファイルの作り方 - Qiita

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

参考

stylelint-order - npm

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

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

stylelint, prettierのインストール

参考

prettierの設定・stylelintの設定

.prettier

参考

.stylelintrc.json

参考

package.json(npm script)

ルールについての一部

要素の並び替えを行う

stylelint-order - npm をインストールする

参考

.stylelintrc.json に設定を記載する

参考

commit時に自動的に反映されるようにする

パッケージをインストール

参考

package.jsonに記載

参考