😓

VSCodeでPrettierのオートフォーマットが効かねぇ...！というときの対処

2022/08/04に公開

VS Code

tech

VSCodeで自動フォーマットしたい

VSCodeでフォーマッタにPrettierを使用しています。新しい端末で開発環境をセットアップしたところなぜかPrettierの自動フォーマットが動かなくて困ったのでその備忘録です。

調べたところ出てきたのは以下の2つの設定で、両方設定したのにオートフォーマットされずに悩みました。

設定でFormat On Saveのチェックを入れる
設定でDefault FormatterにPrettierを指定する

なおコマンド（Shift+Option+F）ではフォーマットされていてPrettierの問題ではないようでした。VSCodeを再起動しても治らず、ググっても大抵上記2つの設定についてしか記載がなく困りました。

結論

settings.jsonが複数存在しており、設定が打ち消されていた。何かの拍子に要らないファイルが生成されてしまっていた模様。ので、それを消したら解決しました。

/Users/fuu/Library/Application Support/Code/User/settings.json

{
    "workbench.colorTheme": "Default Dark+",
    "editor.tabSize": 2,
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
}

/workingDirectory/.vscode/settings.json

{
    "editor.formatOnSave": false
}

settings.jsonはVSCodeの設定を保持するファイルです。要はVSCodeの設定画面からぽちぽち設定した内容はこのファイルに保存されて、VSCodeはこのJSONをみて動作しているこうことだと思います。人によってはこのファイルを直接編集して設定するんじゃないでしょうか。

このsettings.jsonはリポジトリごとに作成されたりするのでどういう優先順位で効いているのか知りませんが（おそらくCSSと同じで作業ファイルに一番近い設定ファイルが優先されると推測）、私のケースでは設定を書き込んでいたsettings.jsonよりも下に別のsettings.jsonがいて、その子がオートフォーマットの指定を打ち消していました。

分かってしまえば大したことがない話ですし、かなり稀なケースかとは思いますが、もし同様に困っていたら確認してみてください。

VSCodeで自動フォーマットしたい

結論

Discussion