Visual Studio Extension 추천

Extension은 소스 코드 편집기인 vscode에서 개발 편의를 위해 기능을 확장해 새로운 기능을 추가하는 것을 말한다. 이번 글에서는 수많은 Extension 중 직접 사용해보고 만족했던 몇 가지를 기록하고자 한다.

만족

Dashboard

개인적으로 가장 잘 쓰고 있는 Extension이다. 자주 사용하는 폴더, 파일, SSH 원격 연결을 대시보드에 고정해서 빠르게 액세스할 수 있다. 일일이 폴더를 열거나, 파일을 찾는 시간을 줄여주는 고마운 Extension이다.

• 대시보드에서 프로젝트와 그룹을 직접 편집하고 순서를 변경할 수 있다.
• 프로젝트명에 이모지를 추가할 수 있다.
• 프로젝트의 색상 변경이 가능하다.
• Extension install 시 왼쪽에 Dashboard를 열 수 있는 아이콘이 생긴다. 단축키는 Ctrl + F1이다.
• 상단의 톱니바퀴 (설정)으로는 Dashboard의 설정을 변경할 수 있다.
• 각 폴더 내 톱니바퀴 (설정)으로는 폴더 내부의 정렬을 변경하거나, 각 폴더의 색상을 변경할 수 있다.

Remote - SSH

원격 연결을 할 때 필요한 Extension이다. SFTP와 달리, 직접 원격 서버에 접근해서 파일을 수정할 수 있다.
vs code에서 ssh를 사용하기 위해서는 Remote - SSH Extension을 install해야 한다.

인파 님 - VSCode Remote SSH 사용법 (+AWS에 접속)

SFTP

sfpt 또한 ssh처럼 원격 연결을 위해 사용한다. SFTP를 검색하면 여러 Extension이 나오는데, 필자는 Natizyskunk의 SFTP를 install했다.
참고로, ssh와 달리, 서버에 연결될 로컬 공간이 필요하다.

poArlim 님 - [sftp] vscode에서 서버 연결하기

Auto Rename Tag

이 Extension을 설치하면 html, xml, php 등에서 태그를 이루는 쌍이 같이 자동으로 변경된다.

어쩌다보니여기까지~ 님 - [익스텐션] Vscode 에서 태그명 변경 시 자동으로 닫힘 태그명까지 변경 (Auto Rename Tag)

Markdown All In One

마크다운을 작성할 때 많은 도움을 준다. 예를 들면, 목차를 생성하기 위해 1.을 하고 엔터 -> 탭을 하면 들여쓰기가 되면서 하위 목차인 1.이 자동으로 생성된다. - 또한 마찬가지로, 엔터 -> 탭을 하면 들여쓰기가 된 - 가 생성된다. 외에도 이미지를 넣을 때 경로를 보여준다거나, 수식을 넣을 수 있게 해준다거나, 테이블을 생성했을 때 보기 좋게 너비를 맞춰주는 것 등을 지원한다.
Extension 설명이 상세하게 작성되어 있기 때문에 설명만 봐도 무난히 사용 가능하다.

외에도

• Live Server
  • 실시간으로 수정한 코드를 브라우저에 반영하여 확인할 수 있다.
• Path Intellisense
  • 입력한 경로 아래에 어떤 폴더 or 파일이 있는지 보여준다. 즉, 폴더 경로를 확인할 수 있다.
• Shell-Format
  • 쉘 스크립트, Dockfile, .gitignore, .env 파일 등의 포맷팅을 돕는다.

을 설치해두었다.

꾸미기

Material Icon Theme

설정하지 않았을 때보다 어떤 게 폴더고 어떤게 파일인지, 이 파일은 어떤 확장자를 가지고 있는지가 한눈에 보인다. Community Material Theme나 Meterial Theme Icons, Material Theme 등 다양한 테마가 있지만 필자는 이 아이콘이 가장 마음에 들었다.

Prettier

소스코드를 정해진 코딩 스타일과 일치하도록 자동 정렬하는 코드 포맷터다. 정렬 단축키는 Alt + Shift + F 다.
설정을 통해 기본 정렬 방식을 Prettier로 변경할 수 있다.

Indent-rainbow

들여쓰기 수준에 따라 서로 다른 색을 입힌다. if문에서 } 가 제대로 닫혔는지, 태그가 닫혔는지 등을 파악하는데 유용하다.
설정을 통해 들여쓰기 수 (4칸 -> 2칸) 변경이 가능하다.

Color Highlight

색 지정 시 입력한 색상코드의 색을 보여준다. CSS 작업을 할 때 유용하다.

Stylelint

설치만 해놓았다. CSS 작업을 할 때 유용하다고 하는데, 나는 개인 프로젝트 할 때 외에는 프론트 코드를 잘 만지지 않아서 설정하지 않았다.