programing

eslint를 typescript와 함께 사용 - 모듈 경로를 확인할 수 없습니다.

lastmoon 2023. 3. 13. 20:47
반응형

eslint를 typescript와 함께 사용 - 모듈 경로를 확인할 수 없습니다.

app.spec.ts 파일에 다음과 같은 Import가 있습니다.

import app from './app';

이로 인해 이 Typscript 오류가 발생합니다.

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

./app.ts는 존재하지만 .ts 파일을 .js 파일로 컴파일하지 않았습니다..ts 파일을 .js로 컴파일하면 오류가 사라집니다.

단, eslint는 typescript로 동작하기 때문에 .js가 아닌 .ts로 모듈을 해결해야 합니다.

또한 제 타이프스크립트 정보도 추가했습니다.eslint설정 파일:

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

ESLint 모듈의 Import 해결을 설정하려면 , 다음의 스니펫을 에 추가합니다..eslintrc.json컨피규레이션파일:

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

리졸바에 대한 자세한 내용은http://https://github.com/benmosher/eslint-plugin-import#resolvers 를 참조해 주세요.

저도 같은 문제가 있어서 typescript 플러그인을 에 추가해야만 해결할 수 있었습니다..eslintrc, 의 옵션을 사용합니다.

  extends: [
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:import/typescript",
  ],

이것이 나에게 효과가 있는 유일한 해결책이었다.

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

yarn add -D eslint-import-resolver-typescript

그리고 이것을 당신의 에 추가하세요..eslintrc에일리어스 설정을 로딩할 수 있도록,tsconfig.jsonESLint:

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

이것으로 끝입니다.

.eslintrc.displays

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

내 경우엔 옷을 갈아입어야 했다.

import { SetOptional, SetRequired } from 'type-fest';

로.

import type { SetOptional, SetRequired } from 'type-fest';

"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",
  ...
}

업데이트한 경우.eslintrc그리고.tsconfig.jsonvscode 재시작이라는 문제가 여전히 남아 있습니다.

사용하시는 분들을 위해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"]
            }
        }
    }
}

첫 번째 추가"plugin:import/typescript"under는 다음과 같이 확장됩니다.

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

규칙상으로는

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

제 경우 ESLint는 다음 버전에서 설치된 유형을 해결할 수 없었습니다.DefinitelyTyped(@type/패키지)에서 찾을 위치를 지정해야 했습니다..eslintrc다음과 같습니다.

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

저도 덧붙였습니다."typescript": {}이는 기본적으로 에서의 Configuration을 사용하기 위한 것입니다.tsconfig.json그리고 나는 그렇게 했다.eslint-import-resolver-typescript인스톨 되어 있습니다.

Import 시locale파일(예:import localeFr from '@angular/common/locales/en';） 。.mjs내선 번호

여기 나의 발췌가 있다..eslintrc.json:

  ...
  "extends": [
    ...
    "plugin:import/recommended",
    "plugin:import/typescript",
    ...
  ],
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".ts", ".mjs"]
      }
    }
  },
  "rules": {
    ...
  }
  ...

편집:

Import 시HttpCLient또는HttpClientModule에러가 재발했습니다.제가 알게 된 바로는,.d.ts리스트의 확장이 문제를 해결했습니다.또한 이 문제는 더 말이 됩니다..mjs(서양속담, 친구속담)

, 여기 저의 모습이 있습니다..eslintrc.json:

  ...

  {
    "files": ["*.ts"],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
      "project": ["tsconfig.json"],
      "createDefaultProgram": true
    },
    "settings": {
      "import/resolver": {
        "node": {
          "extensions": [".ts", ".d.ts"]
        }
      }
    },
    "extends": [
      "eslint:recommended",
      "plugin:import/recommended",
      "plugin:import/typescript",
      "plugin:@typescript-eslint/recommended",
      "plugin:@angular-eslint/recommended",
      "plugin:@angular-eslint/ng-cli-compat",
      "plugin:@angular-eslint/ng-cli-compat--formatting-add-on",
      "plugin:@angular-eslint/template/process-inline-templates"
    ],
    "rules": {
      ...
    }
  }

  ...

만, (@angular-eslint, @angular-eslint, @angular-eslint)가 있을 수 있습니다.extends를 선택합니다.

확장자에 타이프스크립트 Import를 추가한 후 규칙에서 Import를 해제해야 했습니다.

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

저는 단순히 eslint-import-resolver-node를 설치했을 뿐입니다.

yarn add -D eslint-import-resolver-node
# or
npm install eslint-import-resolver-node --save-dev

자녀 디렉토리도 지원해야 할 경우.예를 들어, 이것은

  1. src/components/input => 컴포넌트/입력

  2. src/api/module/request => 외부/요구

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

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

ts monorepo의 상황은 IDE에서 보풀 에러가 발생하지 않고 모든 에일리어스는 정상적으로 해결되었지만 프로젝트 중 하나에서 eslint를 실행하자 마자 문제가 발생하였습니다.

error  Unable to resolve path to module

합니다.tsconfigfilename을 클릭합니다.

요약하면 TS, 에일리어스 및 모노레포가 있는 사용자의 경우:

  • eslint-import-resolver-typescript
  • eslintrc.js그림 및기타 및 ):
    'import/resolver': {
      node: {
        paths: 'packages/*/src',
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
      },
      typescript: {
        alwaysTryTypes: true,
        project:[
         path.resolve(__dirname, '.tsconfig.json'), // root tsconfig
         path.resolve(__dirname, './packages/projA/tsconfig.json'),
         path.resolve(__dirname, './packages/projB/tsconfig.json'),
         /* ...rest of projects path to its tsconfig */
        ],
      },
  • eslintrc.js★★★★
{
 ...,
   'plugin:import/recommended',
   'plugin:import/typescript',
}
  • eslintrc.js★★★★★★★★★★★★★★★★★★:
  plugins: ['@typescript-eslint', ..., 'import'],
  • eslintrc.js Options) 은 parser Options(파서 옵션)에 도움이 됩니다.
        project: [
          path.resolve(__dirname, '.tsconfig.json'), // root tsconfig
          path.resolve(__dirname, './packages/projA/tsconfig.json'),
          path.resolve(__dirname, './packages/projB/tsconfig.json'),
          /* ...rest of projects path to its tsconfig */
        ],

저 같은 경우에는 eslint 캐시를 지우고 나서 굉장히 잘 작동했어요. (저희의 실 대본은

"lint:eslint": "eslint . --cache --cache-location '../../eslintcache/' --format stylish"

.)

멋진 사람들은 2022년에 이것을 해결하는 방법을 알고 있다.

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

언급URL : https://stackoverflow.com/questions/55198502/using-eslint-with-typescript-unable-to-resolve-path-to-module

반응형

'programing' 카테고리의 다른 글

모든 테스트가 실행된 후 농담 정리  (0) 2023.03.13
확인 이메일에 고객 이름 가져오기  (0) 2023.03.13
플럭스 스토어 또는 액션(또는 둘 다)이 외부 서비스에 접촉해야 합니까?  (0) 2023.03.13
표준 웹 기술로 앵귤러 대체  (0) 2023.03.13
React-router TypeError: _this.props.이력이 정의되지 않았습니다.  (0) 2023.03.13

'programing'의 다른글

  • 현재글eslint를 typescript와 함께 사용 - 모듈 경로를 확인할 수 없습니다.

관련글

댓글

티스토리툴바