[VS Code] 유용한 Extensions 추천!

많은 사람들이 사용하고 있는 에디터, vscode! Vscode는 에디터도 깔끔하고 확장 프로그램도 엄청 많이 지원해서 조금 더 편하게 코딩할 수 있다. 그중, 유용하게 쓰고 있는 extension들을 소개해보려고 한다.

 

• **주의**
• - 본인에게 꼭 필요한 extension만 설치할 것
• - 처음보는 extension들은 검색을 해보고, 다운로드 수가 얼마나 되는지 파악해보자

 

먼저, 아무것도 설치되지않은 VSCode는 다음과 같다.

VS Code를 설치 후 첫 화면

왼쪽의 메뉴바에서 블록 모양 버튼을 눌러보자. Search Extensions in Marketplace 입력창에 본인이 설치하고싶은 extension 이름을 입력하면 된다.

 

1.  indent-rainbow

indent의 depth에 따라, 색을 부여해서 조금 더 코드를 보기 쉽게 해주는 도구이다. 정말 유용하게 쓰고 있다. 자세한 설명

 

2. GitLens

git-lens

협업하는 사람들에게는 필수(?)인 extension이다. 코드를 눌러보면, 누가, 언제, commit log는 어떻게 남겼는지 알 수 있다. 이것 말고도 더 많은 기능을 제공하니 다양한 기능들은 여기에서 확인해보자.

 

 

 

3. One Dark Pro

나는 vscode의 기본 테마를 그닥 좋아하지 않아서, One Dark Pro 테마를 사용하고 있다.

이외에도 유명한 테마는 Material theme, Panda theme, Dracula theme정도이다. Dracula를 쓰다가 눈이 너무 아파서 One dark pro로 넘어왔다.

 

4. Material Icon Theme

Icon도 기본 테마를 좋아하지 않아서, Material Icon Theme을 사용하고 있다. 대게 Material이나 VS Code Icon을 사용하는 것 같다.



사용전 (왼) 사용후 (오)

뭔가 좀 더 보기 편해졌다. 

 

5. Live Share Extension Pack

정말 유용하다고 생각된 extension이다. 특히, 지금처럼 코로나 때문에 코드 리뷰를 면대면이 아닌 온라인으로 해야한다면, 서로 화면 공유를 통해 코드리뷰를 진행할 수 있다. 코드 리뷰뿐만 아니라, 팀플이나 협업 프로젝트 중 모르는 게 있으면 라이브 셰어를 통해 같이 해결해나갈 수 있다.

친구들이랑 가장 많이 했던 말: '야! 라이브 쉐어 켜봐'

 

6. npm Intellisense

node module을 import 할 때, 설치된 module을 기준으로 자동 완성해준다. 설치한 패키지들이 점점 많아질수록 유용한 extension이다.

자세한 설명

 

7. Path Intellisense

코드 작성 시 Path를 작성할 때 현재 경로를 인식하고 자동완성을 추천해준다. 예를 들어./까지./ 타이핑하면 현재 폴더 내의 파일 및 폴더를 자동 완성해준다.

자세한 설명

 

8. Auto Rename Tag

tag 이름을 바꾸면, 짝 tag 이름도 자동으로 바꿔주는 기능이다.

자세한 설명 

 

9. Auto Close Tag

tag를 만들면 자동으로 tag를 닫아준다.

자세한 설명  

 

이외에도 사용하다보면 유용한 extension들이 있는데 설명을 잘 읽어보고 설치하길 바란다.