VSCode 에서 웹스톰으로 환승한 이유

원래는 VSCode를 사용했었는데 회사에 취직 후 웹스톰을 한번 사용해보니 생각보다 잘 맞아서 웹스톰을 고정적으로 사용하게 되었다.
내가 생각하는 웹스톰의 장점은 다음과 같다.

• Git에 관련된 UI가 너무 직관적으로 잘 되어 있다.
  UI를 통해 커밋, 푸쉬를 할 수 있을 뿐더러, git log를 시각적으로 보여주고 관리할 수 있는 UI가 너무너무 잘 되어있다. 웹스톰을 쓰기 시작한 이후에는 소스트리를 사용해본 적이 거의 없을정도로 잘 만들었다.

• 전반적인 UI/UX와 사용감이 좋다.
  VSCode는 웹스톰에 비해 VSCode 자체적으로 제공해주는 기능이 많다기 보다는 적용할 수 있는 확장 프로그램이 다양한데, (마치 리액트와 같군) 에디터 자체 내장된 기능이 아니라 유저들이 만든 확장 프로그램 기능이라 그런지 UI/UX 적인 요소들은 사용감이 비교적 떨어진다고 개인적으로 느꼈다.

• 환경설정 세팅이 쉽다.
  환경설정 세팅할때에 VSCode보다 커스텀 하기 더 쉽다고 느껴졌다. 인터넷에 에디터 세팅 방법을 검색하지 않아도 직접 클릭 해보면서 익히기가 쉽다. 실제로 내가 이 글에서 소개하는 기능들 중 대다수는 직접 환경설정을 클릭하다가 알게 된 것들이다.
  이런기능 있으면 좋겠다고 생각했던 것들은 환경설정을 찾아보면 거의 다 있고 찾기도 쉬운편이다.

그러나 VSCode에 비해 이런 점들은 아쉽다.

• 사용자 층이 많이 없다. webstorm으로 검색하면 대부분 Intellij 결과로 나온다,, 대신에 Intellij 와 환경설정은 비슷해서 참고하는 편이다.

• 사용자 층이 많이 없어서 확장프로그램 종류도 적은 편이다...ㅠㅠ VSCode에서 사용하던 확장프로그램들을 웹스톰에서 찾아보면 없는 것들이 있다.

• 유료다. 내 돈말고 회사 돈으로 사용하자. (학생은 무료로 사용이 가능하다.)

1. 환경설정 커스텀하기

라이브 템플릿 커스텀하기

만족도 : 제일 많이 쓰는 꿀기능 ⭐ ⭐ ⭐ ⭐ ⭐ 

키워드만 작성하면 사전에 등록해둔 코드가 자동완성되는 개발 능률을 아주 많이 올려준 기능이다.

기본적으로 라이브 템플릿을 제공해주는 플러그인들이 있다. 환경설정 > 플러그인 > 마켓플레이스 에서 snippets 으로 검색하면 다양한 플러그인들이 기존에 있으니 설치해서 사용하면 된다.

리액트 타입스크립트 사용할 때 props 의 type을 정의하는 코드가 매번 작성하기 너무 귀찮아서 자동완성 기능이 있었으면 좋겠다고 생각했었다. React snippets 플러그인에는 해당 기능이 없길래 내가 직접 등록해서 사용할 수 는 없을까 찾아보다가 발견했다.

사용방법

1. cmd + , 로 환경 설정을 켜고 환경설정 > 에디터 > 라이브 템플릿 > React 으로 이동한 후 우측 + 버튼을 눌러 새로운 템플릿을 생성한다.

2. 변수 편집을 통해 파일이름과 같은 특정한 값을 변수로 등록한다.

예시에서는 변수 이름에 TM_FILENAME_BASE, 표현식엔 capitalize(camelCase(fileNameWithoutExtension()))을 등록했다.

3. 등록된 변수 이름을 사용하여 템플릿 텍스트에 자주쓰는 코드 패턴을 등록한다.

예시 텍스트

import React from 'react';

type $TM_FILENAME_BASE$Props = {
    children: React.ReactChildren;
};

function $TM_FILENAME_BASE$({ children }: $TM_FILENAME_BASE$Props) {
    return <>{children}</>;
}

export default $TM_FILENAME_BASE$;

4. 약어로 쓸 키워드를 등록하고 설명을 작성한다.

5. 변경 버튼을 클릭하여 약어를 사용할 범위를 지정한다.

사용한 예시

코드에서 약어를 작성하고 엔터를 누르면 등록한 템플릿 코드에 파일명이 적용되어 자동완성 된 것을 볼 수 있다.

미리보기 탭 활성화

만족도: ⭐ ⭐ ⭐ ⭐ ⭐

프로젝트를 우 클릭하면 아래 사진과 같이 미리보기 탭 활성화를 할 수 있다.

웹스톰은 탭을 클릭할 때마다 새로운 탭이 계속 추가되어서 나중에는 탭 목록이 너무 많아져 관리하기 힘들어진다. 미리보기 탭을 활성화하면 VSCode 처럼 탭을 클릭했을 때에 탭 목록에 바로 추가되는 것이 아니라 미리보기 탭이 추가된다. 미리보기 탭에서 파일을 수정하지 않은 채로 다른 파일을 클릭하면은 다른 파일로 대체되기 때문에 탭 관리가 수월하다. 탭 목록을 추가하고 싶을 때는 더블 클릭으로 탭을 열면 된다.

사용한 예시

단축키 등록하기

만족도: ⭐ ⭐ ⭐ ⭐ 

환경설정 > 키맵 에서 단축키를 등록할 수 있다.

웹스톰에서 자주쓰는 기능인데 단축키가 등록되어있지 않아서 직접 마우스로 클릭하고 있다면 단축키로 등록하는 것을 추천한다.

내가 자주 쓰는 커스텀 단축키는 최근 프로젝트 열기와 탭 관련 단축키이다.

파일 > 최근 항목 열기 > 프로젝트 관리 를 누르면 최근 사용한 프로젝트를 선택할 수 있는 창이 뜬다.

열기 기능인 cmd O 단축키를 통해 프로젝트를 열 수 도 있지만, 파일 위치를 찾는 과정이 귀찮아서 개인적으로는 최근 사용한 프로젝트로 여는 방식을 선호한다.

하지만 해당 메뉴는 단축키가 등록되어있지 않다. 그래서 직접 단축키를 등록하기로 했다.

환경설정 > 키맵 으로 이동한 다음 해당 메뉴의 이름을 검색한다. 검색된 기능을 더블클릭 하면 키보드 단축키를 추가할 수 있다. 등록 완료 후 환경설정 적용 버튼까지 누르면 된다.

다시 메뉴에 들어가 보니 프로젝트 관리 메뉴에 단축키가 등록되어 있는 것을 확인할 수 있다.

등록된 단축키 control shift O 를 누르니 최근 프로젝트 목록도 잘 뜬다.

같은 방식으로 탭을 우클릭 했을때 뜨는 탭 관련된 메뉴들도 단축키에 등록해놓으면 탭을 관리하기에 훨씬 편해진다.

색상 커스텀하기

만족도 : ⭐ ⭐ ⭐ 

웹스톰에서 사용되는 모~~든 색상은 환경설정을 잘 찾아보면 전부 다 직접 커스텀 할 수 있다.

그 중에서도 대부분의 색상은 환경설정 > 에디터 > 색 구성표 이 위치에서 설정할 수 있다.

대부분의 에디터에선 식별자에 커서를 올려놓으면 해당 식별자가 사용되고 있는 모든 위치에 배경색상이 변경된다.

그런데 웹스톰에서 기본적으로 사용되는 색상이 너무 눈에 띄지 않는 색상이라 코드를 읽기가 개인적으로는 너무 불편했었다.

환경설정을 뒤져보면 반드시 커스텀 할 수 있는 기능이 있으리라 생각하고 색 구성표를 하나하나 살펴보다가 해당 설정을 발견했다.

내가 원하던 기능은 환경설정 > 에디터 > 색 구성표 > 일반 에 있었다. ‘캐럿이 놓인 식별자’라는 값의 배경색상을 눈에 확 띄는 새파란 색으로 변경해주었다.

웹스톰은 UI/UX가 아주 친절하게도 사용된 코드 예시를 클릭하면, 클릭된 영역의 색상을 수정하기 위해 어떤 값을 수정해야 하는 지 알려준다. (이런 점에서 환경설정 사용방법이 VSCode 보다 쉽다고 생각한다. 역시 유료 툴 돈 값한다)

색 구성표에선 Rainbow Brackets 와 같은 라이브러리에서 제공하는 색상 값 마저 커스텀 할 수 있다. 하나 하나 찾아보면 굉장히 다양한 케이스의 색상을 커스텀 할 수 있으니, 색상을 변경하고 싶다면 색 구성표 를 살펴보는걸 추천한다.

사용한 예시

클릭한 식별자의 배경색이 눈에 띄어 코드 가독성이 높아졌다 🤩

2. 웹스톰 내장기능 소개

git log 보기

만족도: ⭐ ⭐ ⭐ ⭐ ⭐ 

웹스톰 하단의 Git 버튼을 클릭하면 git 커밋 이력을 확인해 볼 수 있다.

커밋을 우클릭하면 다양한 git 명령어를 사용할 수도 있고 오른쪽의 파일을 클릭하면 해당 커밋에서 어떤 코드들이 변경되었는 지 변경된 코드를 표시하여 보여준다.

개인적으로 웹스톰 내장기능 중에서 제일 만족하며 쓰고있는 기능이다.

VSCode에서는 해당 기능이 내장되어있지 않고 확장프로그램 설치를 통해 사용할 수 있다.

(참고로 위 git log는 내가 참여했었던 react-anlaytics-handbook 오픈소스의 git log이다)

변경된 코드를 감지하는 기능은 웹스톰, 깃허브 소스트리 세개를 비교해 봤을 때 웹스톰이 제일 뛰어났었다.

아래 사진은 같은 코드 수정 커밋에 대해 웹스톰, 깃허브 소스트리에서 각각 UI를 보여주는 방식이다.

웹스톰에서만 수정된 코드, 추가된 코드, 삭제된 코드를 다른 색상으로 구분하여 보여주는 것을 확인할 수 있다.

웹스톰 🔽

깃허브 🔽

소스트리 🔽

예전에 겪었던 상황중에서 html에 div로 50줄이 되는 코드를 감싸고, 50줄 코드의 Indent가 한 탭씩 들여쓰기 된게 전부인 커밋이 있었다. 소스트리랑 깃허브는 div를 포함한 52줄이 변경되었다고만 표시해서 겉보기엔 똑같은 코드같은데 도대체 어떤 점이 변경된건지 찾기 힘들었었다.

하지만 웹스톰에서 확인했을 때는 div가 새로 추가된 2줄과 indent만 들여쓰기가 변경된 나머지 50줄을 다른 색상의 UI로 보여줘서 코드 변경사항을 읽기에 훨씬 좋았던 경험이 있었다.

추가적으로 아래 사진은 VSCode의 내장기능은 아니고 익스텐션으로 추가 설치해서 사용하는 Git Graph이다.

자세히 보면 추가된 코드와 삭제된 코드를 구분하고 있긴 하지만 웹스톰의 UI가 더 한눈에 잘 들어오는 것 같다.

VSCode 익스텐션 Git Graph 🔽

특정 파일의 git log 보기

만족도: ⭐ ⭐ ⭐ ⭐ ⭐ 

특정파일에서 우클릭 후 Git > 기록 표시 로 이동하면 특정 파일에서 작성된 커밋 이력을 확인해 볼 수 있다.

한 파일의 변천사와 히스토리 파악을 할 때에 아주아주 좋은 기능이다.

만약 파일의 범위가 너무 크다면 코드를 드래그 후 ‘선택한 사항의 기록표시’ 기능도 사용할 수 있다.

또한 우클릭 목록을 보면 ‘로컬 기록’도 있는데, 깃에 남기지 않은 로컬에서 변경한 코드 기록도 전부 남아있다. 너무 든든한 기능이다.

하나의 파일에서 일부 코드만 add 하기

만족도: ⭐ ⭐ ⭐ ⭐ 

하나의 파일에서 일부의 코드만 선택하여 부분 add 할 수 있는 기능이다.

터미널에서도 git commit -p 명령어를 사용하면 가능하다.

하지만 이런 신중해야 하는 작업은 GUI를 사용하는게 더 편리하면서도 실수할 가능성이 적다고 생각한다.

VSCode에서는 드래그를 통해 stage할 코드 영역을 한 줄 단위로 구분하여 정확하게 지정할 수 있는데, 웹스톰에서는 그 정도까지 지원은 안되고 덩어리의 단위로만 구분 가능하다ㅠㅠ

사전 기능

만족도: ⭐ ⭐ ⭐ 

웹스톰에 사전이 등록되어있어서 오타를 작성하면 밑줄로 알려주고 다른 단어로 제안까지 해준다.

VSCode로 작성할때는 오타 실수가 많았었는데 웹스톰 쓴 이후로는 오타 실수가 사라졌다.

또 카멜 케이스로 작성하지 않고 소문자로만 작성했을 때에도 오타로 인식해서 카멜 케이스를 의식적으로 지키게 되는 효과도 있었다 ㅎㅎ

단점은 한국어는 Natural Languages에 등록되어있지 않아서 밑줄이 많이 그인다는 점이다..

3. 확장 플러그인 추천

GitToolBox

만족도: ⭐ ⭐ ⭐ ⭐ ⭐ 

만약 사용하고 있지 않다면 당장 바로 즉시 라잇나우 설치해서 사용할 것을 추천한다.

아래 사진처럼 커서가 있는 코드 줄의 커밋을 언제 누가 어떤 메세지와 함께 작성했는지 보여준다.

이 코드 대체 누가 쓴거야? 하면서 확인해보니 몇 개월 전의 본인이 썼던 코드였다는 재밌는 경험을 해볼 수 있다.

ESLint + Prettier

만족도: ⭐ ⭐ ⭐ ⭐ ⭐ 

javascript library인 Eslint, Prettier를 웹스톰에서 사용할 수 있게 연결해준다.

ESLint는 주로 문법적 에러나 안티 패턴들을 탐지하고 경고해서 코드 품질을 향상시킨다.

Prettier는 코드 품질과는 관계없이 코드의 스타일링에 대해서만 포맷팅을 한다.

ESLint에도 코드 포맷팅이 있긴 하지만 Prettier의 코드 포맷팅에 비해 특화되어있지 않아서, 코드 에러와 문법을 정적으로 탐지할때는 ESLint를 사용하고 포맷팅에는 Prettier를 사용한다.

Material Theme UI

만족도: ⭐ ⭐ ⭐ ⭐ ⭐ 

색상 테마를 바꿔주는 플러그인이다.

이쁘다. 코드를 쓸 때 기분이 좋아진다. 가독성이 높아진다.

환경설정 > 모양 및 동작 > 모양 에서 테마를 선택 할 수 있다. 참고로 나는 Material Darker를 사용중이다.

Atom Material Icons

만족도: ⭐ ⭐ ⭐ ⭐

폴더, 파일 아이콘 디자인을 이쁘게 바꿔준다.

Rainbow Brackets

만족도: ⭐ ⭐ ⭐ ⭐ ⭐

각종 괄호 (괄호, 중괄호 …) 를 짝에 맞게끔 무지개색으로 표시해준다. 가독성이 높아진다.

VSCode Keymap

만족도: ⭐ ⭐ ⭐ ⭐

단축키 사용을 VSCode버전으로 바꿔준다.

원래 VSCode를 사용하다 웹스톰으로 넘어온거라 VSCode의 단축키가 익숙했었다.

그리고 대세의 흐름을 따라 언제 다시 VSCode를 사용하게 될 지도 모르니, 에디터를 변경할때에 가장 큰 장벽이 되는 단축키를 통일하는게 좋다고 생각해서 사용중이다.

Git Link

만족도: ⭐ ⭐ ⭐ ⭐ 

현재 커서가 있는 줄의 코드의 깃허브 링크로 이동하거나 링크를 복사할 수 있다.

에디터에서 코드를 보던 도중 특정한 코드위치를 다른사람에게 공유하고 싶을 때, 링크로 전달하면 편리하다.

Git Comit Template

만족도: ⭐ ⭐ ⭐ 

커밋 메세지를 작성할때 템플릿을 지원해준다. 커밋 메세지 컨벤션을 지키면서 사용하는데에 도움이 된다.

Korean Language Pack / 한국어 언어 팩

만족도: ⭐ ⭐ ⭐ 

영어가 익숙하다면 영어버전으로 사용해도 되지만, 개인적으론 이것저것 환경설정 건드려볼 때는 한국어로 읽는게 편했었다.

Tabnine AI Code Compoetion

만족도: ⭐ ⭐ ⭐

AI가 프로젝트에서 사용된 코드 스타일을 학습하여 코드 자동완성을 추천해준다. 코드 작성시간이 단축된다.

Quokka

만족도: ⭐ ⭐ 

코드를 작성할때 실시간으로 코드 에러나 로그를 해당 코드 옆에 출력해서 보여준다.

하나의 파일을 평가한 결과만 출력해 볼 수 있어서 실무에서는 잘 쓰지 않는편이다.

알고리즘 문제 풀 때나 설명용의 짧은 예시코드 작성할 때에 쓰기 적당한 것 같다.

마무리

마지막으로 위 글에서 사용된 모든 움짤을 직접 만든 나에게 스스로 박수를 보낸다 👏 👏 👏 

웹스톰 사용자가 늘어나서 구글 검색 결과가 더 많아지길 바라며..혹시 글에서 소개하지 않은 웹스톰의 꿀기능이 있다면 댓글로 공유해주시면 감사하겠습니다 :)