環境

gatsby: 3.10.2
gatsby-plugin-root-import: 2.0.7
VSCode: 1.59.1

やりたいこと

Gatsby.js+TypeScriptを使ったプロジェクトで、相対パスではなく絶対パスでimportしたい。

例えば、下記のようなディレクトリ構造のとき、

.
├── README.md
├── gatsby-config.js
├── node_modules
├── package-lock.json
├── package.json
├── public
├── src
│   ├── components
│   │   └── button.tsx  // これをimportしたい
│   └── pages
│       ├── index.tsx
│       └── hoge
│           └── fuga
│               └── page.tsx  // ここから
└── tsconfig.json

↓のように書いているのを、

page.tsx

import Hoge from '../../../components/button'

↓のように書けるようにしたい、

page.tsx

import Hoge from 'components/button'

というものです。

gatsby-plugin-root-importを使う

絶対パスでimportできるように、モジュールとエイリアスを解決するようWebpackを設定してくれる便利なプラグインgatsby-plugin-root-importを使います。

導入は簡単2ステップ。

1. プラグインをインストール

npm install -D gatsby-plugin-root-import

2. gatsby-configに追記

gatsby-config.js

module.exports = {
  ...
  plugins: [
    ...
    'gatsby-plugin-root-import'
  ]
}

これだけで、 src 配下のファイルに対して絶対パスでのimportが可能となります。ちなみに、対象とするディレクトリを変更したい場合などは、プラグインのオプションで指定することも可能です。

JSの場合はこれで完了ですが、TypeScriptを使っている場合にはVSCode上でimportの箇所にエラーが出てしまうため、追加で設定を行います。

VSCodeのエラーを消す

下記のように、 tsconfig.json に baseUrl を指定してやればOKです。

tsconfig.json

{
  "compilerOptions": {
    ...
    "baseUrl": "./src/"
  }
}

また、この設定により、自動import時にも絶対パスで記述されるようになります。快適！

おわりに

掲題の件で調べると eslint-import-resolver-typescript を使う方法などが見つかり、色々と試しましたが自分の環境ではなかなかうまくいかず、最終的にシンプルな方法でうまくいったのでメモとして残しておきます。