React: import時のaliasを設定するときはWebpack、TypeScript、ESLintの3つを対応しなければならない件

ReactとTypeScript & ESLintで開発するのがここ最近好き。tslintさようなら、@typescript-eslintこんにちは。

そんな中でaliasを設定しよう思ったとき、三カ所も設定する必要があったので覚え書き。

以下、想定としては、ルート直下に/srcがあって、それに対するaliasを~/で書きたいというもの。Nuxtっぽい感じ。
ex) import Awesome from '~/components/Awesome';

1. Webpack の resolve.alias

公式にもある通り、まず何よりバンドルする際にきちんと認識してもらわないと始まらない終わらない。

webpack.config.js

  resolve: {
    alias: {
      '~': path.resolve(rootPath, '/src'), // rootPath にはルートのパスが入る。
    },
    extensions: ['.ts', '.tsx', '.js', '.jsx'],
  },

2. TypeScript としての alias

tsconfig.jsにも設定する必要がある。

tsconfig.js

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

この際、"baseUrl"が必要なのと、"~/*のように正規表現的な書き方をする必要がある点に注意。

3. ESLint の import alias

これだけ、全然想定していなかった。勝手には判断してくれなかった。

まぁ調べてみたら、eslint-import-resolver-webpackを導入して、settingsに書くだけであった。

.eslintrc.js

  settings: {
    react: {
      version: 'detect',
    },
    'import/resolver': {
      webpack: { config: path.join(__dirname, '/config/webpack.config.js') },
    },
  },

ちなみに、Webpackを使用しないプロジェクトの場合、eslint-import-resolver-typescript packageをインストールした後、settingsの'import/resolver'にtypescript: {},を追加して typescript のサポートを有効化する必要がある。

.eslintrc.js

'import/resolver': {
  node: {
    extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
  },
  typescript: {},
},