VS Codeで.tsファイルだけprettierのformatOnSaveが効かない

VS Codeで.tsファイルだけprettierのformatOnSaveが効かない現象に遭遇したのでそのメモ

/.vscode/settings.json

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": "never",
    "source.fixAll.eslint": "explicit"
  },
}

settings.jsonはこの様になっているので基本は保存時のオートフォーマットが効くはず。

.jsや.vueなどのファイルは問題なくオートフォーマットが効く

西畑一馬

色々と試したが以下の記事を参考にeditor.defaultFormatter を追加したところオートフォーマットが効くようになった

/.vscode/settings.json

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": "never",
    "source.fixAll.eslint": "explicit"
  },
+ "[typescript]": {
+   "editor.defaultFormatter": "esbenp.prettier-vscode"
+ }
}

ただ、記事中のShift + Option + Fのショートカットでは「規定のフォーマッタを構成する」が出てこなかった

西畑一馬

以下の記事を参考にGUIで「規定のフォーマッタを構成する」を実行すると選択できました。

「規定のフォーマッタを構成する」でPrettierを選択すればOK

Prettierの指定ができたら/.vscode/settings.jsonは元に戻しても動作するようになりました。

/.vscode/settings.json

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": "never",
    "source.fixAll.eslint": "explicit"
  },
}