WebStorm 2019.3의 새로운 기능

성능

빨라진 시작

지금까지 WebStorm 사용자가 경험한 가장 일반적인 성능 문제 중 하나는 IDE의 느린 시작이었습니다. JetBrains는 시작 화면이 표시되고 색인 생성된 프로젝트가 IDE에서 열리기까지 기다리는 시간을 단축하기 위해 지난 두 번의 릴리스 주기에서 많은 노력을 기울였습니다. 그 결과 마침내 WebStorm이 이전 버전 대비 20% 빨라진 속도로 처리할 수 있게 되었습니다.

프레임워크 및 도구

Vue.js에 향상된 코드 완성 기능 지원

코딩 속도를 높이기 위해 WebStorm은 슬롯 이름을 사용자 대신 자동 완성합니다. 이 기능은 Vuetify, Quasar, BootstrapVue 등의 프로젝트 구성 요소 및 구성 요소 라이브러리에 정의된 슬롯 이름인 경우 작동합니다.

또한 WebStorm은 이제 별개의 파일에 있는 구성 요소 부분 간의 연결을 이해하고 단일 .vue 파일에 정의되지 않은 프로퍼티, 데이터, 메서드에 대해 정확한 코드 완성을 제안합니다.

Vue.js 프로젝트에 빠른 문서 지원

WebStorm 2019.3에서는 Vue.js 및 일부 인기 있는 구성 요소 라이브러리에 정의된 구성 요소와 지시문에 대한 문서를 확인할 수 있습니다. 문서를 보려면 코드 내 구성 요소 또는 지시문의 이름 위에서 F1을 누르세요.

향상된 React 구성 요소 속성 지원

propTypes가 없는 구성 요소의 경우, WebStorm은 해당 구성 요소의 사용 위치에 프로퍼티가 전달된 것을 확인하면 구성 요소 정의에서 props.something에 대해 해결되지 않은 프로퍼티를 더 이상 보고하지 않습니다.

JavaScript 및 TypeScript

템플릿 언어 삽입

파일의 기본 언어와 다른 언어로 된 코드 조각으로 작업해야 하나요? 이제 Alt-Enter를 눌러 Pug, Handlebars, EJS 등의 코드 조각을 파일에 삽입할 수 있습니다.

새 심볼의 이름 제안

JavaScript 또는 TypeScript 파일에서 새 변수 및 매개변수 이름을 추가하면 프로젝트, 표준 라이브러리, 사용 중인 종속성에 정의된 클래스, 인터페이스, 유형 별칭의 이름을 기반으로 이름을 제안받을 수 있습니다.

새로운 변수, 함수, 클래스, 인터페이스의 경우 동일한 범위에서 이미 사용되지만 아직 정의되지 않고 해결되지 않은 것으로 표시된 이름의 제안도 제공됩니다.

HTML 및 스타일시트

CDN상의 CSS 라이브러리에 코드 완성 지원

프로젝트에서 Bootstrap이나 다른 CSS 라이브러리를 사용하고 해당 라이브러리가 HTML 파일 내에서 CDN에 연결된 경우 이제 클래스 소스를 프로젝트에 추가하지 않아도 해당 라이브러리의 클래스 이름에 코드 완성 기능을 사용할 수 있습니다. 이 기능을 활성화하려면 HTML 파일의 링크 위에서 Alt-Enter를 누르고 Download library(라이브러리 다운로드)를 선택하세요

버전 관리

새롭게 설계된 프로젝트 복제 UI

버전 관리 시스템에서 프로젝트를 복제하면 업데이트된 Get from Version Control(버전 관리에서 가져오기) 대화상자가 시작 화면과 VCS 메뉴에 표시됩니다.

이렇게 재설계한 주요 목적은 GitHub에서 프로젝트를 가져오는 경험을 개선하기 위해서입니다. 이제 업데이트된 대화상자에서 바로 GitHub 계정에 로그인할 수 있습니다. 로그인한 후에는 계정과 소속된 조직에 있는 저장소 목록을 탐색하고 거기에서 바로 WebStorm으로 프로젝트를 복제할 수 있습니다.

어느 브랜치의 변경 내용이든 간단하게 푸시

어느 브랜치 작업을 하고 있는데 다른 브랜치의 변경 내용을 푸시해야 하나요? 최신 업데이트에서는 푸시하려는 변경 내용이 있는 브랜치로 전환할 필요 없이 Branches(브랜치) 팝업에서 변경 내용을 선택한 다음 Push(푸시)를 누르기만 하면 됩니다.

더 효율적으로 개선된 커밋 프로세스

이제 별도의 대화상자가 나머지 IDE 화면을 가로막는 일 없이 Version Control(버전 관리) 도구 창에서 바로 커밋할 수 있습니다. 이 기능을 사용하려면 Preferences(환경 설정)/Settings(설정) | Version Control(버전 관리) | Commit Dialog(커밋 대화상자)에서 Commit from the Local Changes without showing a dialog(대화상자를 표시하지 않고 로컬 변경에서 커밋)를 선택하세요.

브랜치 체크아웃을 위한 새로운 액션

여러 사용 편의성 문제를 해결하기 위해 하나였던 Checkout as...(다음으로 체크아웃) 액션을 원격 브랜치용인 통합 Checkout(체크아웃) 액션과 원격 및 로컬 브랜치용인 New Branch from Selected...(선택 항목에서 새로운 브랜치 생성) 액션, 두 가지로 대체했습니다.

IDE

도구 및 구성 실행을 위한 새로운 액션

npm 및 Yarn과 같은 도구를 시작하거나 최근 프로젝트를 열거나 실행/디버그 구성을 시작해야 하시나요? 이제 Run Anything(무엇이든 실행) 액션(Ctrl-Ctrl)을 사용하여 한 곳에서 모든 작업을 수행할 수 있습니다.

선택 영역 내에서만 검색

새로운 In Selection(선택 영역 내) 필터(Cmd/Ctrl-F 두 번)를 사용하면 파일에서 선택한 코드 부분으로 검색 범위를 좁혀 특정 정보를 더 빠르게 검색할 수 있습니다.

번들에서 Dart 지원 제외

WebStorm 2019.3부터 Dart 플러그인이 더 이상 번들로 제공되지 않습니다. 번들로 포함된 플러그인은 전체 IDE를 업데이트해야만 함께 업데이트되기 때문에 플러그인의 릴리스 주기를 단축하기 위해 이 변경이 적용되었습니다. 따라서 이제 Dart를 사용하는 경우 Preferences(환경 설정)/Settings(설정) | Plugins(플러그인)에서 해당 Dart 플러그인을 설치해야 합니다.

전역 파일 와처(file watcher)를 기본적으로 사용 설정

프로젝트에 Prettier와 같은 타사 도구를 사용하고 있고 파일 와처를 통해 구성한 경우, 이 구성이 새로 생성한 모든 프로젝트에 자동 적용되기를 원할 수 있습니다. 이제 전역 파일 와처가 기본적으로 사용 설정되므로 이 작업을 수행할 수 있습니다.

성능