VSCodeよ、保存時にYAMLファイルのタブサイズを勝手にフォーマットすな

## はじめに

誰もが`docker-compose.yml`などのYAMLファイルをVSCodeで編集することがあると思うんです。

こんな感じに↓

![yaml_file_before.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2658776/762fc354-d9da-bcb2-2c72-fee1e59b893a.png)

「よしできた！保存しよ~ (ctrl+s)っと..」

![yaml_file_saved.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2658776/6dcc6328-02d1-3c86-de96-ded3eaaa0bc0.png)

「なんでそんなことするんだよ！」

「やめてくれよVSCodeさん..」

ってことが最近あって結構沼ったので、色々試した時のメモを置いておきます。

### 解決法だけ知りたい人

私が何を試したのかのかなんぞどーでも良いから成功した方法だけ知りたいという人はここから↓

[やったこと③: yamlファイルの自動フォーマットを無効化する](#やったこと-yamlファイルの自動フォーマットを無効化する)

## やったこと①: ユーザー設定でYAMLのタブサイズを2にする

とりあえず設定をみてみると、あることに気づきました。

![editor_tab_size.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2658776/c8edb9ad-2a0d-6a5d-a62c-3c69a5c63141.png)

「あ、そういえばVSCodeの設定でタブサイズを4にしていたから保存時にインデントが2タブから4タブに変換したのか！」

「でも全体の設定が2タブになるのは違うよな..そうか！ YAMLファイルだけ2タブになるように設定すれば良いのか！」

と思いユーザー設定の`settings.json`に以下の設定を追加しました。

```json:settings.json
{
    .
    .
    "[yaml]": {
        "editor.insertSpaces": true,
        "editor.tabSize": 2,
        "editor.autoIndent": "advanced"
    }
}
```

そして鼻歌を歌いながらもう一度YAMLファイルを2タブに直してから保存したら..

![approach_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2658776/15fb566f-54d7-8382-c6ee-53d05604b094.png)

効果なし！

次！

## やったこと②: ユーザー設定でYAMLのオートインデントの設定を変更してみる

色々調べていたところ、自分と同じ状況の人がVSCodeのGithubリポジトリーで[イシュー](https://github.com/microsoft/vscode/issues/69011)をあげていたのを見つけました。

読んでみると[解決法らしきコメント](https://github.com/microsoft/vscode/issues/69011#issuecomment-465942142)があったのです！

> Yaml has language specific default settings that wins over > > global settings:
>
>	```json
>	// Configure editor settings to be overridden for [yaml] language.
> 	"[yaml]":  {
> 		"editor.insertSpaces": true,
>		"editor.tabSize": 2,
>		"editor.autoIndent": false
>	},
>	```
> You'll have to add a similar section to your user settings.

でも、「さっき追加した設定と何が違うの？」

と思ったのですがよくみると`editor.autoIndent`の設定が違うことに気づきました。

通りあえず`editor.autoIndent: false`としてみると以下のようなメッセージで怒られてしまいました。

> Value is not accepted. Valid values: "none", "keep", "brackets", "advanced", "full".(1)

どうやらいつからか`editor.autoIndent`の仕様が変わったっぽいです。

`editor.autoIndent: false`ということは自動インデントを無効にすればよいということなので、`none` を設定してみました。

が、効果なし...

諦めて別の方法を探す旅へ...

## やったこと③: YAMLファイルの自動フォーマットを無効化する

「自動フォーマットされるのが原因なのであればもうフォーマットしなければ良い！」

と当たり前のことに気づいたのでYAMLのフォーマットを無効にしてみる作戦に出ました↓

```json:settings.json
{
    .
    .
    "[yaml]": {
        "editor.insertSpaces": true,
        "editor.tabSize": 2,
        "editor.autoIndent": "advanced",
        "editor.formatOnSave": false
    }
}
```

そして保存

![yaml_file_saved_success.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2658776/8f5c25f2-2816-5f73-3431-5d7c46ed5a04.png)

遂に成功しました！

## フォーマットしていた犯人は誰？

「流石に成功しましたが何か腑に落ちないな..」

とりあえずは勝手にインデントされなくて済んだので一安心ですが、まだ気になる点が、

「**誰がフォーマットしていたのか？？？**」

そこで色々調べてみると、あるフォーマッターの仕業だということがわかりました。

そう、みんな大好き`Prettier`さん

「お前だったのか...」

P: 「私だ **(ドン！)**」
![prettier.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2658776/3ddd83cc-b971-24ce-8f42-f8386e545a15.png)

ちなみに`.prettierignore`ファイルを作成すれば、特定のファイルに対してPrettierのフォーマットの無効化をすることができるみたいです。

**完**

## 参考

- <https://github.com/microsoft/vscode/issues/69011>
- <https://runebook.dev/ja/docs/prettier/ignore>