💻 VSCode에서 Webstorm으로 이사하기

Goodbye VSCode, 이사를 한 이유

사실 완전 이사를 한 것은 아닙니다. 😝
기존에 무료 IDE 이면서 사람들이 많이 쓰는 VSCode를 사용하고 있었지만, 회사에 입사하면서 동료분의 IDE인 Webstorm을 보고 두눈이 휘둥그레해졌달까요?
간단하게 제가 이사를 해야겠다고 마음먹은 이유를 적어보겠습니다.

소스트리가 Webstorm 안에?

정확히 말하면 '소스트리'가 Webstorm안에 들어가있다는 것은 아니지만, 소스트리처럼 브랜치의 상황을 UI로 볼 수 있습니다.
저는 VSCode를 쓸 때 Git GUI를 함께 사용했었습니다. CLI보단 GUI가 익숙하기도 하고 실수를 덜 하게 되더라구요😅😅
원래는 소스트리를 사용하다가 너무 느리고 자주 꺼져서 불편함을 느끼던 찰나에 Github Desktop으로 교체하게 되었습니다.
Github Desktop은 소스트리에 비해 자주 업데이트되고, 속도도 빨라서 좋긴 했지만 소스트리처럼 브랜치 상태를 이미지화해서 볼 수 없다는게 조금 아쉬웠습니다.

하지만, Webstorm 안에서 브랜치 상태를 UI로 볼 수 있습니다.
이것만 보면 어떤 브랜치들끼리 머지가 되었고, 지금 내가 작업하고 있는 브랜치가 어떤 상태에 있고, 다 볼 수 있습니다!
저같은 초보 개발자에게 아주아주 좋은 기능입니다 🥰
VSCode와 동일하게 당연히 Webstorm에서도 커밋, 푸쉬, 풀 모두모두 가능합니다.

그 외에 소박하고 귀여운 이유들

사실 거창한 이유는 Git UI가 엄청 컸고, 그 외에는 정말 소박하고 귀여운 이유들입니다.

• 프로젝트 세팅을 도와준 동료분의 IDE가 마침 Webstorm 이였다.
• VSCode 말고 다른 IDE도 써보고 싶은데 마침 이유가 생겼다.
• 회사에서 사주니까 💸💸💸 지금이 아니면 써볼 일이 없을 수도 있다.

그렇게 이사를 하기로 마음먹었고, Webstorm으로 이사하면서 커스텀한 설정들과 플러그인들에 관해 글을 기록해보려고합니다.
Webstorm을 사용해보려는 누군가 혹은 컴퓨터가 바뀌어서 새로 Webstorm 세팅을 해야하는 미래의 나를 위해 😝😝😝

내가 설치한 플러그인

플러그인은 상단 메뉴 Webstorm -> setting 으로 들어온 후 좌측 탭에서 플러그인을 찾아서 설치하면 됩니다.
내가 설치한 플러그인들은 다른 사람들이 많이 사용하는 플러그인이 대부분이기때문에 추천플러그인이라고 생각해도 좋을 것습니다.

ESLint

제 기억에 오류가 있을 수도 있지만 ESLint는 따로 플러그인에서 설치한 것이 아니였던 것 같습니다.
Setting에서 바로 ESLint를 검색하면 설정할 수 있는데, 설정을 안해두고 있으면 당연히 비활성화로 되어있습니다.

활성화에도 자동과 수동이 있는데 만약 ESLint를 좀 커스텀해서 사용했다면 수동 ESLint 활성화를 한 후에 해당 ESLint 파일을 연결해주면 될 것 같습니다.

그리고 밑에 저장 시 eslint --fix 실행까지 체크해주면 끝!

Prettier

Prettier역시 ESLint과 같은 방식으로 설정해주면됩니다.

GitToolBox

해당 플러그인을 사용하면 커서가 있는 코드에 대해 가장 최근 커밋을 남긴 사람이 누구인지 언제 커밋을 남겼는지에 대한 정보가 나옵니다.
지금 당장은 편리함을 느끼지 못했지만, 나중에 업무를 하면서 해당 코드를 작업한 사람이 누군지 알 수 있으니까 질문을 할 때도 편하지 않을까? 하는 생각을 합니다.

VSCode Keymap

사실 저는 생각보다 단축키를 많이 사용하지 않는 편이라고 생각하기때문에 Webstorm과 VSCode의 단축키가 다르다는 것을 알아도 크게 신경쓰지 않았습니다.
하지만 은근 사소한, 하지만 자주 쓰는 단축키들이 달라서 조금 불편했는데 해당 플러그인을 설치하면 바로 해결할 수 있습니다.

그 후 설정창의 좌탭에서 키맵을 선택하면 VSCode 키맵으로 바꿀 수 있습니다.

Key Promoter X

해당 플러그인은 저처럼 단축키를 잘 사용하진 않지만 앞으로 알아가고 싶은 사람들에게 좋을 플러그인 같습니다. (물론 단축키 마스터라면 비추)
제가가 어떤 동작을 마우스로 할 때마다 오른쪽 아래에 팝업이 뜨면서 단축키를 알려줍니다.
일단 지금은 단축키와 익숙해지는 단계라서 사용하고 있는데 꽤 좋은 것 같습니다.

LogIt

해당 플러그인은 커서가 위치한 곳 위에서 단축키를 사용하면 바로 console.log를 밑에 작성해줍니다.
맥 기준 초기 단축키는 option + L 로,

위와 같이 console.log를 넣어줍니다. 디버깅을 할 때 은근 많이 쓰기때문에 간편한 것 같습니다.

Nyan Progress Bar

해당 플러그인을 설치하면 로딩바에 고양이가 무지개를 그리면서 지나갑니다.
딱히 개발할 때 도움이 된다곤 할 수 없지만, IDE에 이런 귀여운 고양이를 심어두면 개발하다가 지칠 때, 혹은 로딩바를 보며 기다릴 때 힐링이 되지 않을까? 해서 설치해보았습니다. 🐱🐱🐱

Rainbow Brackets

해당 플러그인은 코드에서 사용된 각종 괄호를 색깔로 표현해줍니다.
열고 닫는 괄호를 한쌍으로 같은 색으로 표시해주고, 같은 쌍의 괄호가 아니라면 다른 색으로 표현해주기때문에 가독성이 좋아집니다.

Webstorm Theme (One Dark, Dracula Theme)

효율적인 개발을 위해 우리의 IDE를 예쁘게 꾸밀 필요가 있는데, One Dark Theme와 Dracula Theme가 제일 유명하고 많이들 사용하는 것 같았습니다.
지금 저는 Dracula Theme를 쓰고 있습니다. 다들 이렇게 손민수 하는거 아닐까요? 🥴

Atom Material Icons

폴더, 파일 아이콘 등을 예쁘게 꾸며줍니다. js 인지 jsx인지에 따라 다른 아이콘을 넣어주기때문에 좋다고 생각합니다.

Keymap을 사용하여 단축키 커스텀하기

이미 VSCode Keymap을 설치하여 VSCode에서 사용하던 단축키들을 가져왔습니다.
하지만 그 외에 제 맘대로 단축키를 설정하고 싶었기에 저는 설정 > 키맵에서 따로 커스텀을 해줬습니다.

일부를 말씀드리면 커맨드 + 1 부터 커맨드 + 4까지는 깃과 관련된 단축키를 설정해두었습니다.
브랜치, 커밋, 푸쉬, 풀 등등의 단축키들을 제가 기억하기 편한 순서대로 커스텀해두었고, 터미널을 끄고 키는 것 까지 단축키로 설정해두었습니다.

사실 제가 가장 많이 접근할 것같은 곳을 단축키로 설정해두어야하는데 단축키 사용을 생활화하지 못하다보니 아직 설정하지 못한 것들이 많지만 앞으로 차차 설정해둘 예정입니다.

어쨋든 단축키 세팅은 키맵에서하자 !

아직은 어색한 Webstorm

사실 IDE 하나 바꿨다고 드라마틱하게 달라질 것을 예상하지 않았지만, VSCode를 오래 썼더니 아직은 Webstorm이 어색하고 뭔가 기능을 찾으려고 할때마다 버벅거리고있긴합니다.
하지만 챕터리더님의 말씀대로 나의 입맛에 맞게 단축키도 커스텀하고, 위와 같이 플러그인도 설치하면서 이것저것 눌러보니 조금씩 친해지고 있습니다.

아직은 초기에 많이들 사용하는 플로그인들 위주로 작성했지만, 제가 앞으로 Webstorm을 사용하면서 강추할만한 플러그인이 있다면 계속 추가기입을 하는 것으로 해보겠습니다 🫡