Sử dụng eslint với typecript - Không thể giải quyết đường dẫn đến mô-đun

Tôi có lần nhập này trong tệp app.spec.ts của mình :

import app from './app';

Nguyên nhân gây ra lỗi Loại chữ này

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

./app.ts không tồn tại, nhưng tôi chưa biên dịch tệp .ts thành tệp .js. Ngay sau khi tôi biên dịch tệp .ts thành .js, lỗi sẽ biến mất.

Tuy nhiên, vì eslint được cho là hoạt động với typecript, nó sẽ giải quyết các mô-đun bằng .ts chứ không phải .js.

Tôi cũng đã thêm thông tin typecript vào eslinttệp cấu hình của mình :

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

Làm cách nào để tôi có thể cấu hình eslint theo cách mà nó cố gắng giải quyết các mô-đun bằng .ts chứ không phải .js?

Chúc mừng!

CHỈNH SỬA # 1

Nội dung của 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;

Bạn có thể đặt độ phân giải nhập mô-đun ESLint bằng cách thêm đoạn mã này vào .eslintrc.jsontệp cấu hình của mình :

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

Thông tin thêm về trình phân giải: https://github.com/benmosher/eslint-plugin-import#resolvers .

Điều này làm điều đó cho tôi:

.eslintrc.js

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

Tôi đã gặp vấn đề tương tự và tôi chỉ có thể khắc phục nó bằng cách sử dụng

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

dưới "expand" trong .eslintrc.js như mô tả ở đây eslint-plugin-import

Khi sử dụng "eslint": "6.8.0" với "typecript ": "3.8.3" ngoài việc thêm phần sau vào .eslintrc:

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

Bạn cũng cần thêm dòng này vào tsconfig.jsonbên dưới compilerOptions:

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

Đây là giải pháp duy nhất phù hợp với tôi.

Trước tiên, bạn cần cài đặt gói này:

yarn add -D eslint-import-resolver-typescript

Sau đó, thêm cái này vào .eslintrctệp của bạn để nó có thể tải cài đặt bí danh từ của bạn tsconfig.jsonvào ESLint:

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

đối với những người sử dụng babel-modulechỉ cần thêm vào extensionsvì vậy nó sẽ giống như thế này:

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

Cả ts và eslint đều sủa tôi, vì vậy tôi phải thêm phần sau vào tệp .eslintrc của mình :

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

Tôi đã phải thêm nhập bảng chữ để mở rộng và sau đó tắt nhập trong các quy tắc:

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

Trong trường hợp của tôi, ESLint không thể giải quyết các loại được cài đặt từ DefinitelyTyped( @type/gói), vì vậy tôi phải chỉ định nơi tìm chúng trong .eslintrcnhư sau:

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

Tôi cũng sử dụng tính năng "typescript": {}xác định, về cơ bản để sử dụng cấu hình từ tsconfig.jsonvà tôi đã eslint-import-resolver-typescriptcài đặt để nó hoạt động.

Trong trường hợp, nếu ai cần cũng hỗ trợ thư mục con. Ví dụ, nó hỗ trợ

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

Đây là ví dụ làm việc cho eslint ^ 6.1.0

trong trường hợp của tôi:

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]

đang đọc: https://www.npmjs.com/package/eslint-import-resolver-typescript

nhận xét: tệp JSON cần cấu hình bên dưới

    import/extensions:
        - error
        - ignorePackages // useful

Nếu bạn đã cập nhật tệp .eslintrcvà tsconfig.jsontệp của mình như được đề xuất trong các câu trả lời khác và bạn vẫn gặp sự cố ... hãy khởi động lại vscode.

Tôi đã gặp sự cố này trong hai giờ, tất cả trong khi khởi động lại đơn giản sẽ khiến trình chỉnh sửa tìm thấy mô-đun.

Hy vọng điều này tiết kiệm thời gian cho người khác!