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

115

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;
maximiert
quelle
1
Hast du hinzugefügt "plugins": ["@typescript-eslint"]? Docs github.com/typescript-eslint/typescript-eslint/tree/master/…
Jasmonate
1
Hey @Jasmonate, danke für die Antwort! Also habe ich gerade diese Konfiguration hinzugefügt, und obwohl ich jetzt einige typoskriptspezifische Flusen ausführen kann, löst sie mein Problem nicht. Ich bekomme immer nochUnable to resolve path to module './app'
maximedupre
Haben Sie versucht, dies in Ihre .eslintrc aufzunehmen? settings: { 'import/resolver': 'webpack' } (Ich gehe davon aus, dass der Code in Ordnung ist. Wenn nicht, müssen Sie das Webpack anweisen, auch .ts / .tsx-Dateien aufzulösen. Dies bedeutet, dass Sie Folgendes hinzufügen: `` `module.exports = {resolve: {extensions: [ '.js', '.ts']}}; `` `oder welche Dateierweiterungen Sie importieren möchten!)
Abulafia
Der obige Kommentar ist unvollständig, fürchte ich! Ich hatte keine Bearbeitungszeit mehr, weil ich zu früh die Eingabetaste gedrückt hatte! Das module.exports = { resolve: { extensions: ['.js', '.ts'] } }; Bit sollte in Ihrer Webpack-Konfiguration sein!
Abulafia
Können Sie den Inhalt Ihrer app.tsDatei hinzufügen ?
Eastrall

Antworten:

276

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 .

Eastrall
quelle
7
Ich glaube, die andere Antwort ist die richtige Lösung dafür.
Izhaki
47

Das macht es für mich:

.eslintrc.js

{
    ...
    settings: {
        ...
        'import/resolver': {
            node: {
                extensions: ['.js', '.jsx', '.ts', '.tsx'],
                moduleDirectory: ['node_modules', 'src/'],
            },
        },
    }
}
Olefrank
quelle
3
Das hat bei mir funktioniert; Selbst die Erweiterungen "plugin: import / *" haben nichts bewirkt. Die moduleDirectoryLinie, auf die gezeigt wurde, 'src/'war der Schlüssel, damit dies an meinem Ende funktioniert.
Mdawsondev
1
Das hat auch bei mir funktioniert. Beachten Sie, dass der Schlüssel "moduleDirectory" hinzugefügt werden musste.
Tevon Strand-Brown
Das Hinzufügen des moduleDirectory: ['node_modules', 'myModules /'] hat in der Tat geholfen. Ich habe eine Teilversion dieser Lösung ohne die Eigenschaft 'moduleDirectory' gesehen und sie hat nicht funktioniert. Dieser hat den Trick gemacht.
Yan Yankowski
funktioniert nach dem Hinzufügen von moduleDirectory: ['node_modules', 'src /']
unterstreicht
41

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

Rafael Rozon
quelle
4
Vielen Dank! Hinzufügen "plugin:import/typescript"ist das, was es für mich behoben hat.
Charlax
10

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",
  ...
}
Raul Madrigal
quelle
Sehr geschätzt, um die baseUrlOptionen hinzuzufügen , rettete meinen Tag
Tomas Vancoillie
In meinem Fall musste ich .d.ts zur Liste hinzufügen - das Paket csstypes enthält nur einen index.d.ts: "settings": {"import / resolver": {"node": {"path": [" src "]," extensions ": [" .js "," .jsx "," .d.ts "," .ts "," .tsx "]}}}
httpete
6

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": {}
    },
  },
}
Diogo Capela
quelle
4

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"
        }
      }
Mr. Ghamkhar
quelle
3

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"]
            }
        }
    }
}
John Galt
quelle
Ich brauchte sowohl die "Einstellungen" als auch die "Regeln", wie in dieser Antwort beschrieben. Vielen Dank!
Robin Zimmermann
Gebell!! Hut ab
Yogi
3

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"
}
Flashmatrix
quelle
2

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.

vamcs
quelle
1

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

Yogi
quelle
-1

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
afcfzf
quelle
-1

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!

Jakob Jan Kamminga
quelle