Używanie eslint z maszynopisem - nie można rozpoznać ścieżki do modułu

Mam ten import w moim pliku app.spec.ts :

import app from './app';

Co powoduje ten błąd maszynopisu

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

./app.ts istnieje, ale nie skompilowałem pliku .ts do pliku .js. Jak tylko skompiluję plik .ts do .js, błąd zniknie.

Jednak ponieważ eslint ma działać z maszynopisem, powinien rozwiązywać moduły z .ts, a nie .js.

Dodałem również informacje na maszynie do mojego eslintpliku konfiguracyjnego:

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

Jak skonfigurować eslint w taki sposób, aby próbował rozwiązać moduły z .ts, a nie .js?

Twoje zdrowie!

EDYCJA # 1

Treść 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;

Możesz ustawić rozdzielczość importu modułu ESLint, dodając ten fragment do .eslintrc.jsonpliku konfiguracyjnego:

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

Więcej informacji na temat resolverów: https://github.com/benmosher/eslint-plugin-import#resolvers .

Robi to dla mnie:

.eslintrc.js

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

Miałem ten sam problem i mogłem go naprawić tylko za pomocą

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

pod "extends" w .eslintrc.js, jak opisano tutaj eslint-plugin-import

W przypadku korzystania z „eslint”: „6.8.0” z „maszynopisem”: „3.8.3” oprócz dodania następujących elementów do .eslintrc:

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

Musisz również dodać tę linię tsconfig.jsonpod compilerOptions:

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

To było jedyne rozwiązanie, które działało dla mnie.

Najpierw musisz zainstalować ten pakiet:

yarn add -D eslint-import-resolver-typescript

Następnie dodaj to do swojego .eslintrcpliku, aby mógł załadować ustawienia aliasu z twojego tsconfig.jsondo ESLint:

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

dla tych, którzy używają babel-modulewystarczy dodać, extensionswięc byłoby coś takiego:

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

Zarówno ts, jak i eslint szczekali na mnie, więc musiałem dodać do mojego pliku .eslintrc :

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

Musiałem dodać import maszynopisu do rozszerzeń, a następnie wyłączyć importowanie w regułach:

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

W moim przypadku ESLint nie był w stanie rozwiązać typów zainstalowanych z DefinitelyTyped( @type/pakietów), więc musiałem określić, gdzie je znaleźć .eslintrc:

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

Używam również "typescript": {}definicji, która jest w zasadzie do używania konfiguracji z tsconfig.jsoni eslint-import-resolver-typescriptzainstalowałem ją, aby działała.

Na wypadek, gdyby ktoś również potrzebował obsługi katalogu podrzędnego. Na przykład obsługuje

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"]
       }
     }
   }
   

To działa przykład dla eslint ^ 6.1.0

Jeśli zaktualizowałeś pliki .eslintrci tsconfig.jsonzgodnie z sugestiami w innych odpowiedziach, a nadal masz problem ... uruchom ponownie vscode.

Utknąłem na tym problemie przez dwie godziny, przez cały czas prosty restart spowodowałby, że edytor znalazłby moduł.

Mam nadzieję, że to zaoszczędzi czas komuś innemu!

Najpierw dodaj "plugin:import/typescript"pod rozszerzeniami jak poniżej:

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

następnie poniżej zgodnie z zasadami

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