Typecript ile eslint kullanma - Modüle giden yol çözülemiyor

Bu içe aktarma işlemi app.spec.ts dosyamda var :

import app from './app';

Bu Typescript hatasına neden olan

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

./app.ts mevcut, ancak .ts dosyasını bir .js dosyasına derlemedim . .Ts dosyasını bir .js olarak derler derlemez hata ortadan kalkar.

Bununla birlikte, eslint'in typcript ile çalışması gerektiğinden, modülleri .js değil .ts ile çözmelidir.

eslintYapılandırma dosyama da typcript bilgilerini ekledim :

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

Eslint'i modülleri .js değil .ts ile çözümlemeye çalışacak şekilde nasıl yapılandırabilirim?

Şerefe!

DÜZENLE # 1

İçeriği 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;

Bu parçacığı .eslintrc.jsonyapılandırma dosyanıza ekleyerek ESLint modülü içe aktarma çözünürlüğünü ayarlayabilirsiniz :

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

Çözümleyiciler hakkında daha fazla bilgi: https://github.com/benmosher/eslint-plugin-import#resolvers .

Bunu benim için yapıyor:

.eslintrc.js

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

Aynı sorunu yaşadım ve yalnızca kullanarak düzeltebildim

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

eslint-plugin-import burada açıklandığı gibi .eslintrc.js içinde "genişler" altında

Kullanırken "6.8.0": "eslint" ile "3.8.3": "typescript" için aşağıdakileri ekleyerek yanında .eslintrc:

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

Ayrıca bu satırı tsconfig.jsonaltına eklemeniz gerekir compilerOptions:

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

Benim için işe yarayan tek çözüm buydu.

Öncelikle bu paketi kurmanız gerekir:

yarn add -D eslint-import-resolver-typescript

Ardından .eslintrcbunu dosyanıza ekleyin, böylece takma ad ayarlarını sizden tsconfig.jsonESLint'e yükleyebilir:

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

kullananlar için babel-modulesadece ekleyin, extensionsböylece şöyle bir şey olur:

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

Hem ts hem de eslint bana havlıyordu, bu yüzden aşağıdakileri .eslintrc dosyama eklemem gerekiyordu :

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

Genişletmek için typcript içe aktarımını eklemem ve ardından kurallarda içe aktarmaları kapatmam gerekiyordu:

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

Benim durumumda, ESLint DefinitelyTyped( @type/paketlerden) yüklenen türleri çözemedi , bu yüzden onları şu şekilde nerede bulacağımı belirtmek zorunda kaldım .eslintrc:

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

Ben de kullanmak "typescript": {}gelen yapılandırmaları kullanmak için temelde defnition, tsconfig.jsonve ben var eslint-import-resolver-typescripto iş için yüklü.

Durumda, herhangi birinin alt dizini de desteklemesi gerekiyorsa. Örneğin, destekler

1. src / components / input => bileşenler / girdi

2. src / api / external / request => harici / istek

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

Bu, eslint ^ 6.1.0 için çalışan bir örnektir

benim durumumda:

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]

okuma: https://www.npmjs.com/package/eslint-import-resolver-typescript

açıklama: JSON dosyasının aşağıda yapılandırılması gerekir

    import/extensions:
        - error
        - ignorePackages // useful

.eslintrcVe tsconfig.jsondosyalarınızı diğer yanıtlarda önerildiği gibi güncellediyseniz ve hala sorun yaşıyorsanız ... vscode'u yeniden başlatın.

Bu soruna iki saat boyunca takılıp kaldım, bu arada basit bir yeniden başlatma, editörün modülü bulmasına neden olurdu.

Umarım bu, başka birine zaman kazandırır!