scssのためのstylelintとprettierの導入

# 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を動かすためのプラグイン

```shell
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

```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を作成。

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

stylelintを実行

```shell

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をかけてみる。

```shell
yarn stylelint --fix style.scss
```

結果

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

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

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