Angular 2+에서 사용하지 않는 가져 오기 및 선언을 제거하는 방법이 있습니까?


139

최근에 회사를 떠난 다른 개발자로부터 엉망인 코드를 가져 오도록 할당되었습니다.

Visual Studio Code의 플러그인이나 가져 오기 및 참조를 빠르고 효과적으로 정리하고 구성하는 데 도움이되는 다른 수단이 있는지 궁금합니다.

예를 들어, 이와 같은 수백 가지의 수입품이있을 수 있습니다

import { AutoCompleteModule,InputSwitchModule } from 'primeng/primeng';
import { ListboxModule } from 'primeng/primeng';

비슷하게 변환 될 수

import { AutoCompleteModule,
         InputSwitchModule,
         ListboxModule  } from 'primeng/primeng';

또는 app.module 또는 전체 프로젝트를 통해 모든 구성 요소에서 사용하지 않는 가져 오기 및 선언을 자동으로 제거하는 것과 같은 다른 기능?

의견을 보내 주셔서 감사합니다!


또한 구성 요소로의 불필요한 가져 오기가 특히 성능을 저하시키는 지 궁금합니다.
Marcidius

8
stackoverflow.com/a/49697144/3914072 vscode 1.22 Shift + Alt + O-저에게 효과적입니다!
Rajab Shakirov

명령 행 (또는 자식 후크)에서도 수행 할 수 있습니다 npmjs.com/package/organize-imports-cli
가시

답변:


169

Visual Studio Code는 편집 (의견 및 다른 사람들이 제안한 바와 같이) 다음 기본 바로 가기 키 와 함께 "가져 오기 구성"명령으로 내장되어이 기능을 제공합니다 .

optionMac의 경우 + Shift+O

Alt Windows의 경우 + Shift +O


원래 답변 :

이 Visual Studio 코드 확장이 당신의 필요로 충분하기를 바랍니다 : https://marketplace.visualstudio.com/items?itemName=rbbit.typescript-hero

다음과 같은 기능을 제공합니다.

  • 프로젝트 또는 라이브러리의 가져 오기를 현재 파일에 추가
  • 커서 아래에 현재 이름에 대한 가져 오기 추가
  • 하나의 명령으로 파일의 모든 누락 된 가져 오기 추가
  • 기호를 제안하고 작성한 코드를 수정하는 필요한 가져 오기 "전구 기능"을 자동으로 추가하는 Intellisense
  • 가져 오기 정렬 및 구성 ( 미사용 정렬 및 제거 )
  • 열린 TS / TSX 문서의 코드 개요보기
  • JavaScript에 대한 모든 멋진 것들! (하지만 실험 단계, 아래에 더 나은 설명이 있습니다.)

Mac의 경우 : control+ option+o

승리 : Ctrl+ Alt+o


1
이 부가 기능으로 전환 해 주셔서 감사합니다. 방금 설치하기 전까지는 작은 기능을 처리하기 위해 자동 가져 오기 확장 기능을 설치했습니다 (자동 가져 오기). 그러나 TypeScript Hero를 설치 한 후 ... 와우, import 문 자체에서 알파벳 순서로 종속성 정렬, 구성 요소 클래스 내에서 사용되지 않는 가져 오기 제거 등 필요한 모든 작업을 수행합니다!
Marcidius

2
2018 년 TS Hero의 프로젝트 관리자 VS Code에서 직접 주요 기능을 구현 한 후 더 이상 사용되지 않기 때문에 확장을 중단 할 것이라고 밝혔다 (다른 의견 참조).
mattarau

2
Alt+Shift+O수입품을 다시 주문하지 않고 전화 할 수있는 방법이 있습니까?
XCS

Linux의 경우 Alt + Shift + O
manuman94

155

Visual Studio Code Release 1.22부터는 확장 할 필요없이 무료로 제공됩니다.

Shift+ Alt+O 가 당신을 돌볼 것입니다.


1
좋은! 나는 ctrl + shift +-를 영원히 사용 해 왔으며 이제 바로 가기를 찾아서 변경할 수 있습니다.
GeorgiG

설치해야했는데 1.37.1에 설치되지 않았습니다.
old-monk

57

Visual Studio 사용자가 많으면 환경 설정을 열고 설정에 다음을 추가하면됩니다 .json :

...
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
  "source.organizeImports": true
}
....

희망적으로 이것은 도움이 될 수 있습니다!


3
ESLint Prettier 플러그인과 충돌하는 것 같습니다. 한 줄 가져 오기를 시도하지만 ESLint가 여러 줄로 나누려고합니다.
Richard

@Richard와 같은 문제입니다. 공개 된 문제인 것 같습니다 -github.com/prettier/prettier-vscode/issues/716
Craig

가져 오기를 정렬 상태로 유지하면서 사용하지 않는 가져 오기 제거를 비활성화하는 방법이 있습니까?
sunknudsen

좋은 대답입니다. 연령이 찾고
아미르 아프 리디

41

사용되지 않은 가져 오기, 코드 또는 변수를 감지하려면 tsconfig.json 파일 에이 옵션이 있는지 확인하십시오.

"compilerOptions": {
    "noUnusedLocals": true,
    "noUnusedParameters": true
}

다음과 같이 설치하지 않으면 형식 스크립트 컴파일러를 설치하십시오.

npm install -g typescript

그리고 tslint에 특별히 큰 프로젝트에 Vcode에 설치된 확장이 나를 위해 일하지만, 활성화 한 후 나는 CPU 사용량의 증가 금액을 확인할 수 있습니다.

또한 사용 권 해드립니다 것이다 타이프 라이터 영웅 귀하의 수입을 주관 확장.


41

VSCode v.1.24 및 TypeScript v.2.9 이후 :

Mac의 경우 : option+ Shift+O

승리 : Alt+ Shift+O


7
일부에게는 더 중요한 명령은 다음 Organize Imports과 같습니다.editor.action.organizeImports
pcnate

@pcnate 가져 오기를 정렬 상태로 유지하면서 사용하지 않는 가져 오기 제거를 비활성화하는 방법이 있습니까?
sunknudsen

11

이 스레드에는 이미 많은 좋은 답변이 있습니다! 나는 이것을 자동으로 시도하는 누군가를 돕기 위해 이것을 게시 할 것입니다 ! 전체 프로젝트에서 사용하지 않은 가져 오기를 자동으로 제거하려면이 기사 가 도움이되었습니다.

이 기사에서 저자는 다음과 같이 설명합니다.

다음과 같은 독립형 tslint 파일을 만드십시오.

{
  "extends": ["tslint-etc"],
  "rules": {
    "no-unused-declaration": true
  }
}

그런 다음 다음 명령을 실행하여 가져 오기를 수정하십시오.

 tslint --config tslint-imports.json --fix --project .

발생하는 다른 오류를 수정하십시오. (내가 했어)

그런 다음 프로젝트를 빌드하여 작동하는지 확인하십시오.

ng build

또는

ng build name_of_project --configuration=production 

끝 : 올바르게 빌드되면 가져 오기가 자동으로 성공적으로 제거되었습니다!

참고 : 이것은 불필요한 가져 오기만 제거합니다. 앞에서 언급 한 명령 중 하나를 사용할 때 VS Code가 수행하는 다른 기능은 제공하지 않습니다.


나는 Could not find implementations for the following rules specified in the configuration: no-unused-declaration 이 솔루션이 더 이상 작동하지 않는다고 생각한다.
유수프 칸

나는 tslint 버전을 사용하고 있습니다5.20.1
Yousuf Khan

0

로 이동 tslint.json하여 속성 값 no-unused-variablefalse


3
이것은 OP가 요청한 것과 정확히 반대입니다. 사용하지 않은 변수를 원하지 않기 때문에 no-unused-variable사실이어야합니다. 요청 된 사항은 이미 답변 된 수정 (미사용 변수 제거)을 자동으로 수행 할 수 있는지 여부입니다.
mattarau
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.