VS Code + create-react-app v3でtsconfig.jsonのpathsを使用する

やりたいこと

• create-react-appで作ったプロジェクトで、
• VS Codeの補完を有効にしつつ、
• tsconfig.json の paths オプションに設定したaliasを使いたい。
• 起動はデフォルトの react-scripts start

環境

• react-scripts: 3.0.1
• VS Code: 1.36.1
• typescript: 3.5.2

答え

tsconfig.json

.json

{
  "extends": "./tsconfig.paths.json",
  "compilerOptions": {
    "baseUrl": "src",
    ...
  },
  ...
}

• pathsは別ファイルに定義してextendsで読み込む。（ファイル名はなんでもいい）
  そうしないと react-scripts start した時に paths オプションが消される。

• baseUrlは"src"にする。
  そうしないと Your project's `baseUrl` can only be set to `src` or `node_modules`. Create React App does not support other values at this time. と怒られる。

tsconfig.paths.json

.json

{
  "compilerOptions": {
    "paths": {
      "components/*": ["./components/*"],
    }
  }
}

• baseUrlが"src"なのでsrcからの相対パスにする。
  "components/*": ["./src/components/*"] にしちゃダメ

結論

importの相対パス地獄から解放されると同時にVS Codeの補完も使える。
VS Codeは天才なのでextendsで指定したファイルのpathsも読み込んでくれるらしい。
create-react-app は paths を消すのをやめろ。
create-react-app は baseUrl で "." を使用可能にしろ。