VS Code で Prettier と Stylelint を連携して CSS/SCSS ファイル保存時にオートフォーマットをかける

*2018/05/31(Thu) 時点の情報に基づいています*
*2019/09/10(Wed) 更新しました*

---

`Prettier` と `Stylelint` を使って `npm-scripts` や `gulp` で、任意のコマンド実行時に `css/scss` ファイルをオートフォーマットするやり方はいろいろと見つけることができたのですが、やっぱりファイル保存時にやりたい！ということで方法を調べてみました。

# 1. VS Code の設定
まずは `VS Code` の設定を行います。この設定は一度だけ行えば後はする必要はありません。

## 1-1. `prettier-vscode` Extension のインストール
`VS Code` の Extension である `prettier-vscode` をインストールします。
[![image.png](https://qiita-image-store.s3.amazonaws.com/0/70618/4b0681a3-b6dc-9adf-686a-3bde6988692b.png)](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)


## 1-2. VS Code の設定を変更

```json:settings.json
{
  ...
  "editor.formatOnSave": true,
  "prettier.stylelintIntegration": true,
  ...
}
```
を設定して、保存時にオートフォーマットされるようにします。ただし `prettier` の機能だけでは物足りないので `stylelint` と連携してより強力なオートフォーマットをかけます。

### 2019/09/10 追記
`stylelintIntegration` が deprecated になっています。まだ使用は可能ですが、いつまでサポートされるかは分かりませんので、別の手立てを考える必要があります。ただ残念なことに、今のところ、これは！といった代替手段が見つかっていません。

# 2. プロジェクトの設定
`stylelint` の機能を使用するためには、プロジェクト側にも設定が必要です。プロジェクトが複数ある場合はプロジェクト毎に行う必要があります。

## 2-1. `prettier-stylelint` パッケージのインストール
`prettier-vscode` と連携するために必要なパッケージです。

```terminal:terminal
npm i prettier-stylelint -D
```

## 2-2. `stylelint-config-rational-order` パッケージのインストール
フォーマットをかけた時に、プロパティの並びもいい感じにソートして欲しいので、並び順に関するコンフィグファイルをインストールします。
[`prettier-stylelint` の 使い方](https://github.com/hugomrdias/prettier-stylelint#usage) を見ると [`stylelint-config-idiomatic-order`](https://github.com/ream88/stylelint-config-idiomatic-order#stylelint-config-idiomatic-order) が例として使われていますが、個人的には [`stylelint-config-rational-order`](https://github.com/constverum/stylelint-config-rational-order#stylelint-config-rational-order) の方がより細かくグルーピングされていて好きなのでこちらを使います。

```terminal:terminal
npm i stylelint-config-rational-order -D
```

### 2019/09/11追記
`stylelint-config-recess-order` も良いかも。


## 2-3. プロジェクトルートに `.stylelintrc.json` ファイルを作成
ほとんど [`prettier-stylelint` の 使い方](https://github.com/hugomrdias/prettier-stylelint#usage) と同じ構成ですが [`stylelint-config-idiomatic-order`](https://github.com/ream88/stylelint-config-idiomatic-order#stylelint-config-idiomatic-order) の代わりに [`stylelint-config-rational-order`](https://github.com/constverum/stylelint-config-rational-order#stylelint-config-rational-order) を指定しています。

```json:.stylelintrc.json
{
  "extends": [
    "stylelint-config-rational-order",
    "./node_modules/prettier-stylelint/config.js"
  ],
  "rules": {
    "indentation": 4,
    "string-quotes": "single"
  }
}
```

以上で設定は終わりです。


# 3. 使ってみる
- `Command+S(Mac)`
- `Ctrl+S(Win)`
- `右クリック > ドキュメントのフォーマット`

などでオートフォーマットがかかるようになります。きちんと Lint も効いていて、問題パネルに結果も表示されます。

なぜか自分の環境では、一発目の `Command+S / Ctrl+S` でオートフォーマットがかからないことがありました。一旦 `右クリック > ドキュメントのフォーマット` をするとその後問題なくオートフォーマットしてくれるようになりました。

### 2019/09/10追記
[stylelint](https://marketplace.visualstudio.com/items?itemName=shinnn.stylelint) Extension を入れておかないと問題パネルには表示されないことに今更ながら気づきました、すみません。stylelint を入れた場合、[ビルトインの linter を OFFにする](https://github.com/shinnn/vscode-stylelint/#optional-but-recommended-setup)ために以下を追加します。

```json:settings.json
{
  ...
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false
  ...
}
```

# 4. トラブルシューティング
## Couldn't resolve parser "postcss" エラーが出る
いろいろと試していた過程で、VS Code の出力パネルに

> Couldn't resolve parser "postcss"

が出て `scss` ファイルがオートフォーマットできない事象に当たりました。

## 4-1. 原因
調べていくと `prettier-atom` に類似の Issue が上がっていました。
https://github.com/prettier/prettier-atom/issues/386
どうやら `prettier` 自体に問題があったようで、バージョンを `1.11.1` 以上に上げれば解消するとのこと。
https://github.com/prettier/prettier/issues/4071#issuecomment-369411373

## 4-2. 対処
ただし、自分の場合はプロジェクトに `prettier` をインストールしているわけではなく VS Code 上で `prettier-vscode` を使っているのでこの対処方法ではダメでした。

最新バージョンの `prettier-vscode@1.3.1` は `prettier@1.12.1` を使っているので問題ないはずなのに、、という感じで手詰まり感があったのですが、ダメ元で一旦 `prettier-vscode` をアンインストールして再インストールしたら直りました。アンインストールした際に、念のため以下のフォルダも消しました。

```terminal:Mac
/Users/{USER_NAME}/.vscode/extensions/esbenp.prettier-vscode-1.3.1
```
```terminal:Win
"C:\Users\{USER_NAME}\.vscode\extensions\esbenp.prettier-vscode-1.3.1"
```
`prettier-vscode` 自体がアンインストールできないこともあります。自分の場合 [`Angular Essentials`](https://marketplace.visualstudio.com/items?itemName=johnpapa.angular-essentials) が依存していたためアンインストールに失敗していました。仕方なく `Angular Essentials` ごとアンインストールして再インストールしました。

## 4-3. 蛇足
`prettier-stylelint` にも自分と同じ事象に当たった人がいました。
https://github.com/hugomrdias/prettier-stylelint/issues/3
> I'm seeing a 'Couldn't resolve parser "postcss"' message in VSCode's Output panel whenever I save a .scss file. Sounds like the same/similar issue running v0.4.2

`prettier-stylelint` をフォークした [`prettier-stylelint-formatter`](https://github.com/ismail-syed/prettier-stylelint-formatter) をインストールすれば解消するかも、とのことでしたが、自分の場合はやっても効果がありませんでした。

まずは `prettier-vscode` の再インストールを試してみるのが良さそうです。

# 5. 参考
- [注目のコードフォーマッター「Prettier」でCSSを整形する方法](https://satoyan419.com/prettier/)
- [PrettierとLinterを併用する](https://qiita.com/sigwyg/items/ebb21ef70550cee7a163)

大変勉強になりました。ありがとうございます。