VS Codeでjsx,tsx書いてるとformatOnSave(保存時にフォーマットするオプション)が効かない問題

現象

Prettier走ってほしいのに、React書いててファイルがjsxあるいはtsxだとなぜか効かなくて困った。

原因はデフォルトでformatOnSaveをfalseにしていて、言語ごとにtrueにしていたからだった。

解決方法

VS Codeのsettings.jsonでこう書いていたのが原因。

// Set the default formatOnSave
    "editor.formatOnSave": false,
    // Enable per-language basis by scoping for Prettier
    "[javascript]": {
        "editor.formatOnSave": true
    },
    "[typescript]": {
        "editor.formatOnSave": true
    }

基本的にfalseにしておいて、言語ごとにスコープ切ってtrueにしている。こうしているのには理由があって、フォーマッタが保存時に走ってほしくないファイルだってあるから……。

そういうわけでjsx,tsxでも効くように設定を足す。

// Set the default formatOnSave
    "editor.formatOnSave": false,
    // Enable per-language basis by scoping for Prettier
    "[javascript]": {
        "editor.formatOnSave": true
    },
    "[typescript]": {
        "editor.formatOnSave": true
    },
    "[javascriptreact]": {
        "editor.formatOnSave": true
    },
    "[typescriptreact]": {
        "editor.formatOnSave": true
    }

javascriptreact,typescriptreactというのを足す。

なんでこんなことになっているのかは不明、jsxもtsxもjavascriptとtypescriptに含めておいてほしい…。