2024 VS Code 완벽 활용 필수 단축키 추천 플러그인

VS Code 기본 설정과 최적화

초기 설정하기

VS Code를 처음 설치하면 가장 먼저 해야 할 설정들입니다.

{
"editor.fontSize": 14,
"editor.fontFamily": "JetBrains Mono, Consolas, 'Courier New', monospace",
"editor.tabSize": 2,
"editor.wordWrap": "on",
"editor.minimap.enabled": false,
"editor.renderWhitespace": "all",
"files.autoSave": "afterDelay",
"workbench.colorTheme": "One Dark Pro"
}

성능 최적화 설정

메모리 사용량과 반응 속도를 개선하는 설정들입니다.

{
"files.watcherExclude": {
"/.git/objects/": true,
"/.git/subtree-cache/": true,
"/node_modules/": true
},
"files.exclude": {
"/.git": true,
"/.DS_Store": true
}
}

2. 필수 알아야 할 단축키 TOP 10

기본 편집

복사/붙여넣기: Ctrl/Cmd + C/V
전체 선택: Ctrl/Cmd + A
되돌리기/다시하기: Ctrl/Cmd + Z / Ctrl/Cmd + Shift + Z
여러 줄 선택: Alt + Click
코드 네비게이션
파일 찾기: Ctrl/Cmd + P
모든 명령어 보기: Ctrl/Cmd + Shift + P
심볼로 이동: Ctrl/Cmd + T
💡 프로 팁: 자주 사용하는 단축키는 근처에 있는 키들로 커스터마이징하면 더 효율적입니다.

 

3. 업무 효율을 높이는 추천 플러그인 TOP 10 

 

1. GitLens

코드 라인별 Git 정보 확인
변경 이력 추적
설치 방법 및 설정

{
"gitlens.codeLens.enabled": true,
"gitlens.currentLine.enabled": true
}

2. Prettier

코드 자동 포맷팅
설정 예시

 

{
"prettier.printWidth": 80,
"prettier.tabWidth": 2,
"prettier.singleQuote": true
}

 

 

3. ESLint

자바스크립트 코드 품질 관리
권장 설정

{
"eslint.validate": [
"javascript",
"typescript",
"javascriptreact",
"typescriptreact"
],
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}

4. Live Share

실시간 코드 공유 및 페어 프로그래밍
코드 리뷰에 최적화
설치 후 Microsoft 계정으로 로그인

5. Docker

컨테이너 관리 및 모니터링
Dockerfile 자동 완성
컨테이너 로그 실시간 확인
💡 실무 팁: Docker 플러그인은 docker-compose.yml 파일 작성 시 자동 완성 기능이 특히 유용합니다.

 

4. 언어별 추천 플러그인과 설정

 

JavaScript/TypeScript 개발

Auto Import

{
"typescript.updateImportsOnFileMove.enabled": "always",
"javascript.updateImportsOnFileMove.enabled": "always"
}

Path Intellisense

파일 경로 자동 완성
설정 예시

 

{
"typescript.suggest.paths": true,
"javascript.suggest.paths": true
}

Python 개발

Python Extension Pack
디버깅 도구
문법 검사
자동 완성
Jupyter
노트북 통합
인터랙티브 코딩

5. VS Code 커스터마이징 팁

테마 설정

인기 있는 테마들:
One Dark Pro
Dracula Official
GitHub Theme
Night Owl

아이콘 테마

{
"workbench.iconTheme": "material-icon-theme",
"workbench.productIconTheme": "material-product-icons"
}

글꼴 설정

{
"editor.fontFamily": "JetBrains Mono",
"editor.fontLigatures": true,
"editor.fontSize": 14,
"editor.lineHeight": 1.5
}

6. 자주 발생하는 문제 해결 가이드

성능 관련 문제

VS Code가 느려질 때
불필요한 확장 프로그램 비활성화
작업 영역 제한

{
"files.watcherExclude": {
"/node_modules/": true
}
}

메모리 사용량 최적화

{
"files.exclude": {
"/node_modules": true,
"/.git": true
}
}

7. 실무자들의 활용 팁

생산성을 높이는 설정

멀티 커서 활용

Alt + Click: 여러 위치 동시 선택
Ctrl/Cmd + D: 같은 단어 선택

스니펫 활용

json

Copy
{
"Print to console": {
"prefix": "cl",
"body": "console.log($1);",
"description": "Log output to console"
}
}

FAQ
Q: VS Code에서 가장 중요한 단축키는 무엇인가요?
A: Ctrl/Cmd + Shift + P (커맨드 팔레트)입니다. 모든 명령어를 검색하고 실행할 수 있습니다.

Q: 필수 플러그인은 무엇인가요?
A: GitLens, Prettier, ESLint는 대부분의 개발자가 사용하는 기본 플러그인입니다.