現象
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
に含めておいてほしい…。