typescriptでeslintを使用する-モジュールへのパスを解決できません

私のファイルapp.spec.tsにこのインポートがあります：

import app from './app';

このTypescriptエラーの原因

2:17  error  Unable to resolve path to module './app'  import/no-unresolved

./app.tsは存在しますが、.tsファイルを.jsファイルにコンパイルしていません。.tsファイルを.jsにコンパイルするとすぐに、エラーはなくなります。

ただし、eslintはtypescriptで機能することになっているため、.jsではなく.tsを使用してモジュールを解決する必要があります。

eslint設定ファイルにタイプスクリプト情報も追加しました。

"parser": "@typescript-eslint/parser",
"parserOptions": {
    "project": "./tsconfig.json"
}

.jsではなく.tsを使用してモジュールを解決しようとするようにeslintを構成するにはどうすればよいですか？

乾杯！

編集＃1

内容app.ts：

import bodyParser from 'body-parser';
import express from 'express';
import graphqlHTTP from 'express-graphql';
import { buildSchema } from 'graphql';

const app = express();

const schema = buildSchema(`
    type Query {
        hello: String
    }
`);
const root = { hello: () => 'Hello world!' };

app.use(bodyParser());
app.use('/graphql', graphqlHTTP({
    schema,
    rootValue: root,
    graphiql: true,
}));

export default app;

このスニペットを.eslintrc.json構成ファイルに追加することで、ESLintモジュールのインポート解像度を設定できます。

{
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  },
  ...
}

リゾルバーの詳細については、https：//github.com/benmosher/eslint-plugin-import#resolversをご覧ください。

これは私のためにそれをします：

.eslintrc.js

{
    ...
    settings: {
        ...
        'import/resolver': {
            node: {
                extensions: ['.js', '.jsx', '.ts', '.tsx'],
                moduleDirectory: ['node_modules', 'src/'],
            },
        },
    }
}

私は同じ問題を抱えていました、そして私はそれを使用してのみそれを修正することができました

"plugin:import/errors",
"plugin:import/warnings",
"plugin:import/typescript",

ここで説明されているように、.eslintrc.jsの「extends」の下にeslint-plugin-import

「eslint」を使用する場合：「6.8.0」と「typescript」：「3.8.3」に加えて、以下を追加します.eslintrc。

"settings": {
  "import/resolver": {
    "node": {
      "paths": ["src"],
      "extensions": [".js", ".jsx", ".ts", ".tsx"],
    }
  },
}

また、この行をtsconfig.json下に追加する必要がありますcompilerOptions：

"compilerOptions": {
  ...
  // Base directory to resolve non-relative module names.
  "baseUrl": "src",
  ...
}

これが私のために働いた唯一の解決策でした。

まず、次のパッケージをインストールする必要があります。

yarn add -D eslint-import-resolver-typescript

次に、これを.eslintrcファイルに追加して、エイリアス設定をからtsconfig.jsonESLintにロードできるようにします。

{
  "settings": {
    "import/resolver": {
      "typescript": {}
    },
  },
}

を使用する人は、をbabel-module追加するだけextensionsなので、次のようになります。

      "babel-module": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"],
        "alias": {
          "app": "./app"
        }
      }

どちらもTSとeslintは私が私に以下を追加する必要がありましたので、私に吠えた.eslintrcファイル：

{ 
    ...
    "rules": {
        ....
        "import/extensions": "off"
    },
    "settings": {
        ....
        "import/resolver": {
            "node": {
                "extensions": [".js", ".jsx", ".ts", ".tsx"]
            }
        }
    }
}

タイプスクリプトのインポートをextendsに追加してから、ルールでインポートをオフにする必要がありました。

"extends": {
    "plugin:import/typescript"
},
"rules": {
    "import/extensions": "off"
}

私の場合、ESLintはDefinitelyTyped（@type/パッケージ）からインストールされたタイプを解決できなかったので、次のようにそれらを見つける場所を指定する必要がありました.eslintrc。

"import/resolver": {
    "typescript": {},
    "node": {
        "extensions": [".js", ".ts"],
        "paths": ["node_modules/", "node_modules/@types"]
    }
},

また"typescript": {}、基本的にからの構成を使用するための定義を使用しtsconfig.json、それが機能するようにeslint-import-resolver-typescriptインストールしました。

場合によっては、子ディレクトリもサポートする必要がある場合。例として、それはサポートします

1. src / components / input =>コンポーネント/入力

2. src / api / external / request =>外部/リクエスト

   "settings": {
     "import/resolver": {
       "node": {
         "paths": ["src", "src/api"],
         "extensions": [".js", ".jsx", ".ts", ".tsx"]
       }
     }
   }
   

これはeslint ^ 6.1.0の実例です

あなたは更新した場合.eslintrcやtsconfig.json他の回答で提案されているようファイルを、そしてあなたはまだ問題を抱えている...再起動vscode。

私はこの問題に2時間立ち往生しましたが、その間、単純な再起動でエディターがモジュールを見つけました。

これが他の誰かの時間を節約することを願っています！

最初に"plugin:import/typescript"下に追加すると、次のように拡張されます。

"extends": [
    "airbnb-base",
    "plugin:import/typescript"
 ],

その後、ルールの下で

"rules": {
        "import/extensions": [
            "error",
            "ignorePackages",
            {
                "ts": "never"
            }
        ]
    }