टाइपस्क्रिप्ट के साथ एस्लिंट का उपयोग करना - मॉड्यूल के लिए पथ को हल करने में असमर्थ

Question 1

मेरी फ़ाइल app.spec.ts में यह आयात है :

import app from './app';

जो इस टाइपस्क्रिप्ट त्रुटि का कारण बनता है

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

./app.ts मौजूद है, लेकिन मैंने .js फ़ाइल में .ts फ़ाइल संकलित नहीं की है। जैसे ही मैं .ts फ़ाइल को .js पर संकलित करता हूं, त्रुटि दूर हो जाती है।

हालाँकि, चूंकि एस्लिंट को टाइपस्क्रिप्ट के साथ काम करना चाहिए, इसलिए इसे .ts के साथ मॉड्यूल को हल करना चाहिए, न कि .js को।

मैंने अपनी eslintकॉन्फ़िग फ़ाइल में टाइपस्क्रिप्ट जानकारी भी जोड़ी है :

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

मैं एस्लिंट को इस तरह से कैसे कॉन्फ़िगर कर सकता हूं कि यह मॉड्यूल के साथ .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;

Question 2

आप इस स्निपेट को अपनी .eslintrc.jsonकॉन्फ़िगरेशन फ़ाइल में जोड़कर ESLint मॉड्यूल आयात रिज़ॉल्यूशन सेट कर सकते हैं :

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

रिज़ॉल्वर के बारे में अधिक जानकारी: https://github.com/benmosher/eslint-plugin-import#resolvers ।

Question 3

यह मेरे लिए है:

.eslintrc.js

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

Question 4

मेरे पास एक ही समस्या थी और मैं केवल इसका उपयोग करने में सक्षम था

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

के रूप में "विस्तार" के अंतर्गत .lllrrc.js यहां बताए जा रहे हैं जैसे कि एस्लिंट-प्लगइन-आयात

Question 5

"एस्लिंट" का उपयोग करते समय : "टाइपस्क्रिप्ट" के साथ "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",
  ...
}

Question 6

यह एकमात्र समाधान था जिसने मेरे लिए काम किया।

सबसे पहले, आपको इस पैकेज को स्थापित करने की आवश्यकता है:

yarn add -D eslint-import-resolver-typescript

फिर .eslintrcइसे अपनी फ़ाइल में जोड़ें ताकि यह आपके tsconfig.jsonईएसएलएन्ट से अन्य सेटिंग्स को लोड कर सके:

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

Question 7

जो लोग इसका उपयोग करते हैं, babel-moduleवे सिर्फ extensionsइतना जोड़ते हैं कि यह कुछ इस तरह होगा:

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

Question 8

Ts और eslint दोनों मुझ पर भौंक रहे थे, इसलिए मुझे अपनी .llintrc फ़ाइल में निम्न जोड़ना पड़ा।

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

Question 9

मुझे टाइपस्क्रिप्ट आयात को विस्तार में जोड़ना था और फिर नियमों में आयात बंद करना था:

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

Question 10

मेरे मामले में, ESLint नहीं प्रकार से स्थापित हल करने में सक्षम था DefinitelyTyped( @type/संकुल), तो मैं उन्हें कहाँ खोजने के लिए निर्दिष्ट करने के लिए किया था .eslintrcइस तरह:

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

मैं "typescript": {}चूक का भी उपयोग करता हूं, जो मूल रूप से कॉन्फ़िगर का उपयोग करने के लिए है tsconfig.jsonऔर मैंने eslint-import-resolver-typescriptइसे काम करने के लिए स्थापित किया है।

Question 11

मामले में, अगर किसी को भी बाल निर्देशिका का समर्थन करने की आवश्यकता है। एक उदाहरण के लिए, यह समर्थन करता है

src / Components / input => घटक / इनपुट

src / api / external / request => बाहरी / अनुरोध

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

यह उदाहरण के लिए काम कर रहा है ^ 6.1.0

Question 12

यदि आपने अपनी .eslintrcऔर tsconfig.jsonफ़ाइलों को अन्य उत्तरों में सुझाए अनुसार अपडेट किया है, और आपको अभी भी समस्या है ... vscode को पुनरारंभ करें।

मैं दो घंटे के लिए इस समस्या पर अटक गया, जबकि एक सरल पुनरारंभ ने संपादक को मॉड्यूल ढूंढ लिया होगा।

आशा है कि यह किसी और को समय बचाता है!

Question 13

पहले "plugin:import/typescript"नीचे दिए गए विस्तार में जोड़ें :

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

फिर नियमों के तहत नीचे

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