typescript와 함께 eslint 사용-모듈 경로를 확인할 수 없음

내 파일 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와 함께 작동해야하므로 .js가 아닌 .ts로 모듈을 확인해야합니다.

또한 eslint구성 파일 에 typescript 정보를 추가했습니다 .

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

.js가 아닌 .ts로 모듈을 해결하려고 시도하는 방식으로 eslint를 구성하려면 어떻게해야합니까?

건배!

# 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;

다음 스 니펫을 .eslintrc.json구성 파일 에 추가하여 ESLint 모듈 가져 오기 분석을 설정할 수 있습니다 .

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

리졸버에 대한 추가 정보 : 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"를 사용 하는 경우 "typescript" 와 함께 "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",
  ...
}

이것은 나를 위해 일한 유일한 솔루션이었습니다.

먼저이 패키지를 설치해야합니다.

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": {}에서 CONFIGS를 사용하기위한 기본적 defnition을, tsconfig.json나는 한 eslint-import-resolver-typescript작동을 위해 설치.

누군가가 자식 디렉터리도 지원해야하는 경우. 예를 들어 다음을 지원합니다.

1. src / components / input => 구성 요소 / 입력

2. src / api / external / request => 외부 / 요청

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

이것은 eslint ^ 6.1.0의 작동 예제입니다.

다른 답변에서 제안한 대로 .eslintrc및 tsconfig.json파일을 업데이트 했지만 여전히 문제가있는 경우 vscode를 다시 시작하십시오.

나는이 문제에 2 시간 동안 갇혀 있었다. 그동안 간단한 재시작으로 에디터가 모듈을 찾게 만들었을 것이다.

이것이 다른 사람의 시간을 절약하기를 바랍니다!

먼저 "plugin:import/typescript"아래와 같이 아래 확장을 추가하십시오 .

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

그런 다음 규칙 아래

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