VSCodeでワークスペースを作りtsconfig.jsonの設定をそれぞれのワークスペースにも適用させる

個人開発(知人と開発だがほぼ一人)のフロントエンドで学習も込めてなんちゃってDDDとしてリポジトリ層、モデル層、ユースケース層などに区分けしたディレクトリを切っていたり、NextJSのAPI機能を使っているのでそのディレクトリ、Supabaseのfunction(cloud workersみたいなやつ）のディレクトリも切ってあったり、componentも少し細かくディレクトリを切っていたりとディレクトリを追うのが面倒になってきたのでワークスペースをちゃんと切って作業することにしました。

.vscode/hoge.code-workspace のファイル作成

hogeの部分は任意でファイルを切ります。

.vscode/hoge.code-workspace

{
  "folders": [
    {
      "name": "リポジトリ層",
      "path": "../src/repositories"
    },
    {
      "name": "ユースケース層",
      "path": "../src/usecases"
    },
    {
      "name": "root",
      "path": "../"
    }
  ]
}

適当に自分の思うディレクトリを設定してください。そしてvscodeを使っている場合は右下の方に「ワークスペースを開く」というボタンがあるのでクリックすると設定したワークスペースで一気に開くことができます。

tsconfig.json設定が読み込まれない

しかしここで問題となるのはサブディレクトリ側のtypeエラーです。
tsconfig.jsonがサブディレクトリでは読み込まれないことに起因しています。

サブディレクトリにルートディレクトリのtsconfigを参照するtsconfig.jsonを設定する

src/usecases/tsconfig.json と src/repositories/tsconfig.json

// 親のtsconfig.jsonを参照
{
    "extends": "../../tsconfig.json"
}

このように拡張させることでそのまま設定を引き継ぐことができました。

個別でディレクトリ毎にtsconfigの設定させて親側で設定を重複させたくない場合

個別でディレクトリ毎にtsconfigの設定させたい場合は逆に親側のtsconfig.json側で

  // ...compileoptionsなど省略
  "references": [
    { "path": "./src/repositories/tsconfig.json" },
    { "path": "./src/usecases/tsconfig.json" }
  ]
  ...

のように参照すればできるかと。

終わりに

個人開発なので気にせずtsconfigをディレクトリ毎に用意できますがチームで開発する場合はサブディレクトリにtsconfig.jsonを置くことに抵抗があるかもしれません。事前にモノリポ寄りでディレクトリが多くなることを踏まえワークスペースで作業することに同意を得た上でこのような形にすれば良いのかなと思います。