VSCode拡張機能Prettier ESLintが効かなくて困ったメモ

概要

VSCodeで触っているTypeScriptのプロジェクトにESLintとPrettierを入れたく、拡張機能をインストールしました。
保存時のフォーマットが動かず戸惑ったので、メモとして残します。
（同事象の解決記事はいくつか拝見しましたが、同じ拡張機能を使っている記事が見当たらなかったので）

※変なことをしていたり、定石と違う点がありましたら、コメントいただけると喜びます。

前提条件

• TypeScriptプロジェクト

ソフトウェア	バージョン
VSCode	1.92.0
rvest.vs-code-prettier-eslint	6.0.0
@typescript-eslint/parser	8.0.0
eslint	8.57.0
eslint-config-prettier	9.1.0
prettier	3.1.0
prettier-eslint	16.1.2
typescript	4.4.4

何が起こったか

再現手順

1. 拡張機能の説明のとおり、下記を準備
   1. 依存関係のインストール
   2. prettierの設定ファイル作成
   3. eslintの設定ファイル作成
   4. ワークスペース設定
2. VSCode上でソースファイルを保存

事象

ソースコードがフォーマットされない
（TypeScriptも、JavaScriptも、Jsonも）

補足

1. ESLint、prettierはそれぞれnpxコマンドで実行可能（＝各設定のせいではない）
2. 今回参照した拡張機能の説明
   

原因

VSCodeのデフォルトのフォーマッタ設定が効いていないように見えました。
それがなぜ起こるのかは、よくわかりませんでした。
何か抑止する設定を入れてしまっているのか、VSCode本体のバグなのか。
原因にお心当たりのある方のコメントいただけると喜びます。

動いた設定

prettierにフォーマットしてほしい言語の"editor.defaultFormatter"を追記しました。
※editor.formatOnSaveは書いても書かなくても動作に変化ありませんでした

settings.json

{
  "editor.defaultFormatter": "rvest.vs-code-prettier-eslint",
  "editor.formatOnType": false, // required
  "editor.formatOnPaste": true, // optional
  "editor.formatOnSave": true, // optional
  "editor.formatOnSaveMode": "file", // required to format on save
  "files.autoSave": "onFocusChange", // optional but recommended
  "vs-code-prettier-eslint.prettierLast": false, // set as "true" to run 'prettier' last not first
  "[javascript]": {
    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
  },
  "[typescript]": {
    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
  },
  "[json]": {
    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
  },
  "[html]": {
    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
  },
  "[css]": {
    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
  },
  "[scss]": {
    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
  }
}

GUIから設定を見た時の図

※Eslint > Format:Enableにある「Enables ESLint as a formatter.」は、チェックを入れてもいれなくても動作に変化ありませんでした

オマケ

ESLint設定（フラットコンフィグ）

eslint.config.js

import eslint from "@eslint/js";
import eslintConfigPrettier from "eslint-config-prettier";
import typescript from "@typescript-eslint/parser";
import globals from "globals";

export default [
  {
    files: ["**/*.js", "**/*.mjs", "**/*.ts", "**/*.cts", "**/*.mts"],
    languageOptions: {
      sorceType: "modules",
      globals: { ...globals.node, ...globals.browser },
      parser: typescript,
    },
  },
  eslint.configs.recommended,
  eslintConfigPrettier,
];

prettier設定

.prettierrc.json

{
  "printWidth": 120
}