[VSCode] 개발할 때 유용한 확장 프로그램 추천

개발자라면 한 번쯤은 써본 VSCode!
VSCode를 본격적으로 사용하기에 앞서 유용한 확장 프로그램 몇 가지를 추천하고자 한다.
(개인적으로 추천하고자 하는 익스텐션은 주황색으로 표시했으니 참고 바랍니다.)
 
* tips)
확장 프로그램 검색 및 추가하기 위해서는

[Ctrl + Shift + x] 단축키를 눌러주거나, 좌측 메뉴에 블럭처럼 생긴걸 눌러주면 이동할 수 있다.


- Auto Rename Tag
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

Auto Rename Tag - Visual Studio Marketplace

Auto Close Tag의 단짝태그
HTML에서 여는 태그나 닫는 태그 중 한 가지만 수정을 해도 두 가지 동시에 수정이 된다.

- Auto Close Tag
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

Auto Close Tag - Visual Studio Marketplace

Auto Rename Tag와 함께 사용하는 유용한 플러그인이다. 여는 태그와 닫는 태그를 일일이 입력해야 하던 것을 입력태그만 입력하게 해 준다.

- Bracket Pair Colorizer 2
괄호 여러개가 겹쳐있는 경우에 어디가 어디로 연결되어 있는지 알기 힘들다. 그럴 때 사용하는 확장 플러그인으로 쌍이 되는 괄호에 맞춰서 색이 변하게 된다.
현재 커서의 위치가 어느 괄호 안에 있는지도 색으로 표시해준다.
-> VScode가 최신버전인지 확인하고 아래 설정에 들어가 "bracket" 이라고 검색해주면 내장된 기능을 사용할 수 있다고 한다!

- Color Highlight
https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight

Color Highlight - Visual Studio Marketplace

색을 지정할 때 rgb나 16진수(#F699CC) 등 색상코드로 입력하면 해당하는 색을 코드의 배경색으로 보여준다.
CSS를 입히는 과정에서 현재 무슨 색으로 적용하였는지 바로바로 볼 수 있다.

 - indent-rainbow
https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

indent-rainbow - Visual Studio Marketplace

들여쓰기를 무지개 색상으로 표현되어 코딩에 도움을 주는 프로그램이다.

- Highlight Matching Tag
https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag

Highlight Matching Tag - Visual Studio Marketplace

페어 태그를 하이라이트 해주는 확장프로그램이다.
중첩되어 있거나 복잡한 태그 지옥을 분석할 때 유용하다.

- Korean Language Pack for Visual Studio Code
https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ko

Korean Language Pack for Visual Studio Code - Visual Studio Marketplace

필요시 한국어 팩을 설치해 한국어로 설정할 수 있다.

- Material Icon Theme
https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme

Material Icon Theme - Visual Studio Marketplace

아이콘 테마를 설정할수 있다. 머티리얼 외에도 많은 테마가 있으니 취향에 맞게 선택하면 된다.

- Image Preview
https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview

Image preview - Visual Studio Marketplace

이미지 URL 코드에 마우스를 올려놓으면 미리보기 이미지를 제공하는 확장 프로그램이다.

- Live Server
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

Live Server - Visual Studio Marketplace

웹 개발을 한다면 정말 필수적으로 설치해야하는 확장프로그램이다.
플러그인 설치를 하게 되면 VSCode 우측 하단에 Go Live라는 버튼이 생기는데 이 버튼을 눌러주면, 현재 코딩을 브라우저에서 바로 확인할 수 있다.

- Live Preview
https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server

Live Preview - Visual Studio Marketplace

HTML을 작성하며 확인하기 위해 빈번하게 브라우저를 켜지 않고 VScode 프로그램 자체에서 라이브 화면을 볼수 있다.

- Active File In StatusBar
https://marketplace.visualstudio.com/items?itemName=RoscoP.ActiveFileInStatusBar

Active File In StatusBar - Visual Studio Marketplace

현재 작업중인 파일의 경로를 상태표시줄에 출력

- CSS Variable Autocomplete
https://marketplace.visualstudio.com/items?itemName=vunguyentuan.vscode-css-variables

CSS Variable Autocomplete - Visual Studio Marketplace

CSS 변수에 대한 자동 완성 기능을 제공, 모든 css와 유사한 파일(SASS, LESS, CSS 지원)을 스캔하고 모든 변수에 대해 자동 완성 시킨다.

- GitLens
https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

GitLens — Git supercharged - Visual Studio Marketplace

코드의 특정 단락이나 라인에 해당 내용이 언제, 어떤 사람에 의해 작성된 내역인지 커밋 정보를 흐린 글씨로 자동 표시. 코드상에 커서를 올릴때 마다 확인 가능하다.
또한, 코드 작성 중 바로 저장소를 탐색 및 비교도 할 수 있다.

- IntelliCode
https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode

IntelliCode - Visual Studio Marketplace

코드 추천 완성 기능
개발자가 IDE 에디터에 코드를 입력 중인 해당 행에 가장 알맞은 어플리케이션 프로그램 인터페이스 (API) 를 추천해줍니다. 스마트폰 키보드 앱의 자동완성 단어 추천기능과 흡사한 기능

- Path Intellisense
https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

Path Intellisense - Visual Studio Marketplace

파일명 자동완성을 지원하는 익스텐션.
파일이나 이미지 등의 경로를 지정할 때 자동으로 경로를 보여주며, 이를 선택해서 지정할 수 있는 확장 플러그인
이미지 태그 경로나 CSS 배경 이미지 경로를 찾아갈 때 매우 편리하다.

- Code Spell Checker
https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

Code Spell Checker - Visual Studio Marketplace

code spell checker 란 코딩 할 때 오타를 방지하는 에디터 플러그인이다.

 
 
 

---

Reference
https://velog.io/@kimheewon/%EB%82%B4%EA%B0%80-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-VS-code-%ED%99%95%EC%9E%A5-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8
https://mine-it-record.tistory.com/498https://cheershennah.tistory.com/m/131