이게 무슨 일이야!

VSCode 로 개발 환경 세팅할 때 유용한 Extension 본문

프로젝트 관리

VSCode 로 개발 환경 세팅할 때 유용한 Extension

명동섞어찌개 2024. 2. 29. 18:40

프로젝트에서 유용하게 사용했던 VSCode Extension 을 공유하려고 합니다. 

 

아래 스토어에서 검색해서 볼 수도 있고,

 

https://marketplace.visualstudio.com/vscode

 

Visual Studio Marketplace

Extensions for Visual Studio family of products on Visual Studio Marketplace

marketplace.visualstudio.com

 

 

 VSCode 의 Extension 탭에서 검색해서 추가하는 것이 일반적인듯 합니다. 

 

 

기본적인 세팅

 

현재 만드는 페이지를 로컬 웹서버에서 쉽게 띄워서 볼 수 있는 Live Server 

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

 

Live Server - Visual Studio Marketplace

Extension for Visual Studio Code - Launch a development local Server with live reload feature for static & dynamic pages

marketplace.visualstudio.com

화면 미리볼 파일을 우클릭해서 Open with Live Server 를 선택하면 됨

 

 

 

git 을 사용한다면, git history 를 볼 수 있는 Git History

https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory

 

Git History - Visual Studio Marketplace

Extension for Visual Studio Code - View git log, file history, compare branches or commits

marketplace.visualstudio.com

 

 

 

 

 

 

퍼블리셔에게 특히 유용한 Extension

 

태그 닫기를 자동 완성해주는 Auto Close Tag

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

 

Auto Close Tag - Visual Studio Marketplace

Extension for Visual Studio Code - Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text

marketplace.visualstudio.com

 

 

 

태그 앞부분을 바꾸면 닫기 태그도 자동으로 바꿔서 완성해주는 Auto Rename Tag

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

 

Auto Rename Tag - Visual Studio Marketplace

Extension for Visual Studio Code - Auto rename paired HTML/XML tag

marketplace.visualstudio.com

 

 

 

CSS 의 컬러값의 색을 눈으로 미리 확인 가능한 Color Highlight

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

 

Color Highlight - Visual Studio Marketplace

Extension for Visual Studio Code - Highlight web colors in your editor

marketplace.visualstudio.com

이런식으로 VSCode 화면에서 컬러를 미리 볼 수 있다

 

 

 

 

Comments