stylelintとprettierを導入してみた。

scss慣れておらず、ちょくちょくコンパイルエラーになるのでstylelintを導入して楽にしたい、prettierも動かしてコードを綺麗にしたい。

インストール

yarnで以下のパッケージをインストール

stylelint
cssの静的syntaxチェックツールいわゆるlinter
stylelint-scss
stylelintのプラグインでscssのチェックを可能にしてくれる。(stylelintのsyntaxオプションでscssが設定できるみたいだが、これとどう違うのかはよくわかっていない...)
stylelint-config-recommended-scss
標準的なstyleのルールを設定してくれる。無数にあるルールを手作業でチマチマやる手間が省けてありがたい
prettier
コードフォーマッター。汚いコードを綺麗にしてくれる。
stylelint-config-prettier
styleLintのフォーマット関連のルールを全て無効にする、ようはPrettierが整形した箇所に関してエラーを出さなくなる
stylelint-prettier
stylelint上でprettierを動かすためのプラグイン

yarn add stylelint stylelint-scss stylelint-config-recommended-scss prettier stylelint-config-prettier stylelint-prettier -D

設定

stylelintとprettier周辺をインストールしたので、設定を作成。
作成するのは、

.stylelintrc.json
stylelintに関わる設定を記載
.prettierrc
prettierの整形ルールに関わる設定を記載

.stylelintrc.json

{
  "plugin": [
      "stylelint-scss",
  ],
  "extends": [
    "stylelint-config-recommended-scss",
    "stylelint-prettier/recommended"
  ],
  "rules": {
    "at-rule-no-unknown":[true,{
            "ignoreAtRules":["function","if","for","each","include","mixin","content"]
        }]
  }
}

extendsにstylelint-prettier/recommnededを指定することで、stylelint-prettierとstylelint-config-prettierが適用される。
rulesにはmixinなどの＠付きを書いても怒られないように追加で設定。

.prettierrc

printWidth: 120
tabWidth: 2
singleQuote: false
trailingComma: none
semi: true
bracketSpacing: true

タブの設定やらセミコロンつけるとか簡単なルールだけ記載。

動作確認

lint機能の確認

適当にフォーマットやらを破壊したscssを作成。

.try {
    .spinner {
        width: 40px;
        height: 4 0px;
        background-color: #3z3    ;
        margin: 100px auto;
           transform-origin: center center   ;
    }
}

stylelintを実行


yarn stylelint style.scss

2:3   ✖  Delete "··"                                                                                  prettier/prettier
 3:1   ✖  Replace "········" with "····"                                                               prettier/prettier
 4:1   ✖  Replace "········" with "····"                                                               prettier/prettier
 4:20  ✖  Unexpected unit                                                                              length-zero-no-unit
 5:1   ✖  Replace "········background-color:·#3z3····" with "····background-color:·#3z3"               prettier/prettier
 5:27  ✖  Unexpected invalid hex color "#3z3"                                                          color-no-invalid-hex
 6:1   ✖  Delete "····"                                                                                prettier/prettier
 7:5   ✖  Replace "·······transform-origin:·center·center···" with "transform-origin:·center·center"   prettier/prettier
 8:1   ✖  Delete "··"                                                                                  prettier/prettier

エラーまみれで返ってくることを確認。

fix機能の確認

stylelint自体で怒られた場所を修正の上、fixをかけてみる。

yarn stylelint --fix style.scss

結果

.try {
  .spinner {
    width: 40px;
    height: 40px;
    background-color: #333;
    margin: 100px auto;
    transform-origin: center center;
  }
}

いい感じに綺麗にフォーマッティングされる。

所感

eslintの導入とほとんど一緒なのであまり時間がかからなかったが、それでも結構時間を取られた。
vimと連携して使ってるのでaleに設定を仕込んでみたが、保存時のみ機能するように設定しているつもりなのに何故か編集中もlintされる。なんか設定がおかしいのか。。。
仕事やめたい

scssのためのstylelintとprettierの導入