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

2467 ワード
TypeScript ESLint TypeScript テキストリンク

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)

解決

プラグインを追加して、

yarn add -D eslint-import-resolver-webpack

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

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

...

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

以上です

参考