小技：typescriptのコンパイルエラーを常時PROBLEMSタブに表示する
はじめに
お恥ずかしながらvscodeを利用してから、実はまだ1年も経っていません。それまではGolandというintelliJファミリアーのgo言語特化エディタを利用していました。
僕の専門領域がバックエンド開発のためgolandでのみ開発していれば全く問題ない状況でしたので、逆にvscodeを利用するとなると、UIや利用感、ショートカットが変わってきたりしますので、使いづらくなると言うイメージがありました。
しかしcursorやwindsurfといった開発サポートAI付きエディタの登場でvscode（ではないのですが）を触らざるを得ない状況になってきました。
そして、そんな自分がvscodeを触ってみるとgoland（intelliJ系）にあった機能がプラグインになっていたり、ショートカットが変わっていたり、そもそもなかったりするものが出てきていました。
そのモヤモヤのなかにプロジェクト全体のコンパイルエラーを監視する機能がないので、使いにくいということがありました。
仕方がないことだとは思っていて放置していましたが、最近はtypescriptでフロントもバックエンドも開発していると、見逃してあげられない気持ちになってきました。
そこでコンパイルエラーを常に監視してエラー発生を見逃さないための設定をこの記事では書いていこうと思います。
前もって言っておくと先ほども申した通り、利用期間が1年も経っておりませんので、もしかしたらもっと良い方法があるかもしれません。ただフロント開発の有識者の方に伺ったところ、プロジェクト全体のコンパイルエラーを監視する仕組みを入れていないとのことだったので、おそらくそれほど間違ったことは言っていないとは思います・・・
温かい目で見ていただけると幸いです。
PROBLEMSタブが微妙に使いにくい
最初におや？と思ったのはPROBLEMSタブに表示さえている内容がエディタのペインで開いているファイルしか検知してないんじゃないと思った点です。
当たり前ですが、プロジェクトにあるすべてのファイルを開いておくことなんて絶対にしないです。つまりは、何かしらのコンパイル具合を確認するコマンドを叩くか、CIなどでコンパイルエラーのチェックを行わない限り検知が難しいです。
それだと気づかないうちにコンパイルエラーが仕込まれたものをバージョン管理にプッシュしてしまうかもしれませんのでやや不安な気持ちになります。もちろんプッシュする前にはprepush.shのようなものを利用してチェックした上で行うと言う作法もありますが、人間が操作しなければならないなら漏れてしまう可能性も考えておくべきだとは思います。
つまり極端なこと言うと、僕は細々した事は絶対に守れない自身があるので、人間に任せるなら機械がやってくれ！です。
僕の性格だとちょっとしたことだったらちょっとした合間にチクチク言ってくれたほうがまだマシと思ってしまいます。ですのでPROBLEMSのタブには常にエラーだけは表示しておいて欲しい気持ちになっていました。
tscでエラーを監視するタスクを作成
こんな感じでタスクを追加します。僕の場合は全部のプロジェクトに反映したいのでUserの設定に追加しています。
- コマンドパレット（Cmd+Shift+P / Ctrl+Shift+P）を開きます
- Show And Run Commands を選択します
- Tasks: Open User Tasks を検索して選択します
- 開いたファイルに以下の内容を記述します
{
"tasks": [
// ここから
{
"label": "tsc-watch",
"type": "shell",
"command": "tsc -p ${workspaceFolder}/tsconfig.app.json --watch",
"isBackground": true,
"problemMatcher": "$tsc-watch",
"runOptions": {
"runOn": "folderOpen"
}
}
// ここまで
]
}
既存のタスクがある場合は該当部分だけを貼り付け、なければ全体をペーストして大丈夫です。
僕の場合のコンパイルの設定ファイルは tsconfig.app.json であることが多いですが、もし違うならcompilerOptionsが記述されているファイルがあるならそれを指定、ないなら作るという工程が必要になります。
この設定をしたあと一度エディタを再起動するとPROBLEMSタブに開いていないファイルのコンパイルエラーが表示されるようになります。
ただこれだとプロジェクト全体のコンパイルを常時行うことでPC負荷がヤバい！という場合は必要な時だけ動かすこともできます。
- コマンドパレット（Cmd+Shift+P / Ctrl+Shift+P）を開きます
- Show And Run Commands を選択します
- Tasks: Run Build Task を選択します
- tsc: watch - tsconfig.app.json を選択
そうすると、TERMINALのタブに監視タスクが実行されますので、必要な時には利用、いらないなら停止するみたいなこともできます。
前述したタスクの設定も結果的にはTERMINALタブで起動が確認されていますが、違いは自分で起動するか自動で起動するかです。
都合の良い方を選択してご利用ください。
おわりに
typecsriptがとにかく色々できすぎて便利！しかも生成AI系の出力とも相性がいいしフロントもバックもなんでもかけちゃう！最高！ってマジで思うのでエディタの利用感をとにかく上げていきたいと思っています。何かいい感じの設定、プラグインがあれば教えて欲しいです！
もちろんこの記事のツッコミもwelcomeです。よいtypescript生活を送りましょう☕️
Discussion