TypeScirptのプロジェクトにエイリアスを設定して絶対パスでimportするメモ

TypeScriptのプロジェクトを作る度に設定すると思うのでメモ。

前提 Link to heading

• Webpackでプロジェクトを管理している
• Linterはeslintを使用している

tsconfig.jsonの設定 Link to heading

tsconfig.jsonのcompilerOptionsを設定してsrc以下のディレクトリに対してエイリアスを貼る。

エイリアスになる文字は何でも良いが、私はnpm経由でimportするmoduleと混同しないように @/ を使用している。

{
  "compilerOptions": {
    ~~~
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    },
    ~~~
  }
}

Webpackのresolveの設定 Link to heading

Webpackのmoduleの解決にtsconfigで設定したエイリアスが使われるように設定する。

import { Configuration } from 'webpack';

const config: Configuration = {
  ~~~
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.json'],
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
  ~~~
};

export default config;

eslintの設定 Link to heading

Webpackでプロジェクトをビルドするだけなら上記2つの設定だけで大丈夫だが、eslintでimport/no-unresolvedを設定しているとエイリアスが解決できずエラーになる。

そこでeslint-import-resolver-webpackを導入して、eslintのimportの解決にWebpackの設定を使用するようにeslintrcに設定を加える。

まずは以下のコマンドでeslint-import-resolver-webpackを追加する。

yarn add -D eslint-import-resolver-webpack

次にeslintrcのsettingsに以下のようにWebpackの設定を使用するように設定を加える。

{
  ~~~
  "settings": {
    "import/resolver": "webpack"
  }
  ~~~
}

これでeslintでもエイリアスを認識して、エラーも出なくなる。

おまけ Link to heading

せっかくエイリアスを設定したので、親を指定した相対パスでのimportがあるとエラーになるように以下のruleをeslintrcに設定する(子を指定した相対パスはmodule内では使用したいので禁止していない)。

{
  "rules": {
    ~~~
    "import/no-relative-parent-imports": "error",
    ~~~
  }
}

これで親を指定した相対パスでのimportがあった場合eslintをかけたときにエラーで怒られるようになった。