babel-plugin-module-resolverでimportを快適にする(eslint-plugin-import + flow + path-autocomplete)

はじめに

../../../foo/barとか書きたくない。
~/components/foo/barみたいなパスで書きたい。

この文章執筆時の関連するpackageのversion

.json

{
  "babel-plugin-module-resolver": "3.1.1",
  "eslint-import-resolver-babel-module": "5.0.0-beta.0", // betaじゃないと正常に動作しなかった
  "eslint-plugin-import": "2.11.0",
  "flow-bin": "0.69.0"
}

babel-plugin-module-resolver

tleunen/babel-plugin-module-resolver

.babelrc

"plugins": [
  ["module-resolver", {
    "root": [
      "./src"
    ],
    "alias": {
      "~": "./src"
    }
  }]
]

まずは好きなようにaliasを書きます。

flow

※ flowを導入していない環境の場合は飛ばして下さい

.flowconfig

[options]
module.name_mapper='^~/\(.*\)$' -> '<PROJECT_ROOT>/src/\1'

flowが参照を解決できるようにflowconfigのoptionに記述を加えます。

ESLint

benmosher/eslint-plugin-importが入っている環境を前提にします。

.eslintrc.yml

settings:
  import/resolver:
    babel-module:
      root:
        - ./src
      alias:
        ~: ./src

ESLint側からmodule-resolverのaliasを解釈するためにtleunen/eslint-import-resolver-babel-moduleを使います。
上記のように.babelrcに記述したaliasを同様に記述することでESLintがエラーを吐かなくなります。
(エラーを吐く場合はpackageのversionを確認して下さい。この記事はeslint-import-resolver-babel-module: 5.0.0-beta.0を用いています。)

以上でbabel-plugin-module-resolverを用いたaliasを貼ったimport環境が完成です。

おまけ:VSCode

VSCodeの話になりますが、Path Autocomplete を使うことでmoduleのimportを記述するのがとてもラクになります。
というかたとえbabel-plugin-module-resolverを使ってない環境でもimportのサジェストをしてくれるのでおすすめです。

.vscode/settings.json

{
  "path-autocomplete.pathMappings": {
    "~": "${folder}/src"
  }
}

これもまた同様に.babelrcに書いたaliasを同じように書きます。
これでimport foo from '~/'と書いていくと~をsrcからで補完してくれます。
※ GIFとかなくてごめんなさい💦

おわりに

以上のセットアップで好きなようにaliasを貼って快適なmoduleのimport環境を構築することができました。
相対パスでimportするのはリファクタリングの際などに大変な思いをすることになるので、うまくaliasを使っていきましょう。

参考

• babel-plugin-module-resolver を使ってパッケージ名のエイリアスを張る + flowtype/eslint で対応する - Qiita