WebStorm 2020.2의 새로운 기능

프레임워크 및 기술

Prettier를 디폴트 서식 지정 도구로 사용

내장된 서식 지정 도구가 아닌 Prettier를 사용해 코드를 깔끔하게 정돈하고 싶으신가요? 이번 업데이트로 이 작업이 예전보다 훨씬 간편해졌습니다. 간단히 새로운 On code reformat(코드 서식을 다시 지정할 때)이라는 체크박스를 선택하기만 하면 사용자가 .js, .ts, .jsx, .tsx 파일의 서식을 다시 지정할 때마다 IDE에서 Prettier를 사용합니다. 기타 파일 유형도 쉽게 추가할 수 있습니다.

Nuxt.js 지원

WebStorm에서 Nuxt.js 작업을 더 생산적으로 수행할 수 있게 되었습니다! 템플릿 섹션과 nuxt.config.js 파일 내에서 코딩 지원 기능을 사용하고 핵심 Nuxt 구성 요소에 대한 빠른 문서를 검토하고 Nuxt 프로젝트에서 Vuex 스토어 지원을 이용하는 등, 다양한 기능을 이용해 보세요.

Vue용 코드 스타일을 빠르게 구성

Vue 관련 코드 스타일 설정을 사용하면 어떤 최상위 태그의 내용이 들여쓰기되어야 하는지, 들여쓰기가 Vue 파일 전체에서 동일해야 하는지 또는 언어 설정에 따라 달라야 하는지 선택할 수 있습니다. Vue 코드 내 보간의 서식도 변경할 수 있습니다.

WSL 2에 설치된 Git 지원

JetBrains IDE에는 WSL 관련 모든 필수 워크플로에 대한 지원이 계속 추가되고 있습니다. 이제 WSL에서 프로젝트를 열면 IDE가 자동으로 WSL에서 Git으로 전환하므로 모든 관련 기능을 사용할 수 있습니다.

TypeScript 프로젝트의 Vue 관련 변경 내용

TypeScript 언어 서비스에서 .vue 파일이 처리되는 방식이 개선되어 이제 .ts 또는 .tsx 파일과 마찬가지로 처리 됩니다. 다른 Vue 또는 TypeScript 파일 내에 Vue 파일을 가져와도 더 이상 문제가 발생하지 않습니다.

JavaScript 및 TypeScript

새로운 인텐션을 사용해 시간 절약

새로운 스마트 인텐션(Alt+Enter)을 사용하면 선택적 체인 및 null 병합을 비롯해 루프 관련 일부 액션을 더 빠르게 수행할 수 있습니다. 예를 들어 이제 숫자 색인이 있는 for 루프를 forEach 배열 메서드로 빠르게 변환할 수 있습니다.

JSDoc 주석을 에디터에서 바로 렌더링

JSDoc 주석을 읽으려면 모든 태그를 읽어야 하는 어려움이 있습니다. 그래서 이를 더 간편하게 수행할 수 있도록 불필요한 방해 요소를 제거하여 에디터에서 바로 주석을 렌더링할 수 있도록 만들었습니다.

도구 창에서 디버그 시작

WebStorm을 사용하면 Run(실행) 및 Terminal(터미널) 도구 창에서 디버그 세션을 시작할 수 있습니다. 예를 들어 npm start와 같은 스크립트를 실행하고 Ctrl+Shift를 누른 상태에서 해당 스크립트 출력의 http 링크를 클릭하면 IDE가 JavaScript 디버그 세션을 시작합니다.

디버그 시 항목 미리보기 개선

디버그 시 내장된 콘솔의 항목 미리보기가 일부 개선된 것을 확인하실 수 있습니다. 이 개선으로 객체 정보를 펼쳐볼 필요 없이 해당 객체에 대한 더 유용한 세부 정보를 얻을 수 있습니다.

HTML 및 스타일시트

@use 및 @forward 규칙의 향상된 지원 제공

지난 해에는 Sass 및 SCSS에서 사용되는 @use 및 @forward 규칙에 대한 조기 지원이 도입되었습니다. 이제 이 지원이 확장되어 WebStorm이 더 스마트해진 완성 기능을 제공하고 가져온 심볼을 더 효과적으로 해결할 수 있게 되었습니다.

IDE에서 WebP 이미지 미리보기

2020.2 버전부터 .jpeg 또는 .png 파일과 마찬가지로 WebStorm에서 .webp 이미지를 미리 볼 수 있습니다. 이전에는 WebStorm이 .webp 이미지 형식을 인식하지 못해 그러한 이미지를 자세히 봐야 할 때마다 다른 애플리케이션으로 전환해야 했습니다.

버전 관리

GitHub pull 요청에 대한 완벽한 지원

WebStorm 2020.2에서는 GitHub pull 요청을 더 쉽게 작업할 수 있도록 이에 대한 지원을 확장했습니다. 이제 IDE를 벗어나지 않고도 모든 Pull 요청을 확인 및 병합하고 코드를 검토할 수 있습니다.

새롭게 설계된 Git 액션 대화상자

WebStorm 2020.2에서는 병합, 풀, 리베이스 액션용 대화상자가 깔끔하게 정리되었습니다. 또한 Pull(풀) 대화상자의 –rebase 및 Merge(병합) 대화상자의 –no-verify 등 몇가지 새로운 옵션이 추가되었습니다.

로그에서 로컬 커밋 스쿼시

이제 Git 도구 창의 Log(로그) 탭에서 여러 로컬 커밋을 선택하여 하나로 Squash(스쿼시)할 수 있습니다. 이 액션은 마우스 오른쪽 버튼을 클릭하여 실행하는 컨텍스트 메뉴에서 사용 할 수 있습니다.

코드 편집

코드 내 문제를 더 빠르게 식별

새로운 Inspections(검사) 위젯과 Problems(문제) 도구 창을 사용하면 현재 파일 내 경고 수, 오류 및 기타 문제에 대한 자세한 정보를 얻을 수 있을 뿐만 아니라 해당 문제를 탐색할 수 있습니다.

선택한 각 줄의 끝에 캐럿 추가

여러 캐럿으로 작업하기 위한 새로운 액션(Alt+Shift+G)을 사용하면 선택한 각 줄의 끝에 캐럿을 빠르게 배치하고 모든 캐럿을 추가하는 즉시 선택 항목을 제거할 수 있습니다.