내가 정착한 VSCode 환경 설정 💞 소개

많은 사람들이 개발할 때 사용하는 IDE VSCode! 나도 쓴다.

VSCode extension에서는 플러그인 뿐만 아니라 개개인이 만든 다양한 테마를 설치할 수도 있어서 이것저것 사용해보다가,

기록으로 남길 겸 최근에 정착한 스타일과 플러그인을 소개하고 그 설정 방법을 공유해보고자 한다.

 

 

 

 

 

Theme: Nord

An arctic, north-bluish clean and elegant Visual Studio Code theme

톤다운된 북극 감성을 가진 테마로, 깃허브의 리드미도 엄청 예쁘다.

Extension marketplace에서 검색 후 설치, Enable시키면 끝!

 

북극 테마답게 컬러 팔레트 이름도 과몰입한 느낌이 너무 마음에 들어서 추가해본다.

 

 

Nord를 사용한 이후로는 여기에 정착해버렸는데, 이전에는 Synthwave'84, Night Wolf등의 테마를 사용해보기도 했다.

약간 색깔이 있는 다크모드를 원했던.. 발악이었다.

이제와서 생각해보니 내가 원하는 색깔 조합이 있으면 테마를 직접 만들어봐도 되겠다. (한번 해볼까.. 👀)

 

 

 

 

Font: JetBrains Mono + Pretendard

JetBrains는 영문, Pretendard는 한글을 표현할 때 사용하고 있으며 두가지 다 프리로 풀려 있다.

JetBrains Mono는 모노스페이스 타입의 폰트라, 아래 그림과 같이 모든 글자(알파벳)의 너비가 동일하게 출력된다.

그리고 Pretendard는.. 최고다. 폰트 자체도 예쁘지만 엄청 많은 글자를 지원하기도 하고, 무엇보다 프리라는게.. 덕분에 내가 사용하는 모든 프로그램, 개발한 웹사이트의 폰트 셋팅은 Pretendard로 하고 있으며 무덤까지 같이 갈 예정이다. ❤️‍🔥

https://en.wikipedia.org/wiki/Monospaced_font / 내가 실제로 사용중인 조합 예시!

 

폰트는 위 제목에 링크된 곳에서 다운로드하여 설치한 뒤, VSCode에서 설정해주면 된다.

하단 톱니바퀴(Settings)를 눌러 font를 검색하면 폰트를 설정할 수 있는 입력창이 나온다.

영문은 JetBrains 설정을 했고, JetBrains가 지원할 줄 모르는 한글은 Pretendard가 백업하도록 하기 위해 아래와 같은 순서로, 기존에 설정되어있던 폰트 앞에 작성했다.

JetBrains Mono, Pretendard, 

JetBrains Mono, Pretendard, 를 맨 앞에 추가

모든 폰트를 최애인 Pretendard로 설정하지 않은 이유는 영어와 한글을 확실하게 구분하고 싶었던 이유도 있고, JetBrains 폰트는 왠지 게임 폰트같아서 게임을 하듯 즐겁게 코딩..^^ 하고싶다는 의미도 있었다.

 

 

 

 

Extensions

마지막으로, VSCode를 통해 리액트로 웹개발을 하는 입장에서 사용하는 플러그인들을 소개한다.

 

 

vscode-styled-components

styled components를 사용해서 코드를 작성할 때 자동완성을 지원해준다 ㅎㅎ

 

 

 

 

Reactjs code snippets

벨로퍼트님의 강의를 들으면서 알게 된 플러그인으로, 기본적인 구조를 작성할 때 코드를 좀 덜 타이핑하게 해준다..😀

 

 

 

Marp for VS Code

마크업을 작성하면 ppt로 만들어주는 신기한 플러그인. 정말 가볍게 작성하기엔 좋은데, 개인적으로 ppt 꾸미는 걸 좀 즐기는 편이기도 하고 가볍게 발표할 일이 적어지다보니 딱 한번 사용해본 것 같다.

 

 

Live Share

MS가 만든 플러그인으로, 원격 페어프로그래밍의 필수템이다.

vs코드로도 가능하고, 웹으로도 할 수 있다! 난 이게 정말 너무 신기했다..

 

 

 

GitLens

깃의 여러가지를 보여준다. 사실 내가 쓰는 기능은 엄청 한정적인데, 주로 "이 코드 누가썼어!? 한달 전의 나." 임을 확인할 때이다.

 

 

Prettier

코드 컨벤션을 위해 포매팅을 지원해주는 플러그인! 파일을 저장하면 라인 당 글자수라던가 인덴트가 자동으로 조절되어서 좋다.

원래는 ESLint를 써보다가 이게 더 편해서 갈아탔다. (더 빡빡하게 체크하려면 린트를 써야겠지..?)

 

 

Polacode, CodeSnap

선택한 코드 블럭을 스크린샷처럼 만들어줘서, 블로그에 올리거나 어딘가에 간단하게 공유하기 좋다.

Nord 테마에 이 플러그인을 사용하면 아래와 같은 이미지 파일을 얻을 수 있는데,

Polacode는 코드만 보여주고, CodeSnap은 맥같은 ui를 기반으로 라인 번호를 알려준다. 이러한 모양은 기본 설정이고, 추가적인 설정을 통해 배경색 등의 옵션을 변경할 수 있다.

좌: Polacode, 우: CodeSnap

 

 

import cost

이건 다른 개발자분이 사용하시는걸 보고 신기함 반, 왠지 cost도 고려하면서 개발할 수 있으려나 하는 기대감 반을 가지고 설치했는데 아직까지는 신기함만 충족했다.

 

 

 

 

 

 

 

 

 

 

 

글을 쓰고보니 이런 스타일 설정과 플러그인을 유지한 지 꽤 오래된 것 같다. 

이 조합은 여러 커뮤니티에서 사람들이 올린 스크린샷을 보고 “뭐쓰세요” 해서 알게 된 것들이라 내가 직접 찾아본 게 딱히 없어서 왠지 반성하게 된다. 사용하는 것들도 좋지만 뭔가 새로운 플러그인을 헌팅해봐야 하나?! 하는 조급한 생각이 들기도 한다 😅

개발, 개발환경 전체적으로 좀 더 적극적일 필요가 있다는 이상한 결론, 그리고 vscode 테마 한번 만들어보고싶다는 다짐을 해본다.