Verwenden von eslint mit Typoskript - Pfad zum Modul kann nicht aufgelöst werden

Ich habe diesen Import in meiner Datei app.spec.ts :

import app from './app';

Was diesen Typescript-Fehler verursacht

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

./app.ts existiert zwar, aber ich habe die .ts-Datei nicht in eine .js-Datei kompiliert. Sobald ich die .ts-Datei zu einer .js kompiliere, verschwindet der Fehler.

Da eslint jedoch mit Typoskript arbeiten soll, sollte es Module mit der .ts und nicht mit der .js auflösen.

Ich habe auch die Typoskriptinformationen in meine eslintKonfigurationsdatei eingefügt :

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

Wie kann ich eslint so konfigurieren, dass versucht wird, Module mit der .ts und nicht mit der .js aufzulösen?

Prost!

EDIT # 1

Inhalt von 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;

Sie können die Importauflösung für das ESLint-Modul festlegen, indem Sie dieses Snippet zu Ihrer .eslintrc.jsonKonfigurationsdatei hinzufügen :

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

Weitere Informationen zu Resolvern: https://github.com/benmosher/eslint-plugin-import#resolvers .

Das macht es für mich:

.eslintrc.js

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

Ich hatte das gleiche Problem und konnte es nur mit beheben

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

unter "erweitert" in .eslintrc.js wie hier beschrieben eslint-plugin-import

Bei Verwendung von "eslint": "6.8.0" mit "Typoskript": "3.8.3", und fügen Sie Folgendes hinzu .eslintrc:

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

Sie müssen diese Zeile auch tsconfig.jsonunter hinzufügen compilerOptions:

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

Dies war die einzige Lösung, die für mich funktioniert hat.

Zuerst müssen Sie dieses Paket installieren:

yarn add -D eslint-import-resolver-typescript

Fügen Sie dies dann Ihrer .eslintrcDatei hinzu, damit die Alias-Einstellungen von Ihrem tsconfig.jsonin ESLint geladen werden können:

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

für diejenigen, die verwenden, babel-modulefügen extensionsSie einfach das hinzu, so wäre es ungefähr so:

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

Sowohl ts als auch eslint bellten mich an, daher musste ich meiner .eslintrc- Datei Folgendes hinzufügen :

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

Ich musste den Typoskript-Import hinzufügen, um ihn zu erweitern, und dann die Importe in den Regeln deaktivieren:

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

In meinem Fall konnte ESLint die von DefinitelyTyped( @type/Pakete) installierten Typen nicht auflösen , daher musste ich angeben, wo sie .eslintrcwie folgt zu finden sind :

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

Ich benutze auch die "typescript": {}Definition, die im Grunde genommen für die Verwendung von Konfigurationen von dient tsconfig.jsonund die ich eslint-import-resolver-typescriptinstalliert habe, damit sie funktioniert.

Für den Fall, dass jemand auch das untergeordnete Verzeichnis unterstützen muss. Zum Beispiel unterstützt es

1. src / components / input => components / input

2. src / api / external / request => external / request

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

Dies ist ein Arbeitsbeispiel für eslint ^ 6.1.0

in meinem Fall:

npm i eslint-import-resolver-webpack eslint-import-resolver-typescript -D

settings:
    import/resolver:
        typescript: 
            - alwaysTryTypes: true // useful

        node:
            paths: [src, node_modules]
            extensions: [.js, .jsx, .ts, .tsx]

        webpack:
            resolve:
                modules: [node_modules]

Lesen: https://www.npmjs.com/package/eslint-import-resolver-typescript

Anmerkung: Die JSON-Datei muss unten konfiguriert werden

    import/extensions:
        - error
        - ignorePackages // useful

Wenn Sie Ihre .eslintrcund tsconfig.jsonDateien wie in den anderen Antworten vorgeschlagen aktualisiert haben und immer noch das Problem haben ... starten Sie vscode neu.

Ich habe mich zwei Stunden lang mit diesem Problem beschäftigt, während ein einfacher Neustart den Editor dazu gebracht hätte, das Modul zu finden.

Hoffe das spart jemand anderem die Zeit!