こんにちは!エンジニアの川野です。
台風が過ぎ去って夏本番の暑さですね。怖い話でも聞いて涼みたいたいということで、 今回はVSCodeで表題の関数が突然消えるという恐怖体験について書きました。
心霊現象
Next.jsで開発をしているとき、下の画像のようなエラーに度々遭遇しました。
Server Error Error: getStaticPaths was added without a getStaticProps in /posts/[id]. Without getStaticProps, getStaticPaths does nothing This error happened while generating the page. Any console logs will be displayed in the terminal window.
直接の原因はエラーメッセージのとおり、getStaticPaths
が書かれているのにgetStaticProps
が書かれていないというものでした。
ただ、実装し忘れてそうなったのではなく、実装してあったgetStaticProps
が突然、何者かによってファイルから消されてしまったのです。getServerSideProps
についても同様に消されてしまうことがありました。
消えたコードを履歴から戻せばエラー自体は解決するのですが、毎回30秒ほど時間を奪われるので原因をしっかり調査しました。
環境情報
- VSCode: 1.58.2
- TypeScript: 4.2.3
- ESLint: 7.23.0
原因
その何者かは、VSCodeの到達できないコードの削除機能とsettings.jsonの設定値でした。
VSCodeにはreturn
やthrow
の後方の、プログラム的に到達不可能なコードを削除する機能があります。
たとえば、以下のようにコードを書き、return
の後方のコードで cmd + .
を押すと、Remove unreachable code
とコマンドが出てきます。
実行すればもちろん消えてしまいます。
そしてこの機能はsettings.json
で下記の設定をしていると、save時に発動するようになってしまいます。
settings.json
{ "editor.codeActionsOnSave": { "source.fixAll": true } }
解決策
もちろんsource.fixAll
をfalse
にすれば突然消えるということはなくなるのですが、それではESLintのフォーマットが動作しなくなってしまいます。
以下の設定にすればESLintのフォーマットだけ動作するようになりました。
settings.json
{ "editor.codeActionsOnSave": { "source.fixAll.eslint": true } }
フォーマットされなくても、到達不可能コードはESLintが検知してくれます。
disallow unreachable code after return, throw, continue, and break statements (no-unreachable)
無事、解決できました!