WebStorm 2022.3의 새로운 기능

WebStorm 시작 화면의 New Project(새 프로젝트) 마법사가 개편되었습니다. 2022.2 버전에서 AngularJS, Cordova 및 Meteor용 프로젝트 템플릿이 제거되었습니다. 이번 릴리스에서는 Vite 및 Next.js용 새 프로젝트 템플릿이 추가되고 Vue 템플릿이 최신 표준을 준수하도록 업데이트되었습니다.

WebStorm now supports Vitest, a Vite-native unit test framework! 여백 아이콘 사용을 비롯하여 가능한 모든 주요 방식으로 테스트를 실행, 재실행 및 디버그할 수 있습니다. 또한 All tests(모든 테스트) 시나리오에서 watch(감시) 모드가 기본적으로 활성화됩니다. 또한 watch 모드에서 스냅샷 테스트 및 커버리지도 지원되므로 코딩 중 커버리지에 대한 거의 즉각적인 피드백을 받아볼 수 있습니다.

WebStorm은 이제 해결되지 않은 import 문을 처리할 수 있으며, Vue 구성 요소 가져오기와 관련하여 제안 사항을 제공합니다. 또한 props 구조 분해 구문이 지원되고, Vue 라이브러리 구성 요소 프로퍼티에 대한 코드 완성 및 타입 검사 동작이 개선되었으며 Nuxt 3 관련 몇몇 문제도 수정되었습니다.

이번 릴리스에서 자세히 살펴볼 만한 Vue 관련 개선 사항이 하나 더 있습니다. 바로 새로운 코드 스니펫인 WebStorm 라이브 템플릿입니다. 라이브 템플릿을 활용하면 script setup 또는 export default와 같이 자주 사용되는 구문을 빠르게 추가할 수 있습니다. Preferences/Settings(환경 설정/설정) | Editor(에디터) | Live Templates(라이브 템플릿)에서 Vue 섹션을 선택해 지원되는 코드 스니펫을 확인해 보세요.

Angular 템플릿의 타입 좁히기 지원을 추가하여 더 정확한 타입 정보 및 향상된 코드 완성 제안을 제공합니다. 또한 WebStorm은 개선된 검색 결과를 제공하기 위해 전체 검색 시 .angular 캐시 폴더를 제외합니다.

Rider 및 IntelliJ IDEA의 Code Vision 기능이 WebStorm에도 추가되었습니다! Code Vision은 타입 및 타입 멤버에 대한 다양한 메트릭을 수집하여, 타입/타입 멤버의 선언 근처에 해당 정보를 표시합니다. 이러한 힌트는 코드의 다양한 클래스, 메서드, 타입 별칭 및 인터페이스 사용 위치를 추적하는 데 도움이 됩니다. Preferences/Settings(환경 설정/설정) | Editor(에디터) | Inlay Hints(인레이 힌트)에서 Code Vision을 구성할 수 있습니다.

WebStorm에서 단일 저장소 및 TypeScript와 관련된 몇 가지 기능이 변경되었습니다. 탐색, 자동 가져오기 및 이름 변경 리팩터링 기능이 한층 안정적으로 작동합니다. 또한 이러한 기능을 npm, Yarn 및 pnpm 등 자주 사용되는 모든 패키지 관리자와 함께 사용할 수도 있습니다.

WebStorm 2022.3은 JavaScript 및 TypeScript 객체를 알파벳순으로 정렬하는 새로운 인텐션을 지원합니다. 이 인텐션을 실행하면 객체 내 모든 프로퍼티의 코드가 알파벳순으로 다시 정렬됩니다. 이 인텐션을 사용하려면 메서드에서 객체를 강조 표시하고 Alt+Enter를 누른 후 Sort properties alphabetically(알파벳순으로 프로퍼티 정렬)를 선택하면 됩니다.

연초에 JetBrains IDE의 새로운 UI를 지원하는 비공개 테스트 버전 프로그램을 발표했습니다. 새로운 UI의 첫 단계에서는 일부 제한된 수의 사용자만을 대상으로 개선된 IDE 디자인을 선보이는 것을 목표로 했습니다. 이제 Preferences/Settings(환경 설정/설정) | Appearance & Behavior(모양 및 동작) / New UI(새로운 UI)에서 신규 UI를 적용하고 피드백을 보내주세요. To learn more about the changes, watch this webinar recording.

작업 공간을 더 간편하게 정렬하고 모니터 여러 대에서 WebStorm과 상호 작용할 수 있도록 도구 창을 메인 창 외부로 드래그하여 플로팅 에디터 탭에 도킹하는 옵션을 구현했습니다.

Search Everywhere(전체 검색) 동작의 예측 가능성 및 정확도를 높이기 위해 검색 결과 목록 알고리즘을 개선했습니다. 이제 IDE에서 표시되는 첫 번째 검색 결과는 고정되며, 더 많은 옵션이 검색된 후에도 다시 정렬되지 않습니다. 또한 Files(파일) 탭에서 ML 순위가 활성화되어 검색 결과 정확도가 향상되었습니다.

이제 WebStorm에서 새로운 Settings Sync(설정 동기화) 플러그인을 사용할 수 있습니다. 이 새로운 솔루션을 활용하면 플랫폼, 번들 플러그인 및 일부 타사 플러그인에서 공유 가능한 대부분의 설정을 동기화할 수 있습니다. 이전의 IDE Settings Sync(IDE 설정 동기화) 플러그인 지원은 중단되며 Settings Repository(설정 저장소)는 번들에서 제외됩니다. 자세한 내용은 이 블로그 게시물을 참조하세요.

WebStorm의 기본 제공 학습 도구인 Tip of the Day(오늘의 팁)이 개편되었습니다. 팁 평가 기능을 추가하였으며 팁 표시 방식을 결정하는 알고리즘도 개선했습니다. 이제 작업 중인 IDE 환경 및 프로젝트와 관련성이 더 높은 팁이 표시될 수 있습니다.

붙여넣기 액션(Ctrl+V)의 동작이 개선되었습니다. 이제 코드 선택 없이 줄을 복사(Ctrl+C)하거나 잘라내어(Ctrl+X), 붙여넣기 액션을 실행하면 클립보드 내용이 현재 줄 위에 추가됩니다. 이전 버전에서는 캐럿에 추가되었습니다. Preferences/Settings(환경 설정/설정) | Advanced Settings(고급 설정)에서 이 동작을 비활성화할 수 있습니다.

선택한 액션을 적용할 경우 변경 사항을 미리 표시하고 설명하는 신규 기능이 추가되었습니다. 사용 가능한 인텐션 액션 목록을 열고 다양한 옵션에 마우스를 올리면 미리보기가 표시됩니다. 인텐션 액션 목록이 열린 상태에서 Ctrl+Q를 누르면 미리보기 기능을 비활성화할 수 있습니다.

WebStorm 2022.3 will detect vulnerabilities in the packages used in your projects by checking the packages against the Checkmarx SCA Database and the National Vulnerability Database. IDE에서 취약한 것으로 간주된 패키지를 강조 표시하며 가능한 경우 수정 옵션도 제안합니다.

docker-compose.yml, Kubernetes 파일 및 OpenAPI 사양을 비롯한 YAML 파일의 주석을 사용해 검사를 억제하는 빠른 수정이 새롭게 추가되었습니다. 또한 3줄 이상 블록으로 구성되며 #로 시작하는 여러 줄의 주석을 접는 편리한 옵션도 도입되었습니다. 주석 왼쪽의 +/- 아이콘을 사용하세요.

이제 WebStorm은 WSL에서 실행되는 Docker 연결을 지원합니다. 또한 새로운 Pull Docker image(Docker 이미지 풀하기) 인텐션, .dockerignore 파일 및 heredoc 구문 지원, Docker 컨텍스트를 사용하여 Docker 연결을 설정하는 기능도 있습니다. 자세한 내용은 이 블로그 글을 참조하세요.

인지 부하를 줄이고 요청과 관련한 가장 중요한 정보를 한눈에 확인할 수 있도록 Review list(검토 목록) UI가 개편되었습니다. 개편 작업의 일환으로, 지원되는 모든 검토 플랫폼에 일관적 디자인을 적용했습니다.

WebStorm 2022.3은 WSL2 파일 시스템에서 실행되는 프로젝트 작업을 위한 다른 방식을 제공합니다. Windows에서 IDE를 완전히 실행하지 않고도 WSL2에서 바로 IDE 백엔드를 실행할 수 있습니다. 다음으로 WebStorm에서 원격 개발 사용 시 원격 시스템에 연결하는 것과 동일한 방식으로 연결하면 됩니다.

HTTP 클라이언트는 요청 전에 실행되는 스크립트 블록을 지원합니다. 요청 실행 전 일부 데이터를 생성하고, 변수를 사용하여 최종 요청에 추가할 수 있습니다. 이제 WebStorm에서 Crypto API가 제공되므로, 코드를 사용해 HTTP 요청에 대한 md5 또는 sha1 해시 값을 계산할 수 있습니다.

이제 HTTP 클라이언트는 URL이 긴 요청이 있을 경우 향상된 서식 지정 옵션을 제공합니다. Put query parameters on separate lines(쿼리 매개변수를 별도의 줄에 배치) 인텐션 액션을 사용하여 쿼리를 여러 줄에 작은 조각으로 분할하여 배치할 수 있습니다. HTTP 요청 서식 관련 설정은 Preferences/Settings(환경 설정/설정) | Editor(에디터) | Code Style(코드 스타일) | HTTP Request(HTTP 요청) | Wrapping and Braces(줄 바꿈 및 괄호)에서 관리하세요.