{"componentChunkName":"component---src-templates-blog-post-js","path":"/etc/VS-Code-확장-프로그램-추천/","result":{"data":{"site":{"siteMetadata":{"title":"Bottlehs Tech Blog","description":"웹·앱·AI 개발자 전병훈(bottlehs)의 기술 블로그. AI·LLM, JavaScript·Vue, Spring Boot, 알고리즘, 블록체인 실무 가이드를 다룹니다","siteUrl":"https://www.bottlehs.dev","author":{"name":"Jeon Byung Hun","summary":"개발을 즐기는 bottlehs - Engineer, MS, AI, FE, BE, OS, IOT, Blockchain, 설계, 테스트"},"social":{"github":"bottlehs","codepen":"bottlehs"}}},"markdownRemark":{"id":"a611e416-f2e2-5438-afae-e8e396d742bf","excerpt":"VS Code 확장 프로그램 추천 VS Code는 확장 프로그램으로 기능을 무한히 확장할 수 있다. 적절한 확장 프로그램을 선택하면 개발 생산성을 크게 향상시킬 수 있다. 이 글은 실무에서 가장 유용한 VS Code 확장 프로그램을 카테고리별로 정리한다. 1. 필수 확장 프로그램 Top…","html":"

$\"VS$

\n

VS Code는 확장 프로그램으로 기능을 무한히 확장할 수 있다. 적절한 확장 프로그램을 선택하면 개발 생산성을 크게 향상시킬 수 있다. 이 글은 실무에서 가장 유용한 VS Code 확장 프로그램을 카테고리별로 정리한다.

\n

1. 필수 확장 프로그램 Top 10

\n

1. ESLint

\n

ID: dbaeumer.vscode-eslint
\n용도: JavaScript/TypeScript 린팅
\n설치: ext install dbaeumer.vscode-eslint

\n

주요 기능

\n

실시간 코드 검사
자동 수정
설정 파일 지원

\n

2. Prettier

\n

ID: esbenp.prettier-vscode
\n용도: 코드 포맷팅
\n설치: ext install esbenp.prettier-vscode

\n

주요 기능

\n

저장 시 자동 포맷팅
다양한 언어 지원
커스터마이징 가능

\n

3. GitLens

\n

ID: eamodio.gitlens
\n용도: Git 기능 강화
\n설치: ext install eamodio.gitlens

\n

주요 기능

\n

코드 라인별 작성자/커밋 정보
파일 히스토리
브랜치 비교

\n

4. Live Server

\n

ID: ritwickdey.LiveServer
\n용도: 로컬 개발 서버
\n설치: ext install ritwickdey.LiveServer

\n

주요 기능

\n

자동 새로고침
로컬 서버 실행
빠른 프로토타이핑

\n

5. Auto Rename Tag

\n

ID: formulahendry.auto-rename-tag
\n용도: HTML/XML 태그 자동 변경
\n설치: ext install formulahendry.auto-rename-tag

\n

주요 기능

\n

시작/종료 태그 동시 변경
JSX, Vue 지원

\n

6. Path Intellisense

\n

ID: christian-kohler.path-intellisense
\n용도: 파일 경로 자동 완성
\n설치: ext install christian-kohler.path-intellisense

\n

주요 기능

\n

파일 경로 자동 완성
이미지 경로 힌트

\n

7. Bracket Pair Colorizer 2

\n

ID: CoenraadS.bracket-pair-colorizer-2
\n용도: 괄호 색상 구분
\n설치: ext install CoenraadS.bracket-pair-colorizer-2

\n

참고: VS Code 1.60+ 버전에서는 내장 기능으로 대체됨

\n

8. Error Lens

\n

ID: usernamehw.errorlens
\n용도: 에러/경고 인라인 표시
\n설치: ext install usernamehw.errorlens

\n

주요 기능

\n

코드 라인에 에러 직접 표시
실시간 피드백

\n

9. Thunder Client

\n

ID: rangav.vscode-thunder-client
\n용도: API 테스트
\n설치: ext install rangav.vscode-thunder-client

\n

주요 기능

\n

VS Code 내에서 API 테스트
Postman 대안

\n

10. Code Spell Checker

\n

ID: streetsidesoftware.code-spell-checker
\n용도: 철자 검사
\n설치: ext install streetsidesoftware.code-spell-checker

\n

주요 기능

\n

코드 내 철자 검사
변수명, 주석 검사

\n

2. 언어별 확장 프로그램

\n

JavaScript/TypeScript

\n

ES7+ React/Redux/React-Native snippets

\n

ID: dsznajder.es7-react-js-snippets
React 컴포넌트 스니펫

\n

TypeScript Importer

\n

ID: pmneo.tsimporter
자동 import 추가

\n

JavaScript (ES6) code snippets

\n

ID: xabikos.JavaScriptSnippets
ES6 스니펫

\n

Python

\n

Python

\n

ID: ms-python.python
공식 Python 확장

\n

Pylance

\n

ID: ms-python.vscode-pylance
Python 언어 서버

\n

Java

\n

Extension Pack for Java

\n

ID: vscjava.vscode-java-pack
Java 개발 필수 패키지

\n

3. 테마 및 UI

\n

Dark Theme

\n

One Dark Pro

\n

ID: zhuangtongfa.Material-theme
인기 다크 테마

\n

Dracula Official

\n

ID: dracula-theme.theme-dracula
Dracula 테마

\n

아이콘

\n

Material Icon Theme

\n

ID: PKief.material-icon-theme
파일 아이콘 테마

\n

vscode-icons

\n

ID: vscode-icons-team.vscode-icons
다양한 아이콘

\n

4. 생산성 확장 프로그램

\n

코드 편집

\n

Multi-cursor

\n

내장 기능 사용
Alt + Click으로 다중 커서

\n

Auto Close Tag

\n

ID: formulahendry.auto-close-tag
태그 자동 닫기

\n

Indent Rainbow

\n

ID: oderwat.indent-rainbow
들여쓰기 색상 구분

\n

검색 및 탐색

\n

Todo Tree

\n

ID: Gruntfuggly.todo-tree
TODO 주석 모음

\n

Bookmarks

\n

ID: alefragnani.Bookmarks
코드 북마크

\n

Better Comments

\n

ID: aaron-bond.better-comments
주석 강조 표시

\n

5. 디버깅 및 테스트

\n

디버깅

\n

Debugger for Chrome

\n

ID: msjsdiag.debugger-for-chrome
Chrome 디버깅

\n

REST Client

\n

ID: humao.rest-client
HTTP 요청 테스트

\n

테스트

\n

Jest

\n

ID: Orta.vscode-jest
Jest 테스트 실행

\n

6. Git 관련

\n

Git 확장

\n

Git Graph

\n

ID: mhutchie.git-graph
Git 그래프 시각화

\n

Git History

\n

ID: donjayamanne.githistory
파일/라인 히스토리

\n

GitHub Pull Requests

\n

ID: GitHub.vscode-pull-request-github
GitHub PR 관리

\n

7. 프레임워크별 확장

\n

React

\n

ES7+ React/Redux/React-Native snippets

\n

React 컴포넌트 스니펫

\n

vscode-styled-components

\n

ID: styled-components.vscode-styled-components
styled-components 문법 강조

\n

Vue

\n

Vetur

\n

ID: octref.vetur
Vue 지원 (Vue 2)

\n

Volar

\n

ID: Vue.volar
Vue 3 지원

\n

Angular

\n

Angular Language Service

\n

ID: Angular.ng-template
Angular 지원

\n

8. 데이터베이스

\n

데이터베이스 확장

\n

SQLTools

\n

ID: mtxr.sqltools
데이터베이스 클라이언트

\n

MongoDB for VS Code

\n

ID: mongodb.mongodb-vscode
MongoDB 지원

\n

9. 설정 및 추천

\n

추천 설정

\n

settings.json 예시

\n

{\n  \"editor.formatOnSave\": true,\n  \"editor.defaultFormatter\": \"esbenp.prettier-vscode\",\n  \"editor.codeActionsOnSave\": {\n    \"source.fixAll.eslint\": true\n  },\n  \"files.autoSave\": \"afterDelay\",\n  \"files.autoSaveDelay\": 1000\n}

\n

확장 프로그램 관리

\n

확장 프로그램 정리

\n

사용하지 않는 확장 제거
정기적인 업데이트
성능 모니터링

\n

10. 실무 활용 팁

\n

확장 프로그램 조합

\n

프론트엔드 개발자

\n

ESLint + Prettier
Auto Rename Tag
Live Server
GitLens

\n

백엔드 개발자

\n

REST Client
SQLTools
GitLens
Error Lens

\n

풀스택 개발자

\n

위 모든 확장
Thunder Client
Docker 확장

\n

성능 최적화

\n

성능에 영향을 주는 확장

\n

너무 많은 확장 설치 지양
사용하지 않는 확장 비활성화
정기적인 확장 정리

\n

FAQ

\n

Q: 몇 개의 확장 프로그램을 설치해야 하나요?
\nA: 필요한 것만 설치하는 것이 좋다. 일반적으로 10-20개 정도가 적당하며, 프로젝트에 따라 다르다.

\n

Q: 확장 프로그램이 VS Code를 느리게 하나요?
\nA: 일부 확장은 성능에 영향을 줄 수 있다. 느려진다면 사용하지 않는 확장을 비활성화하자.

\n

Q: 모든 확장을 설치해야 하나요?
\nA: 아니요. 프로젝트와 작업 스타일에 맞는 확장만 설치한다. 필요한 것부터 하나씩 추가하는 것을 추천한다.

\n

Q: 확장 프로그램이 충돌하나요?
\nA: 드물지만 충돌이 발생할 수 있다. 문제가 있다면 확장을 하나씩 비활성화하여 원인을 찾는다.

\n

Q: 무료 확장만 사용할 수 있나요?
\nA: 대부분의 확장은 무료다. 일부 프리미엄 기능이 있는 확장도 있지만, 기본 기능은 무료로 충분하다.

\n

Q: 확장 프로그램을 팀과 공유할 수 있나요?
\nA: .vscode/extensions.json 파일에 추천 확장을 추가하면 팀원들이 쉽게 설치할 수 있다.

\n

개발 환경 구축 후 프로젝트 기회

\n

VS Code 확장 프로그램으로 생산성을 높였다면, 다양한 프로젝트에서 그 역량을 발휘해보자. 블루버튼 같은 프로젝트 매칭 플랫폼에서 프론트엔드 개발, 백엔드 개발, 풀스택 프로젝트 등 다양한 기회를 찾을 수 있다. 특히 이 글에서 소개한 확장 프로그램들을 활용할 수 있는 프로젝트에서 개발 효율성을 크게 향상시킬 수 있다. ESLint, Prettier, GitLens 같은 도구들이 팀 협업 프로젝트에서 특히 유용하다.

","tableOfContents":"

\n
1. 필수 확장 프로그램 Top 10
\n
- 1. ESLint
- 2. Prettier
- 3. GitLens
- 4. Live Server
- 5. Auto Rename Tag
- 6. Path Intellisense
- 7. Bracket Pair Colorizer 2
- 8. Error Lens
- 9. Thunder Client
- 10. Code Spell Checker
\n
\n
2. 언어별 확장 프로그램
\n
- JavaScript/TypeScript
- Python
- Java
\n
\n
3. 테마 및 UI
\n
- Dark Theme
- 아이콘
\n
\n
4. 생산성 확장 프로그램
\n
- 코드 편집
- 검색 및 탐색
\n
\n
5. 디버깅 및 테스트
\n
- 디버깅
- 테스트
\n
\n
6. Git 관련
\n
- Git 확장
\n
\n
7. 프레임워크별 확장
\n
- React
- Vue
- Angular
\n
\n
8. 데이터베이스
\n
- 데이터베이스 확장
\n
\n
9. 설정 및 추천
\n
- 추천 설정
- 확장 프로그램 관리
\n
\n
10. 실무 활용 팁
\n
- 확장 프로그램 조합
- 성능 최적화
\n
FAQ
개발 환경 구축 후 프로젝트 기회

","wordCount":{"words":733},"fields":{"slug":"/etc/VS-Code-확장-프로그램-추천/","image":null,"faq":[{"question":"몇 개의 확장 프로그램을 설치해야 하나요?","answer":"필요한 것만 설치하는 것이 좋다. 일반적으로 10-20개 정도가 적당하며, 프로젝트에 따라 다르다."},{"question":"확장 프로그램이 VS Code를 느리게 하나요?","answer":"일부 확장은 성능에 영향을 줄 수 있다. 느려진다면 사용하지 않는 확장을 비활성화하자."},{"question":"모든 확장을 설치해야 하나요?","answer":"아니요. 프로젝트와 작업 스타일에 맞는 확장만 설치한다. 필요한 것부터 하나씩 추가하는 것을 추천한다."},{"question":"확장 프로그램이 충돌하나요?","answer":"드물지만 충돌이 발생할 수 있다. 문제가 있다면 확장을 하나씩 비활성화하여 원인을 찾는다."},{"question":"무료 확장만 사용할 수 있나요?","answer":"대부분의 확장은 무료다. 일부 프리미엄 기능이 있는 확장도 있지만, 기본 기능은 무료로 충분하다."},{"question":"확장 프로그램을 팀과 공유할 수 있나요?","answer":".vscode/extensions.json 파일에 추천 확장을 추가하면 팀원들이 쉽게 설치할 수 있다."}]},"frontmatter":{"title":"VS Code 확장 프로그램 추천 - 개발 생산성을 높이는 필수 확장 20선","date":"2025년 12월 23일","dateISO":"2025-12-23T06:45:00.000Z","updatedISO":null,"category":"etc","description":"VS Code 개발 생산성을 극대화하는 필수 확장 프로그램을 추천한다. 코드 편집, Git, 디버깅, 테마, 프로덕션 등 카테고리별로 실무에서 바로 사용할 수 있는 확장 프로그램을 정리했다.","tags":["VS Code","확장 프로그램","개발 도구","생산성","에디터","개발 환경"]}}},"pageContext":{"slug":"/etc/VS-Code-확장-프로그램-추천/","previous":{"fields":{"slug":"/javascript/프론트엔드-프레임워크-선택-가이드/"},"frontmatter":{"title":"프론트엔드 프레임워크 선택 가이드 - React vs Vue vs Svelte 실전 비교","tags":["React","Vue","Svelte","프론트엔드","프레임워크","JavaScript","프레임워크 비교"]}},"next":{"fields":{"slug":"/ai/2025년-AI-개발-트렌드-요약-개발자가-알아야-할-핵심-변화/"},"frontmatter":{"title":"2025년 AI 개발 트렌드 요약 - 개발자가 알아야 할 핵심 변화","tags":["AI 트렌드","AI 개발","개발자 생산성","LLM","AI 코딩","멀티모달 AI","RAG","AI Agent","소규모 LLM","2025년 트렌드"]}}}},"staticQueryHashes":["213619243","3262363727"]}