WebStorm 2020.1의 새로운 기능

디자인

에디터의 새로운 기본 글꼴

우리는 시각적 부담 없이 더욱 편안하게 코딩할 수 있는 글꼴 개발에 힘써왔습니다. 코딩만을 위해 특별히 제작한 새로운 오픈 소스 서체인 JetBrains Mono를 소개합니다! WebStorm 2020.1 버전에서는 JetBrains Mono가 기본 서체로 제공됩니다.

코딩에만 집중하는 환경

새롭게 추가된 Zen 뷰 모드를 활용하면 온전히 코딩에만 집중할 수 있습니다. 전체 화면 에디터에서 작업하고 싶을 때 Zen 모드를 활용하면 소스 코드를 중앙에 배치하고 기타 UI 요소는 숨김 처리하여 집중 분산을 최소화할 수 있습니다.

마우스로 가리켜 문서 표시

이제 문서 팝업을 직접 실행할 필요가 없습니다. 심볼을 마우스로 가리키기만 하면 문서가 표시되어 관련 문서를 빠르게 탐색할 수 있습니다. 또한 코드에 문제가 발견되면 팝업에서 빠른 수정을 제안하여 수정 사항을 적용하고 문제를 해결할 수 있습니다.

IDE를 활용한 빠른 편집

IDE를 활용하여 파일을 빠르게 편집하고 싶으신가요? 새로운 LightEdit 모드를 통해 전체 프로젝트를 로딩하지 않고도 텍스트 에디터에서 개별 파일을 열 수 있습니다.

상태 표시줄 사용자 지정

상태 표시줄을 숨겨 두지 않고 자주 사용한다면 꼭 필요한 기능만 선택하여 사용하세요. 상태 표시줄에서 마우스 오른쪽 버튼으로 클릭하면 필요 없는 요소를 제거할 수 있습니다.

프레임워크

Composition API를 활용한 작업

WebStorm 2020.1 버전은 Vue 3의 Composition API 기능을 통해 정의된 구성 요소를 지원합니다. 구성 요소의 템플릿 섹션에서 IDE는 반응형 프로퍼티, 계산형 속성 및 참조 등 구성 요소의 setup () 함수에서 반환된 심볼을 적절히 확인하고 자동으로 완성합니다.

Vuex 코딩 지원

Vuex 라이브러리를 활용하면 Vue 구성 요소 편집 시 Vuex 스토어 심볼에 대한 코드 완성 제안이 표시됩니다. 또한 WebStorm에서는 게터, 뮤테이션 및 액션의 정의로 이동하는 기능이 지원됩니다.

Angular 9 완벽 지원

Ivy 및 기타 Angular 9 기능을 보다 원활하게 사용하실 수 있도록 WebStorm 2020.1 버전은 해당 기능에 대한 완벽한 지원을 제공합니다. 별도의 설정 없이 TypeScript 및 템플릿 파일에서 코드 완성과 자동 가져오기 등의 다양한 기능을 사용해 보세요.

향상된 React 지원

캐럿을 구성 요소에 배치하고 Alt+Enter를 눌러 React.memo를 통해 정의된 구성 요소에 대한 import 문을 추가할 수 있습니다. 또한 프로젝트에서 Material-UI 구성 요소를 사용할 경우 스타일을 제작할때 코드 완성 제안이 표시됩니다.

JavaScript 및 TypeScript

새로운 스마트 인텐션 및 검사

새로운 스마트 인텐션 및 검사 기능(Alt+Enter)으로 코딩 시간을 단축하세요! 예를 들어, 기존 코드를 JavaScript 및 TypeScript 최신 버전에 도입된 구문인 optional chaining/nullish coalescing으로 빠르게 변환할 수 있습니다.

더욱 유용한 빠른 문서 보기 기능

이제 JavaScript 및 TypeScript에서 문서 팝업이 더욱 유용한 정보를 표시합니다. 심볼의 유형, 표시 설정 및 심볼이 정의된 위치와 같은 세부 정보가 이에 포함됩니다.

필드 삽입 리팩터링 UI 개편

업데이트된 Introduce Field(필드 삽입) 리팩터링은 작업 중인 코드의 컨텍스트의 변경 사항 미리보기를 지원합니다. 리팩터링 적용에 필요한 클릭 횟수도 줄었습니다.

TypeScript 3.8 기능 지원

WebStorm 2020.1 버전에는 TypeScript 3.8이 번들로 포함되며 가져오기/내보내기, private 필드, 최상위 await 등 TypeScript 3.8의 새로운 기능이 모두 지원됩니다.

도구

저장 시 Prettier 실행

WebStorm에 새롭게 추가된 Run on save for files(파일 저장 시 실행) 옵션을 활용하면 파일을 저장하는 즉시 IDE 설정에서 지정되고 프로젝트에서 편집된 모든 파일에 Prettier 형식이 적용됩니다. 이제 이 기능에 File Watcher(파일 감시기) 또는 타사 플러그인이 필요하지 않습니다.

나란히 표시되는 터미널 세션

기본 터미널 에뮬레이터의 보다 간편한 사용을 지원하기 위해 WebStorm에는 터미널 세션을 수직, 수평으로 분할하는 기능이 추가되었습니다. 이제 탭을 전환하지 않고도 현재 사용 중인 여러 도구의 출력 내용을 확인할 수 있습니다.

번들로 포함된 철자 검사기

2020.1 버전부터 WebStorm에 지능적인 철자, 문법, 스타일 교정 도구인 Grazie가 포함됩니다. 이 기능은 주석, 커밋 메시지, JavaScript 언어 구문 추가 시 문법적 실수를 줄이는 데 도움이 됩니다.

보다 유연한 실행 구성 공유

팀원과 프로젝트 공동 작업이 필요하신가요? 실행 구성을 간편하게 공유하세요. WebStorm 2020.1 버전에서는 원하는 모든 프로젝트 폴더에 실행 구성을 저장할 수 있으므로 훨씬 유연하게 공유 할 수 있습니다.

TypeScript 프로젝트에서 Yarn 2 지원

WebStorm 2019.3에 도입된 초기 Yarn 2 지원이 확장되었습니다. 이제 Plug’n’Play 모드로 Yarn 2를 활용해 종속성을 설치할 때 TypeScript 프로젝트에서 모든 심볼은 적절히 확인 및 자동 완성됩니다.

버전 관리

리베이스 커밋을 위한 대화상자 개편

커밋 히스토리를 더욱 직선형으로 이해하기 쉽게 구성하고 싶으신가요? 한결 인터랙티브한 방식으로 업데이트된 Rebasing Commits 대화상자를 활용하면 간편하게 직선형 커밋을 구성할 수 있습니다. 개별 커밋에 적용 가능한 액션이 표시되어 커밋 세부 사항 및 Diff를 검토하고 적용된 변경사항을 빠르게 재설정할 수 있습니다.

커밋 작업 흐름의 변화

보다 간결한 커밋 작업 흐름을 위해 커밋과 관련된 모든 작업을 처리하는 새로운 커밋 도구 창을 개발했습니다. 이 창은 신규 설치 프로그램에서 기본적으로 활성화됩니다. 기존 사용자의 경우, 새 UI로 빠르게 전환할 수 있는 메시지가 모달 Commit 대화상자에 표시됩니다.