[VS Code] Extensions 추천 - (2021.09.17)

제가 현재 사용하는 것들 소개 및 추천 드려보고자 합니다.

 

저도 필요에 따라 골라 쓰고 있으니 맘에 드는 것들 골라 쓰시면 되요. ^^

 

Extensions 메뉴를 열려면 단축키(⇧⌘X)를 사용하시거나 좌측 메뉴에서 아이콘을 클릭하시면 되요.

Appearance

Material Theme

요 확장은 칼라 테마를 변경할 수 있게 해줍니다.

⌘K⌘T 키를 눌러 원하는 테마를 선택할 수 있습니다.

기분따라 쓸 때도 있고, 기본을 쓸 때도 있어요.

예전에 Vim이나 eclipse를 썼을 때는 좋아하는 테마가 있어서 그런 것들 사용하거나 직접 만들어 썼었는데... 지금은 그냥 기본이나 요 테마 를 번갈아가며 써요.

Material Icon Theme

요 확장은 아이콘 테마를 변경할 수 있게 해줍니다.

Code -> Preferences -> File Icon Theme 메뉴를 사용하여 원하는 테마로 변경할 수 있습니다.

기본 아이콘은 좀 심심한 느낌이 있어서 이건 항상 적용해서 쓰고 있어요. ㅋ

Prettier - Code Formatter

요건 코드를 보기 좋게 정리해 주는 확장입니다.

많이들 적용해서 사용하고 있죠.

JS, TS, CSS, JSON, HTML 등등에 적용가능합니다.

VS Code 기본 기능보다 좀 더 보기 좋게 정리해주는 거 같아요. 

물론 원하는 대로 설정도 가능합니다.

Language + ⍺

C/C++

C (임베디드 펌웨어) 개발자이다 보니, 업무용 환경에는 요걸 항상 쓰고 있어요.

예전엔 CMake라던지 makefile, assembly 관련 확장도 썼었는데, 지금 회사는 요런걸 직접 사용하지 않고 Lua로 처리하고 있기도 하고 제가 직접 할 일은 없어서 그냥 요 기본만 사용하고 있네요.

Python

Python도 업무용과 취미 개발용으로 늘 항상 곁에두고 사용하는 터라 요것도 매번 설치해서 사용하고 있어요.

파이썬 개발을 좀 더 편하게 할 수 있도록 도와주는 확장입니다.

파이썬 개발을 VSCode로 하려면 요 2개는 거의 필수적인 확장입니다. ^^

JavaScript / TypeScript

요건 JS랑 TS용으로 사용 중인 확장이에요.

Go

Go로도 슬슬 개발을 해보려고 하는데... 올해는 시간이 허락될지 ㅎㅎ

요것도 Go 사용하면 필수라고 할 수 있을만큼 좋아요.

Svelte

개인적으로 최근에 애정하는 svelte 관련 확장입니다.

Svelte 개발을 하신다면 무조건 까셔야 하이라이팅이라던지 여타 기능을 사용해서 편하게 개발하실 수 있어요.

Svelte개발에 도움이 되는 intellisense 확장입니다.

아직 개선해 나가는 중이지만 일단 설치하셔서 사용하시는 편을 추천드립니다.

Svelte용 snippet 확장입니다.

Svelte용이라 그런지 접두어가 s-입니다. ㅎㅎ

Snippet은 없어도 문제는 없지만 있으면 편리할 때가 종종 있으니 살펴보시고 한 번씩 해보세요.

Vue

Vue도 개인적으로 맘에 드는 web 개발 framework 입니다.

개발 시 요 확장을 일단 설치해야 개발 시 도움을 받을 수 있어요. ㅎㅎ

React

React 용으로는 딱히 뭔가 좋은 확장을 발견하지 못했어요...

그래서 요 styled-component 관련한 확장만 썼었는데, 그마저도 TailwindCSS로 갈아탄 후에는 안쓰게 되네요. ^^;;

일단은 소개는 해봤지만, 향후 업데이트 하면서 뺄 수도 있을 것 같아요.

Jupyter

Jupyter Notebook을 VS Code 상에서 사용할 수 있게 도와줍니다.

아주 신박해요. ㅋㅋㅋ

Python 확장이랑도 연동 되고요.

주로 Google Colab을 사용하는데, 간단히 확인할 일 있으면 요걸로 VS Code에서 확인하고 있어요.

단축키를 좋아하시는 분이라면 요것도 괜찮을 것 같아요.

필수적인 것은 아닌데 jupyter 노트북의 키 바인딩을 도와주는 확장입니다.

Apollo / GraphQL

웹 서비스 개발에 있어 Rest와 양대 산맥을 이루는 느낌이 들만큼 성장한 GraphQL의 개발에 도움을 주는 확장입니다.

요거 사용한 이후로는 intellisense 덕분에 많이 편해졌어요. ㅎㅎ

GraphQL의 단짝 친구같은 느낌의 Apollo를 사용하기 편하게 도와주는 확장입니다.

Tailwind CSS IntelliSense

이전에 styled-component를 사용했었을 때는 vscode-styled-components 확장을 사용했었는데, TailwindCSS로 갈아탄 이후는 요놈을 사용하고 있어요.

당연하게도 외우고 쓰지 않고, 찾아가며 쓰고 있는데 굳이 검색 하지 않고도 이 확장만으로도 좀 더 편하게 사용할 수 있어서 좋더라고요.

Docker

Docker는 쓸 일이 거의 없어서 명령어도 까먹긴 했지만... 쓸 일이 있다면 이 확장이 정말 유용해요.

CLI를 사용하지 않고, GUI로 엄청 편하게 사용할 수 있거든요.

Dockerfile의 작성도 intellisense가 도와줘서 편하고요.

VSCode로 docker container 내부에 작업을 할 수 있게 해주는 확장으로 알고 있습니다.

Docker를 사용해서 뭔가를 좀 더 해보고 싶어서 저도 설치는 해놨네요.

Utility

GitLens - Git supercharged

VS Code랑 Git 전파를 자주 하고 다녔는데, 그때마다 추천 1순위인 툴입니다.

진짜 이건 무조건 설치하셔야해요. ㅋ

Blame 기능 때문에라도 진짜 너무너무 유용해요.

업무용 PC엔 지금까지 100% 항상 설치하고 있어요. 추천도 무조건이고요.

Git History

Git을 사용하면 이 확장도 항상 설치를 권하는 편이고 저도 무조건 설치를 하고 있는 툴이긴 해요.

지금 포스팅 하고 있는 PC는 업무용이 아니고 혼자 쓰는 컴이라 굳이 Git 관련 확장은 설치하고 있지 않지만, 업무 컴엔 무조건입니다.

다만 요 툴이 좀 무거워서.... 이전 회사에서 쓰던 GitLab이나 지금 회사에서 쓰는 BitBucket이나 큰 차이가 없긴 해요.

무겁지만 않으면 Local에서 쉽게 history 확인 가능하다는 장점이 클텐데....

eclipse에서 넘어왔을 때 가장 아쉬웠던 게, outline이랑 history 기능이었는데 outline은 이제 VS Code에서도 지원을 하고 있고, history 기능은 eclipse처럼 저장할 때마다 snapshot이 기록되진 않아도 commit 단위로는 history를 볼 수 있게 해주는 이 확장이 있어서 도움이 됩니다.

gitignore

요 확장은 gitignore 파일에 원하는 내용을 쉽게 추가해주는 기능입니다.

Command palette를 열고 Add gitignore를 선택하고, 원하는 set을 선택하면 됩니다.

어마어마한 양의 사전 정의된 set가 있어요.

Live Server

웹 개발 공부를 하신다면 정말 유용하게 사용하실 수 있는 툴입니다.

웹 서버를 구동해줘서 우리가 만든 html파일을 브라우저를 통해 구동시켜볼 수 있습니다.

하단 상태바에 단축 아이콘이 제공되서 클릭한 번으로 손쉬운 사용도 가능합니다. ^^

REST Client

이전에 한 번 포스팅 했던 그 확장입니다. ^^

REST 테스트를 VS Code 상에서 아주 쉽게할 수 있어요.

2020/09/30 - [Web/Etc] - [Web] Testing Rest API on VS Code

ESLint

TSLint는 deprecated 되었고, 많은 사람들이 좋아하는 ESLint가 살아남았네요. ㅎㅎ

저도 다시 이 확장만 남겼습니다. ^^

Debugger for Chrome

VS Code 상에서 디버깅을 도와주는 확장입니다.

VS Code도 V8엔진 기반으로 도는 electron으로 만들어져서 같은 기반이라 그런지 꿀떡같죠. ㅋ

Firefox를 사용하신다면 자매품 Debugger for Firefox도 있습니다. ^^

Hexdump for VSCode

임베디드 펌웨어 개발을 하다보면 binary file을 직접 까서 분석할 일이 많은데, 그때 아주 유용한 확장입니다.

관련 확장들 중에서 요게 제일 좋아서 요것만 사용하고 있어요.

사용은 해당 파일을 열고 우측 상단 아이콘을 이용해서 Hexdump 모드로 변환해서 보시면 되용.

Auto Close Tag

요건 닫는 태그를 자동으로 생성해주는 기능이에요.

기본적으로 HTML/XML이나 JSX/TSX를 작성할 때는 편하긴 한데, generic 기능같은 데서도 맘대로 tag로 판단하고 close tag를 달아버려서 불편할 때도 있어요.

요것들은 어떻게 설정으로 빼기도 힘들어서 ㅠ

사용은 각자 판단하셔서 쓰시면 되요. 전 그냥 가끔의 불편은 감수하고 사용을 하고 있어요. 

Auto Rename Tag

요건 사용을 추천하는 확장입니다.

태그를 수정하면 닫히는 태그도 같이 자동으로 수정해주는 꿀 기능이에요.

얘는 side effect도 별로 없어서 정말 편하기만 해요. ㅋ

highlight-words

코드 분석 툴인 Source Insight를 사용해보신 분들이라면, VS Code에서 요 highlighting 기능이랑 call-tree 그려주는 기능이 가장 아쉬울 거에요.

이 확장은 highlighting 기능을 강화시켜줍니다.

단축키를 등록해 놓고, 원하는 부분에서 highlighting 하면 코드 내의 모든 부분에서 highlighting 됩니다.

VS Code 기본 기능은 현재 선택한 부분만 되지만, 요건 반 영구적으로 해놓을 수 있어요.

변수/함수를 추적 분석할 때 유용해요.

 

⌃K+⌃S 키를 눌러 단축키 창을 열어 다음 단축키를 원하는 대로 지정하세요.

저는 요렇게 쓰고 있습니다.

Highlight Toggle Current	⌃⌘H
Highlight Remove All	⌃⌘R

원한다면 ⌘, 키를 눌러 settings 메뉴를 불러 Extensions->highlight-words 에서 원하는 설정을 하실 수도 있습니다.

Bookmarks

요 확장은 북마크 기능을 지원해줍니다.

Vim같은 경우 요런 게 편했는데, VS Code에서도 이 기능을 사용하면 가능합니다. +ㅁ+

본인 손에 맞게 단축키를 설정해 놓고, 원하는 코드를 북마크에 등록해서 언제든 편하게 열람할 수 있어요.

Path Intellisense

경로 추가를 쉽게 도와주는 확장입니다.

타이핑이 하나라도 줄면 좋은 거 아니겠습니까? ㅎㅎ

설정 등을 위해 소개 페이지는 한 번씩 보시면 좋을 것 같아요. ^^

Settings

추가로, VS Code의 설정에 대해서도 추가를 해보려고 합니다. ^^

이전에 소개해 드린 적이 있던 확장 기능이었죠. 바로 매칭되는 괄호의 색들을 바꿔서 좀 더 알아보기 쉽게 도와주는 확장이었어요.

요게 공식적으로 VSCode팀에 의해 채택되면서 기본 설정으로 할 수 있게 되었어요.

설정에 가셔서 요 옵션을 켜시면 이제 설치 없이 사용하실 수 있어요. ^^

그래서 이전에 소개했던 확장들 몇 개 제거하면서 같이 제거를 하고 이쪽에서 소개를 드리게 되었어요.