Visual Studio 코드 자동 가져오기

Visual Studio 코드 자동 가져오기

웹스톰에서 Visual Studio Code로 전환하는 중입니다.웹스톰의 퍼포먼스는 최악입니다.

Visual Studio Code는 필요한 의존관계를 찾아 Import하는 데 그다지 도움이 되지 않습니다.지금까지 수작업으로 하고 있습니다만, 솔직히 말하면, 수동으로 검색해야 하는 Import를 webstorm이 검색하여 추가할 때까지 15초 정도 기다리겠습니다.

@sqo-gechev https://github.com/mgechev/angular2-seed의 angular2 seed를 사용하고 있습니다.

내 baseDir에는 다음과 같은 tsconfig.json이 있습니다.

    {
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "declaration": false,
    "removeComments": true,
    "noLib": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": true,
    "pretty": true,
    "allowUnreachableCode": false,
    "allowUnusedLabels": false,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitUseStrict": false,
    "noFallthroughCasesInSwitch": true
  },
  "exclude": [
    "node_modules",
    "dist",
    "typings/index.d.ts",
    "typings/modules",
    "src"
  ],
  "compileOnSave": false
}

src/client dir에 다음과 같은 것이 하나 더 있습니다.

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "allowSyntheticDefaultImports": true
  }
}

왜 두 개가 있는지 모르겠어요.angualr 시드 프로젝트는 typecript gulp build tasks를 사용하기 때문에 컴파일이 다르다고 생각합니다.

어떻게 하면 vscoode를 더 유용하게 사용할 수 있을까요?

지금 2018년.Javascript에서를 위한 확장 Javascript Import를 사용하는 ).checkjs: true 안에서jsconfig.jsonTypeScript를 선택합니다.

자동 Import에는 add missing import quick fix의 두 가지 유형이 있습니다.이 add missing quick fix는 오류 시 전구로 표시됩니다.

그리고 자동 Import 제안.입력 시 제안 항목이 표시됩니다.또는 텍스트를 선택하고 Ctrl + Space를 눌러 제안 목록을 표시할 수 있습니다.자동 가져오기 제안을 수락하면 파일 맨 위에 가져오기가 자동으로 추가됩니다.

둘 다 JavaScript와 TypeScript에서 즉시 사용할 수 있습니다.그래도 자동 가져오기가 작동하지 않으면 문제를 해결하십시오.

아래의 다양한 플러그인을 설치하여 작업을 진행하였습니다.

대부분의 경우 클래스 이름을 입력하자마자 자동으로 가져옵니다.또는 클릭할 수 있는 전구가 표시됩니다.또는 를 누르고 "import.." 라고 입력합니다.」라고 하는 것도, 여러가지 옵션이 다양합니다.다 쓰는 편이에요.또, 인터페이스를 실장하는 실장은 도움이 되지만, 항상 기능하는 것은 아닙니다.

플러그인 목록

• npm 인텔리센스
• Angular 2 스니펫용 ngrx
• TypeScript 도구 상자
• npm
• TsTools
• 각도 조각(버전 9)
• 자동 설치 유형
• Chrome용 디버거
• TypeScript 임포터
• TypeScript 히어로
• vcode 아이콘
• 각도 파일 추가

확장 스크린샷

^{* 풀 해상도를 보려면 클릭하십시오.}

Auto Import 플러그인은 Stoates에서 사용했는데, 매우 간단합니다.

사용 가능한 모든 가져오기에 대한 코드 작업 및 코드 완료를 자동으로 검색, 구문 분석 및 제공합니다.Typescript 및 TSX와 연동됩니다.

tsconfig.app.json에서는 표준 Angular 10 앱에 다음이 있습니다.

{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

include like를 다음과 같이 변경했습니다.

  "include": [
    "src/**/*.d.ts",
    "src/**/*.ts"
  ]

나는 효과가 있었다

Javascript 프로젝트의 경우:

• 설정 플래그가 작동합니다.
• .jsconfig.json

최근에 이 문제에 부딪힌 사람이 있다면 자동 Import가 작동하도록 작업영역의 활자 스크립트를 사용하는 설정을 추가해야 한다는 것을 알게 되었습니다.이렇게 하려면 작업영역 설정에 다음 행을 추가하십시오.

{
  "typescript.tsdk": "./node_modules/typescript/lib"
}

그런 다음 vscode에서 활자 스크립트 파일을 연 상태에서 오른쪽 아래 구석에 있는 활자 스크립트 버전 번호를 클릭합니다.맨 위에 옵션이 나타나면 "작업 공간 버전 사용"을 선택한 다음 vscode를 다시 로드합니다.

이제 자동 Import가 작동합니다.

VS Code는 이 기능을 즉시 지원하지만, 기능이 작동하거나 작동하지 않을 수 있습니다.제가 알기로는 VS Code는 자동 Import에 필요한 데이터를 로드해야 합니다.이 작업은 거의 다음과 같습니다.

• 로컬 파일에서 모든 내보내기에 대한 데이터 로드
• node_modules/@types에서 모든 내보내기의 데이터를 로드합니다.
• 로컬 파일 중 하나라도 가져오는 경우에만 node_modules/{packageName}의 모든 내보내기에 대한 데이터를 로드합니다.

이것은, 다음의 코멘트에 기재되어 있습니다.https://github.com/microsoft/TypeScript/issues/31763#issuecomment-537226190

VS 코드 또는 특정 패키지의 유형 선언 중 하나의 버그로 인해 마지막 두 지점이 항상 작동하지 않습니다.이 경우 일반 Create-React-App에서는 react-bootstrap 자동 Import를 볼 수 없었습니다.마지막으로 수정한 것은 패키지 폴더를 node_modules에서 node_modules/@types로 수동으로 복사하고 형식 선언 파일(예: Button.d.ts)만 남겨두는 것이었습니다.node_modules 폴더를 삭제하면 다시 작동이 중지되기 때문에 이는 좋지 않습니다.하지만 저는 항상 수동으로 imports를 입력해야 하기 때문에 이것을 선호합니다.다음 방법을 시도했다가 실패한 후 이것이 저의 마지막 수단이었습니다.

• VS 코드 갱신 (v. 1.45.1)
• 패키지의 타입을 인스톨 합니다(예:npm install --save @types/react-bootstrap
• jsconfig.json 파일을 추가하고 다른 사람이 제안한 대로 설정을 사용하여 재생합니다.
• 자동 Import를 위해 모든 플러그인을 시험해 봅니다.

저도 같은 문제가 있었습니다.Visual Studio Code(1.45.1 버전)가 타이프스크립트 프로젝트 중 하나에 대한 Import를 자동으로 추가하지 않습니다.제 경우, 문제는 프로젝트 고유의 문제였고 VS Code에 확장을 추가할 필요가 없었습니다.

수정:

1. 더하다"importHelpers": truetsconfig.json 파일의 compileOptions 섹션으로 이동합니다.
2. VS 코드를 재시작합니다.

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
...
  },

를 채우다include에 있는 JSON 객체의 첫 번째 레벨에 있는 속성tsconfig.editor.json다음과 같습니다.

"include": [
  "src/**/*.ts"
]

나한테는 잘 먹힌다.

또한 필요에 따라 다음과 같이 다른 Typescript 파일 확장자를 추가할 수도 있습니다.

"include": [
  "src/**/*.ts",
  "src/**/*.spec.ts",
  "src/**/*.d.ts"
]

angular를 사용하고 있는 경우는, 다음의 각도와 같이 되어 있는 것을 확인해 주세요.tsconfig.json에러는 포함되어 있지 않습니다.(문제 단말기에서)

무슨 이유에선지 이 선을 두 배로 늘렸는데 나한테는 안 통했어

{
  "module": "esnext",
  "moduleResolution": "node",
}

tsconfig.json에 "typeRoots" 속성을 추가합니다.

"typeRoots": [
      "node_modules/@types",
      "node_modules/@angular",
      "node_modules/@angular/common/http"
    ]

기타 필요한 경로를 추가할 수 있습니다.

이 문제는 Typescript 버전 3.8.3에서 발견되었습니다.

인텔리센스가 가장 좋지만, 저는 자동 Import 기능도 작동하지 않는 것 같습니다.자동 Import가 동작하지 않는 경우에도 확장 설치를 시도했습니다.확장과 관련된 모든 설정을 다시 확인했습니다.마지막으로 캐시를 클리어하면 자동 Import 기능이 동작하기 시작했습니다.

C:\Users\Username\AppData\로밍\Code\Cache

VSCode 새로고침(&)

주의: (보기) 메뉴에서 표시(숨김 항목)를 선택한 경우에만 AppData를 사용자 이름으로 볼 수 있습니다.

경우에 따라서는 Import와 관련된 오류가 있다고 생각할 수 있지만, 실제로는 사용되지 않는 기능이나 API를 사용하여 코딩하고 있는 경우도 있습니다.

예를 들어 다음과 같이 코드화하려고 할 경우

컨스트럭터(http:Http) {

//...}

여기서 Http는 이미 폐지되어 새로운 버전에서는 HttpClient로 대체되어 있기 때문에 이 에러는 자동 Import 오류와 관련이 있을 수 있습니다.자세한 내용은 폐지된 API 및 기능을 참조하십시오.

타이프스크립트 임포터가 대신 작업합니다.

https://marketplace.visualstudio.com/items?itemName=pmneo.tsimporter

작업영역 내에서 자동으로 타이프스크립트 정의를 검색하고 Enter 키를 누르면 가져옵니다.

ReactJs 또는 React-Native와 같은 JavaScript 프로젝트에서는 다음 단계를 따릅니다.

1. VC 코드에는 자동으로 자동 Import 플러그인이 포함되어 있기 때문에 먼저 모든 자동 Import 플러그인을 제거합니다.

2. 프로젝트의 루트에 jsconfig.json이라는 새 파일을 추가합니다.

3. 다음 코드를 추가합니다.

   {
      "exclude": ["node_modules"]
   }
   

이 기능을 추적하여 확인할 수 있는 Visual Studio 코드 문제가 있습니다.User Voice 문제도 있었지만 Git Hub 문제로 투표를 옮겼다고 생각합니다.

TypeScript의 자동 Import 기능을 다시 사용할 수 있도록 하고 싶은 것 같습니다.여기서 TypeScript 자동 Import 문제를 추적하고 확인합니다.

'Import'를 사용하고 있다.자동 Import를 위한 Devin Abbott의 JS 플러그인. 아래 코드를 사용하여 설치할 수 있습니다.

npm install --global import-js

VScode 1.57(2021년 5월)은 네이티브 자동 Import 기능을 연상시킵니다.다음과 같이 개선:

가져오기 명세서의 완료

JavaScript 및 TypeScript에서 자동 가져오기는 제안을 수락할 때 자동으로 가져오기를 추가합니다.

VS Code 1.57을 사용하면 Import 스테이트먼트 자체를 작성할 때도 사용할 수 있습니다.

Import를 수동으로 추가해야 할 경우 시간을 절약할 수 있습니다.

언급URL : https://stackoverflow.com/questions/38210604/visual-studio-code-automatic-imports