การใช้ eslint กับ typescript - ไม่สามารถแก้ไขเส้นทางไปยังโมดูล

ฉันมีการนำเข้านี้ในไฟล์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 ควรจะทำงานกับ typescript จึงควรแก้ไขโมดูลที่มี. ts ไม่ใช่. js

ฉันได้เพิ่มข้อมูล typescript ในeslintไฟล์กำหนดค่าของฉันด้วย:

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

ฉันจะกำหนดค่า eslint ในลักษณะที่พยายามแก้ไขโมดูลที่มี. ts ไม่ใช่. js ได้อย่างไร

ไชโย!

แก้ไข # 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"]
      }
    }
  },
  ...
}

ข้อมูลเพิ่มเติมเกี่ยวกับ resolvers: 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",

ภายใต้ "ขยาย" ใน. eslintrc.js ตามที่อธิบายไว้ที่นี่eslint-plugin-import

เมื่อใช้"eslint": "6.8.0"กับ"typescript": "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"]
            }
        }
    }
}

ฉันต้องเพิ่มการนำเข้า typescript เพื่อขยายแล้วปิดการนำเข้าในกฎ:

"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": {}defnition ซึ่งโดยพื้นฐานแล้วสำหรับการใช้การกำหนดค่าจากtsconfig.jsonและฉันได้eslint-import-resolver-typescriptติดตั้งเพื่อให้ใช้งานได้

หากคุณอัปเดต.eslintrcและtsconfig.jsonไฟล์ของคุณตามที่แนะนำในคำตอบอื่น ๆ แล้วและคุณยังคงพบปัญหา ... รีสตาร์ท vscode

ฉันติดปัญหานี้เป็นเวลาสองชั่วโมงในขณะที่การรีสตาร์ทอย่างง่ายจะทำให้ตัวแก้ไขพบโมดูล

หวังว่านี่จะช่วยคนอื่นได้!

ในกรณีถ้าใครต้องการสนับสนุนไดเรกทอรีลูกด้วย ตัวอย่างเช่นรองรับ

1. src / components / input => ส่วนประกอบ / อินพุต

2. src / api / external / request => ภายนอก / request

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

นี่คือตัวอย่างการทำงานสำหรับeslint ^ 6.1.0

เพิ่มครั้งแรก"plugin:import/typescript"ภายใต้การขยายดังนี้:

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

จากนั้นด้านล่างภายใต้กฎ

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