Використання eslint з машинописом - Неможливо визначити шлях до модуля


124

У мене є цей імпорт у моєму файлі 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 повинен працювати з машинописом, він повинен вирішувати модулі за допомогою .ts, а не .js.

Також я додав інформацію про машинопис у свій eslintконфігураційний файл:

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

Як я можу налаштувати eslint таким чином, щоб він намагався вирішити модулі за допомогою .ts, а не .js?

На здоров’я!

EDIT # 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;

1
Ви додали "plugins": ["@typescript-eslint"]? Документи github.com/typescript-eslint/typescript-eslint/tree/master/…
Ясмонат

1
Привіт @Jasmonate, дякую за відповідь! Отже, я щойно додав цю конфігурацію, і хоча зараз я можу зробити певний тип-скрипт, це не вирішує моєї проблеми. Я все ще отримуюUnable to resolve path to module './app'
maximedupre

Ви пробували додати це у свій .eslintrc? settings: { 'import/resolver': 'webpack' } (Я припускаю, що код побудований нормально. Якщо ні, вам потрібно буде сказати webpack також вирішити файли .ts / .tsx, що означає додавання чогось на зразок: `` `` module.exports = {resolution: {extensions: [ '.js', '.ts']}}; `` `або будь-які розширення файлів , які ви хочете , щоб мати можливість імпорту)!
Абулафія

Боюсь, наведений коментар неповний. У мене закінчився час редагування, натиснувши Enter занадто рано! module.exports = { resolve: { extensions: ['.js', '.ts'] } }; Біт повинен бути у вашому WebPack конфігурації!
Абулафія

Чи можете ви додати вміст свого app.tsфайлу?
Eastrall,

Відповіді:


291

Ви можете встановити роздільну здатність імпорту модуля ESLint, додавши цей фрагмент у .eslintrc.jsonфайл конфігурації:

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

Більше інформації про вирішувачі: https://github.com/benmosher/eslint-plugin-import#resolvers .


9
Я вважаю, що інша відповідь є правильним рішенням для цього.
Іжакі

Здавалося, це вирішило Unable to resolve path to moduleпомилку, але зараз я все ще отримую купуMissing file extension "tsx" for [...]
Райан

Ах, 'import/extensions': 0,допомогло: stackoverflow.com/questions/56064609/…
Райан

47

Це робить це для мене:

.eslintrc.js

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

3
Це те, що мені вдалося; навіть включення розширень "plugin: import / *" нічого не зробив. moduleDirectoryЛінія вказує на 'src/'був ключ , щоб отримати цю роботу з мого боку.
mdawsondev

1
Це спрацювало і на мене. Зверніть увагу, що МОЖЛО додати ключ "moduleDirectory".
Tevon Strand-Brown

Додавання moduleDirectory: ['node_modules', 'myModules /'] справді допомогло. Я бачив часткову версію цього рішення без властивості 'moduleDirectory', і він не працював. Цей зробив трюк.
Ян Янковський

працює після додавання moduleDirectory: ['node_modules', 'src /']
підкреслення

45

У мене була та сама проблема, і я зміг її виправити лише за допомогою

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

у розділі "extends" у .eslintrc.js, як описано тут eslint-plugin-import


6
Дякую! Додавання "plugin:import/typescript"- це те, що мені це виправлено.
шарлакс

це єдиний, який працював у мене, просто додайте цей рядок і збережіть. помилка пішла відразу!
brianyang

11

При використанні "eslint": "6.8.0" з "машинописом": "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",
  ...
}

1
Дуже вдячний за додавання baseUrlопцій, врятував мій день
Томаш Ванкойлі

1
У моєму випадку мені довелося додати .d.ts до списку - пакет csstypes містить лише index.d.ts: "settings": {"import / resolver": {"node": {"paths": [" src "]," розширення ": [" .js "," .jsx "," .d.ts "," .ts "," .tsx "]}}}
httpete

7

Це було єдине рішення, яке працювало для мене.

По-перше, вам потрібно встановити цей пакет:

yarn add -D eslint-import-resolver-typescript

Потім додайте це у свій .eslintrcфайл, щоб він міг завантажити параметри псевдоніма з вашого tsconfig.jsonв ESLint:

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

5

для тих, хто використовує, babel-moduleпросто додайте extensionsтак, щоб це було приблизно так:

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

4

І ts, і eslint гавкали на мене, тому мені довелося додати наступне у свій файл .eslintrc :

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

Мені потрібні були і "налаштування", і "правила", як описано у цій відповіді. Дякую!
Робін Ціммерманн,

гавкаючи !! Капелюхи
Йог,

3

Мені довелося додати імпорт машинопису до extends, а потім вимкнути імпорт у правилах:

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

2

У моєму випадку 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

На випадок, якщо комусь також потрібно підтримати дочірній каталог. Наприклад, він підтримує

  1. src / components / input => компоненти / вхід
  2. src / api / external / request => external / request

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

Це робочий приклад для eslint ^ 6.1.0


1

Якщо ви оновили ваш .eslintrcіtsconfig.json файли файли, як запропоновано в інших відповідях, і проблема все ще залишається ... перезапустіть vscode.

Я застряг у цій проблемі дві години, і весь час простий перезапуск змусив би редактор знайти модуль.

Сподіваюся, це економить час ще комусь!


0

Спочатку додайте "plugin:import/typescript"під розширення, як показано нижче:

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

далі нижче за правилами

"rules": {
        "import/extensions": [
            "error",
            "ignorePackages",
            {
                "ts": "never"
            }
        ]
    }
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.