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

やりたいこと

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

{
  "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

{
  "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 で "." を使用可能にしろ。