create-react-appで作成したアプリで絶対パスを利用できるようにする

やりたい事

通常、コンポーネント内で別コンポーネントを呼び出す際は以下のようにimport文を定義します。

Top.tsx

import Introduction from "../organisms/Introduction";

const Top = () => {
  return <Introduction />;
};
export default Top;

Reactでは別コンポーネントの呼び出しが頻発する為、../と毎回記述する事は面倒です。
本記事の内容を実施する事でimport Introduction from "organisms/Introduction";と書けるようにしたいと思います。

方針

パスaliasを設定する方法と、絶対パス指定できるようにする方法があるようです。
前者の方法はtsconfig.jsonにエイリアス指定をする方法がよく紹介されていますが、create-react-appを利用した場合、実行時にreact-scripts によってオプションが自動的書き換えられてしまうようです。
回避する豊富もありますが、公式に絶対パスの指定を有効にする方法が記載されてましたので今回はそちらを採用していきます。

実現方法

ドキュメント通りにtsconfig.jsonに以下の記述を追加します。

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

設定を追加する事でコンポーネント内で別コンポーネントを絶対パスでimportする事が可能になります。

Top.tsx

import Introduction from "organisms/Introduction";

const Top = () => {
  return <Introduction />;
};
export default Top;

vscode側もあわせて設定する

絶対パスで指定可能になりましたが、このままではvscodeにて自動importされた時にimport Introduction from "../organisms/Introduction";となってしまいます。
自動インポートの際も絶対パスを適用したいので以下のようにオプション値を加えます。

.vscode/settings.json

{
  "typescript.preferences.importModuleSpecifier": "non-relative"
}

※プロジェクトディレクトリ以下に作成する事をおすすめします。

まとめ

小さな事ですが、開発体験向上につながるので是非とも設定したい内容です。
正直デフォルトでいい気もするのですが、ディレクトリ構造が変えやすいよう意図的に設定しているのだろうか、、、

参考リンク