টাইপস্ক্রিপ্ট সহ এসিলিন্ট ব্যবহার - মডিউলটিতে পাথ সমাধান করতে অক্ষম

Question 1

আমার ফাইল অ্যাপ.স্পেক.সেটে আমার এই আমদানি রয়েছে :

import app from './app';

যা এই টাইপস্ক্রিপ্ট ত্রুটির কারণ করে

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

./app.ts এর অস্তিত্ব আছে তবে আমি .ts ফাইলটি একটি .js ফাইলে সংকলন করি নি। আমি .ts ফাইলটি একটি .js সংকলন করার সাথে সাথে ত্রুটিটি চলে যায়।

তবে, যেহেতু এসলিন্টের টাইপস্ক্রিপ্টের সাথে কাজ করার কথা, তাই এটি .js দিয়ে নয় .ts দ্বারা মডিউলগুলি সমাধান করা উচিত।

আমি আমার eslintকনফিগার ফাইলে টাইপস্ক্রিপ্ট তথ্যও যুক্ত করেছি :

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

আমি কীভাবে এসলিন্টটি কনফিগার করতে পারি যাতে এটি .js না দিয়ে .ts দিয়ে মডিউলগুলি সমাধান করার চেষ্টা করে?

চিয়ার্স!

সম্পাদনা # 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",

এখানে এসেলিন্ট-প্লাগইন-আমদানির বর্ণনা হিসাবে .eslintrc.js এ "প্রসারিত" এর নীচে

Question 5

ব্যবহার করার সময় "6.8.0": "eslint" সঙ্গে "টাইপ করা বিষয়": "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থেকে ESLint- এ উলামের সেটিংস লোড করতে পারে :

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

Question 7

যারা babel-moduleকেবল ব্যবহার করেন তাদের জন্য extensionsএটি এমন কিছু হবে:

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

Question 8

উভয় ts এবং eslint আমার দিকে , সুতরাং আমাকে আমার .eslintrc ফাইলে নিম্নলিখিতটি যুক্ত করতে হয়েছিল :

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

আমার ক্ষেত্রে, ইএসলিন্ট 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 / घटक / ইনপুট => উপাদান / ইনপুট

src / api / বহিরাগত / অনুরোধ => বাহ্যিক / অনুরোধ

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

এটি এসিলিন্ট ^ 6.1.0 এর জন্য উদাহরণস্বরূপ

Question 12

আমার ক্ষেত্রে:

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]

পঠন: https://www.npmjs.com/package/eslint-import-resolver-typescript

মন্তব্য: নীচে JSON ফাইলের কনফিগারেশন প্রয়োজন

    import/extensions:
        - error
        - ignorePackages // useful

Question 13

আপনি যদি আপডেট করেন .eslintrcএবং আপনারtsconfig.json অন্য জবাবগুলির পরামর্শ অনুসারে ফাইলগুলি এবং আপনার এখনও সমস্যাটি রয়েছে ... vscode পুনরায় চালু করুন art

আমি এই সমস্যাটিতে দুই ঘন্টা আটকে ছিলাম, পুরো সময়টিতে একটি সাধারণ পুনঃসূচনা সম্পাদনাটিকে মডিউলটি সন্ধান করে।

আশা করি এটি অন্য কারও সময় সাশ্রয় করে!