[vscode] prettierの自動整形が反映されない

Question

前提・実現したいこと

vscodeで自動整形をしたく、prettierを入れたのですが、自動整形が反映されません。
拡張を入れた後、設定からformat on saveにチェックが入っていることは確認済みです。
わかる方がいましたら、コメントお願いします。

発生している問題・エラーメッセージ

prettierの自動整形が反映されない

{
  "window.zoomLevel": -1,
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "typescript.format.insertSpaceBeforeFunctionParenthesis": true,
  "editor.tabSize": 2,
  "eslint.enable": true,
  "files.associations": {
    "*.vue": "vue"
  },
  "eslint.validate": ["javascript", "javascriptreact", "vue"],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.suggestSelection": "first",
  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
  "javascript.updateImportsOnFileMove.enabled": "always",
  "python.languageServer": "Microsoft",
  "editor.formatOnType": true,
  "editor.formatOnSave": true
}

Answer 1

Prettierを使って整形するようにVSCodeに設定を追加してください。

例えば、settings.jsonに以下の設定

  "editor.defaultFormatter": "esbenp.prettier-vscode",

を追加(末尾に追加するなら最後の,は不要)するか、設定画面の「Editor: Default Formatter」から「esbenp.prettier-vscode」を選択すれば、すべての言語でPrettierが有効になります。整形を無効にしたい言語のリストをprettier.disableLanguagesに設定することもできます。

有効にしたい言語が限られるのであれば、settings.jsonに以下のような設定

  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

を追加(末尾に追加するなら最後の,は不要)して、JavaScriptでだけPrettierを有効にすることもできます。