Використання 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 повинен працювати з машинописом, він повинен вирішувати модулі за допомогою .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;

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

{
  "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",

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

При використанні "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",
  ...
}

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

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

yarn add -D eslint-import-resolver-typescript

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

{
  "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 => external / request

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

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

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

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

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

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

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

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

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