WebStorm 및 Angular에 대한 상위 12 개 생산성 팁 : 1 부

WebStorm & Angular : 상위 5 개의 생산성 팁 (1 부)

JetBrains가 후원하는이 두 부분으로 된 시리즈는 Webstorm 내에서 각도 개발을위한 생산성 향상을 탐구합니다. Google 개발자 전문가 Jurgen van de Moere와 Todd Motto는 그들의 통찰력을 공유합니다. Jurgen의 첫 번째 부분은 5 가지 주요 웹 스톰 기능에 중점을 둡니다. 키 테이크 아웃 :

webstorm의 통합 각도 CLI를 활용하여 명령 줄을 우회하여 프로젝트 생성 및 기능 추가를 간소화합니다.

Mas 우수한 코드 완료, 오류 감지 및 템플릿 지원을위한 각도 언어 서비스의 힘을 활용하십시오.

프로젝트 설정을 준수하여 WebStorm의 내장 도구를 사용하여 일관된 스타일에 대한 코드 형식 자동화. 사용되지 않은 수입을 제거하고 관련 수입을 병합하고 최적의 번들 크기를 유지하기 위해 수입을 쉽게 최적화합니다.

1. 통합 된 각도 cli

를 수용하십시오 강력한 명령 줄 도구 인 Angular CLI는 WebStorm에 완전히 통합되어 있습니다. 파일을 통해 새로운 프로젝트를 만듭니다. & gt; 새로운 & gt; 프로젝트 & gt; Project 위치를 지정하는 Angular Cli . 기능 (구성 요소, 서비스, 지시문) 추가는 똑같이 간단합니다. (또는 관련 모듈)를 마우스 오른쪽 버튼으로 클릭하고 new & gt; 각도 cli . Webstorm은 지능적으로 모듈 통합을 처리합니다

2. 프로 레벨 내비게이션

CMD 클릭 (또는 CMD B)을 사용하여 코드베이스를 효율적으로 탐색하여 정의로 직접 이동하십시오. 이는 구성 요소, 지침, 스타일 시트, 템플릿, 클래스 등에서 작동합니다. 직접 참조가없는 파일의 경우 Double-Shift는 "모든 곳에서 검색"을 활성화하여 부분 검색어로 빠른 파일 위치를 활성화합니다. CMD E는 최근 편집 된 파일에 빠르게 액세스 할 수 있습니다 <ul> <li> </li> 3. 각도 언어 서비스 잠금 해제 <li> Webstorm의 Angular에 대한 내장 지원은 우수하며 자동으로 JavaScript 모듈을 가져오고 실시간 타임 스크립트 피드백을 제공합니다. Angular Language Service를 설치하여이를 더욱 향상시킵니다 (). 선호도에서 활성화 & gt; 언어 및 프레임 워크 & gt; TypeScript & gt; TypeScript Service 사용 & GT; 구성… & gt; angular 서비스 를 사용하십시오. 이것은 템플릿에서 코드 완료를 크게 향상시키고보다 정확한 오류보고를 제공합니다. <p> <code>npm install @angular/language-service --save-dev 4. 손쉬운 코드 형식

CMD 옵션 B (또는 동등한 단축키)로 일관된 코드 스타일을 유지하십시오. WebStorm은 모든 파일 유형 (템플릿, 스크립트, 스타일 시트, JSON)에서 코드를 자동으로 형식화합니다. <file file> 파일이 존재하면 Webstorm은 스타일 설정을 적용 할 것을 제안합니다. WebStorm & gt에서 서식 기본 설정을 사용자 정의하십시오. 선호도 & gt; 편집자 & gt; 코드 스타일 <.>. <p> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173959130344277.jpg" class="lazy" alt="Top 12 Productivity Tips for WebStorm and Angular: Part 1 "> 5. 최적화 <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173959130426981.jpg" class="lazy" alt="Top 12 Productivity Tips for WebStorm and Angular: Part 1 ">로 가져 오기를 간소화합니다 <dle> 가져 오기를 최적화하여 번들 크기를 기울이십시오. Ctrl Alt O (또는 CMD Shift A & GT; "Imports Optimize")는 동일한 모듈에서 가져 오기를 자동으로 병합하고, 사용되지 않는 가져 오기를 제거하며, 가져 오는 수입 명령문을 개혁합니다. <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173959130529937.jpg" class="lazy" alt="Top 12 Productivity Tips for WebStorm and Angular: Part 1 "> </dle></p> <p> 결론 : <strong> <web>이 웹 스톰을 마스터하면 각도 개발 생산성이 크게 향상됩니다. Todd Motto의 전문가 팁으로 Part 2를 계속 지켜봐주십시오! (Webstorm 및 Angular Development에 대한 FAQ는 원본 기사에 포함되어 있지만 간결하게 여기에 생략되었습니다).</web></strong></p></.></file>

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