More than 5 years have passed since last update.

eslint-plugin-importでTypeScriptのimport問題を解決する

Posted at 2019-05-13

JavaScript→TypeScript化してる中で詰まったのでメモ。
（JavaScriptとTypeScriptが混在してるプロジェクト）

事象

こういうやつ

$ eslint app/javascript/components

/path/to/app/javascript/components/Container/Foo/index.js
  5:25  error  Unable to resolve path to module '../../../Bar'  import/no-unresolved
  5:25  error  Missing file extension for "../../../Bar"        import/extensions

✖ 2 problems (2 errors, 0 warnings)

解決

import/no-unresolvedはwebpackを使ってるので eslint-import-resolver-webpack を使う。
import/extensionsは、設定を修正する。

プラグインを追加して、

yarn add -D eslint-import-resolver-webpack

設定ファイルに追記します。

.eslintrc

{
  "rules": {
+    "import/extensions": [".js", ".jsx", ".json", ".ts", ".tsx"],

...

+  "settings": {
+    "import/resolver": {
+      "webpack": {
+        "config": "webpack.config.js"
+      }
+    }
+  }
}

以上です

参考

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up