WebStorm 2020.3의 새로운 기능
훨씬 세련된 디자인, Tailwind CSS 지원, 향상된 디버그 환경, Git 스테이징 지원, 새로운 탐색 기능 및 다양한 기능을 만나보세요!
디자인
새로운 시작 화면
시작 화면이 업데이트되었습니다! 여기에서 프로젝트를 열고 생성할 수 있을 뿐만 아니라 IDE 테마 및 글꼴 등 가장 일반적으로 사용되는 설정을 조정할 수 있습니다.
OS 설정과 동기화되는 IDE 테마
이제 WebStorm 테마를 macOS 및 Windows 설정과 동기화할 수 있습니다. 간단히 Preferences(환경 설정) / Settings(설정) | Appearance & Behavior(모양 및 동작) | Appearance(모양) | Theme(테마)로 이동하여 Sync with OS(OS와 동기화) 옵션을 선택하기만 하면 됩니다. Sync with OS 옆에 있는 톱니바퀴 아이콘을 클릭하면 원하는 테마를 선택할 수 있습니다. 이 기능은 Linux 사용자를 위해서도 구현할 계획입니다.
향상된 탭 작업
2020.3 버전에서는 탭 작업이 더 편리해졌습니다. 이제 탭을 드래그 앤 드롭하거나 새로운 Open in Right Split(오른쪽 분할에서 열기) 액션을 사용하여 에디터를 분할할 수 있습니다. 또한 고정된 탭이 특별 아이콘으로 표시되고 탭 표시줄의 시작 부분에 표시되므로 탭을 빠르게 찾을 수 있습니다.
리더 모드
라이브러리 및 읽기 전용 파일의 가독성을 높여주는 새로운 모드가 WebStorm에 추가되었습니다. 이 모드를 시작하여 주석을 렌더링하고 글꼴 이음자를 활성화하는 등 다양한 기능을 이용해 보세요.
여러 파일 템플릿
여러 파일을 한 번에 생성하는 사용자 지정 파일 템플릿을 추가하는 기능을 구현하였습니다. 예를 들어 이 기능은 .js 파일을 그에 대한 테스트 파일과 함께 추가해야 할 때 편리할 수 있습니다.
WebStorm으로 열리는 파일
이제 WebStorm에서 특정 파일 형식이 기본적으로 열리도록 간단히 설정할 수 있습니다. Preferences(환경 설정) / Settings(설정) | Editor(에디터) | File Types(파일 형식)으로 이동해 Associate file types with WebStorm(파일 형식을 WebStorm과 연결) 버튼을 클릭하세요.
프레임워크 및 기술
Tailwind CSS 지원
WebStorm가 이제 Tailwind CSS를 더 생산적으로 작업할 수 있도록 도와줍니다! Tailwind 클래스를 자동 완성하고, 마우스오버 시 CSS 결과의 미리보기를 표시하고, tailwind.config.js 파일을 사용하여 만든 사용자 지정을 지원합니다.
사용 위치에서 React 구성 요소 생성
코드에 해결되지 않은 React 구성 요소가 있으신가요? 그 위에 캐럿을 배치하고 Alt+Enter를 누른 다음, 목록에서 Create class / function component(클래스/함수 구성 요소 생성)를 선택하면 WebStorm이 적절한 코드 구문을 사용자 대신 생성해줍니다.
Markdown 편집 및 미리보기 개선 사항
Mermaid.js 지원, .md 파일 서식 다시 지정 기능, 에디터를 따라 미리보기 창 자동 스크롤을 비롯해 기타 변경 내용이 적용되어 WebStorm에서 Markdown 파일을 작업하는 사용자 환경이 크게 개선됩니다.
복잡한 webpack 설정 기본 지원
여러 webpack 구성에 대한 지원을 추가하기 시작했습니다. Preferences(환경 설정) / Settings(설정) | Languages & Frameworks(언어 및 프레임워크) | JavaScript | Webpack으로 이동하여 수동 또는 자동으로 구성 파일 탐지 중에서 선택하세요.
Vue.js 개선 사항
Vue 3과 관련된 여러 문제를 수정했습니다. 예를 들어 이제 WebStorm은 script setup 구문을 지원합니다. 또한 IDE가 Vue 프로젝트에서 ESLint 코드 스타일 규칙을 올바르게 적용하도록 만들고 TypeScript 언어 서비스와의 통합을 개선했습니다.
pnpm 완벽 지원
WebStorm에서 npm 및 yarn과 더불어 pnpm 패키지 관리자를 완벽하게 지원합니다. pnpm 지원에 대한 개선 작업은 지난 한 해 동안 점진적으로 진행하였으며 2020.3 버전에서 마무리했습니다.
JavaScript 및 TypeScript
TypeScript 및 Problems 도구 창 통합
TypeScript 언어 서비스를 Problems(문제) 도구 창으로 통합하고 TypeScript 도구 창을 제거했습니다. 이러한 변경은 더 간편하게 한 곳에서 코드 문제를 검토할 수 있도록 하기 위해 적용했습니다. 이전에 TypeScript 도구 창에서 제공되던 액션은 상태 표시줄 상의 전용 위젯으로 옮겼습니다.
CSS 및 HTML이 포함된 템플릿 리터럴의 올바른 서식 지정
2020.3 버전부터 WebStorm은 JavaScript가 포함된 여러 줄의 CSS 및 HTML 블록에 대한 코드 서식 지정을 올바르게 지원합니다. 더 복잡한 템플릿 리터럴을 추가하거나 코드 서식을 다시 지정해도 들여쓰기가 올바르게 처리됩니다.
향상된 디버그 경험
디버그할 때 대화형 힌트와 인라인 감시를 사용해 보세요! 이제 힌트를 클릭하면 변수에 속한 모든 필드를 확인할 수 있습니다. 또한 힌트에서 바로 변숫값을 변경하고 감시 표현식을 추가할 수 있습니다.
도구
공동 개발용 도구 지원
WebStorm 2020.3은 공동 개발 및 페어 프로그래밍을 위한 새로운 도구인 Code With Me(EAP)를 지원합니다. 이 도구를 사용하면 다른 사람과 프로젝트를 공유하여 실시간으로 함께 작업할 수 있습니다. Code With Me를 사용해보려면 Preferences(환경 설정) / Settings(설정) | Plugins(플러그인)에서 해당하는 플러그인을 설치하세요.
WebStorm 기본 사항에 관한 기본 제공 교육 과정
WebStorm의 주요 기능에 익숙해지도록 대화형 교육 과정을 개발했습니다. 이 과정은 코드 리팩터링이나 프로젝트 탐색과 같은 몇가지 일반적 작업을 수행하는 방법을 학습하는 데 도움이 될 수 있습니다. 시작 화면의 Learn WebStorm(WebStorm 배우기) 탭에서 또는 메인 메뉴의 Help | IDE Features Trainer으로 이동하면 교육 과정을 찾을 수 있습니다.
HTTP 클라이언트에서의 cURL 변환
이제 HTTP 요청 에디터에서 Alt+Enter를 누르고 Convert to cURL and copy to clipboard(cURL로 변환 및 클립보드로 복사) 옵션을 선택하여 HTTP 요청을 cURL로 내보낼 수 있습니다.
향상된 철자 및 문법 검사
이제 문법 및 철자 문제를 더 빠르게 해결할 수 있습니다. 문제를 마우스로 가리키면 설명과 제안된 수정이 포함된 팝업이 표시됩니다. 또한 더 많은 언어 지원이 추가되고 문법 검사의 품질이 개선되었습니다.
버전 관리
Git 스테이징 영역 지원
이제 WebStorm에서 바로 파일을 스테이징할 수 있습니다! 이 기능을 사용하려면 Preferences(환경 설정) / Settings(설정) | Version Control(버전 관리) | Git으로 이동하여 Enable staging area(스테이징 영역 활성화) 옵션을 선택하세요. Commit(커밋) 도구 창뿐만 아니라 여백에서, 그리고 Show Diff(Diff 표시) 기능을 사용하여 변경 내용을 스테이징할 수 있습니다.
재배열된 VCS 메뉴
이제 메인 메뉴에 있는 VCS 그룹의 이름이 사용 중인 버전 관리 시스템에 따라 지정됩니다. 또한 메인 메뉴의 Git에 있는 항목을 재배열하여 가장 일반적인 작업에 액세스하기 쉽도록 만들었습니다.
향상된 브랜치 작업
WebStorm은 이제 새 브랜치 이름에서 허용되지 않는 심볼을 자동으로 수정합니다. 또한 다른 브랜치와 마찬가지로 현재 선택한 브랜치에 대해 사용할 수 있는 모든 액션을 사용자에게 표시합니다.
탐색
더 유용해진 탐색 표시줄
Project(프로젝트) 뷰의 간편한 대안을 제공하는 Navigation(탐색) 표시줄을 사용하면 프로젝트 구조를 쉽게 탐색하고 특정 파일을 열 수 있습니다. 또한 2020.3 버전에서는 JavaScript 및 TypeScript 파일의 특정 코드 요소로 이동할 수도 있습니다.
빠른 파일 미리보기
드디어 Project(프로젝트) 뷰에서 파일을 선택하여 에디터에서 미리 확인할 수 있습니다! 이 기능을 켜려면 Project 뷰에서 톱니바퀴 아이콘을 클릭하고 Enable Preview Tab(미리보기 탭 활성화) 및 Open Files with Single Click(클릭 한 번으로 파일 열기)을 모두 선택하세요.
더 강력해진 전체 검색
이제 Shift+Shift 팝업으로 훨씬 다양한 작업을 수행할 수 있습니다. 우선 기본 계산을 수행할 수 있고 그 결과도 팝업에 바로 표시됩니다. 또한 브랜치 및 커밋에 관한 자세한 정보가 포함된 Git 데이터를 검색할 수도 있습니다. 그 외에, 모든 검색 결과가 유형이 아닌 검색 쿼리에 대한 관련성에 따라 그룹화됩니다.