Webstorm 및 Angular에 대한 상위 12 개 생산성 팁 : Part 2

이 기사는 두 부분으로 제시된 Angular 개발자를위한 12 개의 생산성 부양 Webstorm 기능을 탐구합니다. 이것은 Google 개발자 전문가 Jurgen van de Moere와 Todd Motto가 공유하는 7 가지 주요 기능에 중점을 둔 두 번째 부분입니다. (1 부를 사용할 수 있습니다 [Part One, 사용 가능한 경우 링크]).

키 테이크 아웃 :

imports를 간소화 : 자동 가져 오기 명령문 생성에 대한 WebStorm의 가져 오기 경로 계산을 활용하여 오류 최소화 및 시간을 절약합니다. 프로젝트 요구에 맞는 가져 오기 설정 (예 : 경로, 배럴 파일, 특정 모듈 제외)을 사용자 정의합니다. 빠른 코드 스캐 폴딩 : 라이브 템플릿을 활용하여 재사용 가능한 코드 스 니펫을 만들고, 개발을 가속화하고, 반복적 인 코딩을 줄입니다.

통합 테스트 : 다양한 JavaScript 테스트 (업장, 직접)를 WebStorm 내에서 직접 실행하여 테스트 프로세스를 단순화합니다. 강화 코드 가독성 :

TypeScript 매개 변수 힌트를 통한 코드 이해 향상, 빠른 탐색을위한 빵 부스러기 및 WebStorm을 통한 각도 문서에 직접 액세스하십시오.
• WebStorm and Angular Tip 6 : 손쉬운 수입 관리 WebStorm은 지능적으로 가져 오기 경로를 관리하여 일반적으로 파일에 비해 해결합니다 (각도 CLI 기본값). 가져 오기를 수동으로 입력하는 대신 구조물을 사용하십시오. WebStorm은 autocomplete를 통해 가져 오거나 옵션 Enter (또는 Windows/Linux에서 Alt Enter)를 사용하여 가져 오라고 제안합니다. 새로운 가져 오기 명세서를 추가하거나 동일한 라이브러리에서 기존 내용 명세서에 추가됩니다. tsconfig.json
고급 가져 오기 옵션은 또는 Node.js 모듈 해상도를 사용하여 경로 계산을 허용합니다 (배럴 파일에 이상적). 더 미세한 제어를 위해 자동 가져 오기에서 제외 할 모듈을 지정할 수도 있습니다. WebStorm 및 Angular Tip 7 : 효율성을위한 라이브 템플릿
• 반복 코드 패턴은 라이브 템플릿으로 쉽게 해결됩니다. Webstorm은 사전 정의 된 템플릿을 제공하여 새 템플릿을 사용자 정의하거나 만들 수 있습니다. 환경 설정/설정으로 이동합니다. & GT; 편집자 & gt; 라이브 템플릿 를 관리합니다
• 약어, 설명, 템플릿 텍스트 (변수 사용), 컨텍스트 및 확장/재발 옵션을 정의합니다. 약어를 입력하고 정의 된 확장 키를 눌러 템플릿을 호출하십시오. WebStorm 및 Angular Tip 8 : 안내 테스트
• WebStorm에서 직접 다양한 JavaScript 테스트를 실행합니다 (Node.js 및 Nodejs 플러그인이 설치되었다고 가정). 편집기에서 직접 개별 업장 테스트를 실행하거나 전용 창에 결과가 표시된 결과로 디버그 오두터 테스트를 실행하십시오. RESTFUL SERVICE TESTING은

  도구 및 GT를 통해 통합됩니다. RESTFUL WEB SERVICES WebStorm and Angular Tip 9 : 코드 복원을위한 로컬 기록

  WebStorm의 로컬 기록은 코드의 스냅 샷을 제공하여 버전 제어와 독립적으로 이전 상태로 되돌릴 수 있습니다. git 초기화가없는 경우에도 현재 및 과거 버전을 비교하려면 액세스하십시오. WebStorm 및 Angular Tip 10 : 명확성을위한 TypeScript 매개 변수 힌트

  typeScript 매개 변수 힌트는 함수에 매개 변수 이름을 표시하여 코드 가독성을 향상시킵니다.

  선호도/설정에서 힌트 가시성을 사용자 정의하고 & gt; 편집자 & gt; 일반 & gt; 모양 <.>. 모든 인수에 대한 힌트를 표시하거나 특정 방법에 대한 블랙리스트를 만들거나 완전히 비활성화 할 수 있습니다.

  Webstorm 및 Angular Tip 11 : 효율적인 내비게이션을위한 빵 부스러기

  빵 부스러기는 편집기 하단 (또는 상단에 구성 가능)의 바닥에있는 파일 내의 현재 위치를 보여줍니다. 빵 부스러기를 클릭하여 부모 대상으로 점프하십시오. 또는 파일 구조 팝업을 사용하십시오 ( avigate & gt; 파일 구조 또는 cmd/ctrl f12).

  WebStorm and Angular Tip 12 : anide anide 액세스 각도 문서에 액세스 WebStorm 내에서 직접 각도 문서에 액세스하십시오. Caret를 각도 구조물에 놓고 F1을 누르거나 "

  환경 설정/설정에서"마우스 이동에 대한 빠른 문서 표시 "를 활성화하십시오. & GT; 편집자 & gt; 인스턴트 호버 오버 문서의 경우 일반

  결론 :

  이러한 WebStorm 기능을 마스터하여 각도 개발 워크 플로우를 크게 향상시킵니다. WebStorm의 생산성 보고서 ( help & gt; 생산성 가이드 )를 사용하여 생산성 향상을 추적하는 것을 잊지 마십시오. (FAQS 섹션은 IDE 기능에 대한 표준 질문과 답변이므로 간결하게 생략되었습니다.)

위 내용은 Webstorm 및 Angular에 대한 상위 12 개 생산성 팁 : Part 2의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!