VSC Extension
✒️ 2025-05-14 10:21 내용 수정
사용 중인 Extension에 대한 기준
- 이 챕터에는 프로젝트와 여러 수업을 수강하면서 사용중인 Extension을 정리했다.
- 보통 작업 중에 코드 가시성을 올려줄 수 있는 Extension 위주로 설치했고, 미리보기나 라이브서버와 같이 HTML과 CSS를 바로 확인할 수 있는 Extension 등을 설치했다.
- 웹 개발을 하면서 필요한 Extension 위주로 설치하여 다른 개발에서도 자주 사용하는 Extension이 생기면 추가할 예정이다.
Extension 설치 방법
- 상단 메뉴 바에서 View - Extensions를 선택하면 Extension을 설치할 수 있다.
- 단축키 :
Ctrl + Shift + X
- 사용하려는 Extension 이름을 검색한 후 Install을 누르면 바로 설치가 진행된다.
언어 설정
1. Korean Language Pack for Visual
- VSC 한국어 팩으로 IDE 설정이 한글로 나온다.
- 설치 후 VSC를 재시작해야 한다.
미리보기 지원
1. Live Server
- 코드가 변경되면 웹 브라우저에서 바로 확인할 수 있는 서버다.
- Eclipse에서 사용한 Tomcat과 비슷한 듯 하다.
2. Live-preview
- VSC에서 바로 HTML과 CSS를 미리볼 수 있는 로컬 서버 Extension이다.
console.log와 같은 부분은 확인이 어렵다.
가시성 지원
1. prettier
- 들여쓰기 라인을 정리해준다.
- 다른 사람과 협업할 때 이 Extension이 없는 경우 들여쓰기 부분이 많이 깨지기도 한다.
2. indent-rainbow
- 들여 쓰기할 때 해당 라인을 색으로 구분 시켜준다.
3. Material Icon Theme
- VSC의 파일 탐색기에서 파일 확장자 별 파일 아이콘을 바꿔준다.
4. Image preview
- HTML이나 CSS에서 이미지를 넣을 때 왼쪽에 해당 이미지를 작게 표시한다.
코드 수정 지원
1. auto tag
- 시작 태그를 수정하면 종료 태그를 자동 수정하도록 해준다.
- HTML 참고.
- 간혹 이 Extension을 사용하다가 태그 수정 중에 꼬이는 경우도 있다.
2. windsurf
- AI 자동 코딩 및 채팅 기능이다.
- 코드를 작성할 때 파일 내 변수나 코드 동작 흐름을 파악하여 추천하는 코드를 미리보기로 보여주거나 리팩터링을 AI에게 요청할 수 있다.
- 최근에 AI를 많이 사용하면서 이 Extension도 자주 사용하고 있는데, 자주 사용하는 구문이나 대략적인 코드 흐름만 작성해도 자동완성으로 추천해주기에 매우 편리하게 작업하고 있다.
3. HTML/CSS/JavaScript Snippets
- HTML, CSS, JavaScript에 사용할 수 있는 Snippet을 제공한다.
- 해당 Extension없이도 Emmet으로 작업할 수 있는데, 이 Extension에선 좀 더 많은 Snippet을 쉽게 사용할 수 있도록 지원한다.
프로젝트 관리 지원
1. Project Dashboard
- VSC 프로젝트를 대시보드 형태로 관리할 수 있는 Extension이다.
- VSC에선 다른 프로젝트를 열 때 매번 폴더 위치를 잡아주고 이동하는 것이 번거로웠는데, 이 Extension을 사용하면 다른 프로젝트를 새로 열 때나 새 프로젝트를 추가하기 편했다.
2. file-tree-generator
- 프로젝트의 폴더 및 파일 구조를 txt 파일에 tree 형태로 작성하는 extension이다.
- 팀 프로젝트 발표에 사용할 파일 트리를 작성할 때 이 extension을 사용하여 바로 작성하였다.
- 모든 파일과 폴더를 tree에 포함하여 작성하기에 발표용으로 사용할 때는 중요한 내용만 남기고 지우면 된다.
Git과 Github 지원
1. Git Graph
- Git branch와 commit을 가시화한 그래프를 작성한다.
- VSC엔 이미 Git 변경 로그 그래프를 지원하지만 변경 branch 및 commit 내역과 파일 내역을 한 번에 보기에는 이 Extension이 더 편리했다.
- 사진은 유투브 클론코드 팀 프로젝트의 Git 내역이다.
