꼭 설치해야 할 10가지 VS Code 확장 프로그램
Source: Dev.to
1. Prettier – Code Formatter
Prettier는 JavaScript, TypeScript, CSS, HTML 등 여러 언어를 지원하는 의견이 강한 코드 포매터입니다. 저장 시 자동으로 코드를 포맷해 주어 코드 스타일에 대한 논쟁을 없애줍니다.
왜 필요할까요
노력 없이 팀 전체에 일관된 코드 포맷을 적용할 수 있습니다. 대부분의 인기 프레임워크와 라이브러리와도 매끄럽게 통합됩니다.
프로 팁
VS Code 설정에서 “Format on Save”를 활성화하고 프로젝트 루트에 .prettierrc 설정 파일을 만들어 모두가 동일한 포맷 규칙을 따르도록 하세요.
2. ESLint
ESLint는 JavaScript와 TypeScript용 최고의 린팅 도구입니다. 문제 패턴을 식별하고 베스트 프랙티스를 따르도록 도와주며, 프로덕션에 도달하기 전에 잠재적인 버그를 잡아줍니다. 매우 유연하게 설정할 수 있고 커스텀 규칙도 지원합니다.
왜 필요할까요
오류를 일찍 발견하고, 코딩 표준을 강제하며, 코드베이스 전체의 품질을 유지합니다.
프로 팁
eslint-config-prettier를 사용해 ESLint와 Prettier를 결합하면 규칙 충돌을 방지할 수 있습니다. 또한 “Auto Fix on Save”를 켜두면 작업 중 자동으로 코드를 정리해 줍니다.
3. GitLens
GitLens는 VS Code에 기본으로 내장된 Git 기능을 한 단계 끌어올립니다. 블레임 주석을 통해 코드 작성자를 시각화하고, 저장소를 탐색하며, Git 히스토리를 풍부하게 시각화합니다.
왜 필요할까요
누가, 언제, 왜 코드를 변경했는지 쉽게 파악할 수 있어 Git을 강력한 협업 플랫폼으로 만들 수 있습니다.
프로 팁
Commit Graph 뷰를 사용해 브랜치와 머지를 시각화하세요. 인라인 블레임 주석이 너무 많다면 비활성화하고 툴팁 hover에 의존해도 됩니다.
4. Live Server
Live Server는 정적·동적 페이지용 로컬 개발 서버를 실행하고 실시간 리로드 기능을 제공합니다. HTML, CSS, JavaScript를 수정하면 브라우저에 즉시 반영됩니다.
왜 필요할까요
즉각적인 피드백이 워크플로우를 가속화합니다. 특히 프론트엔드 프로젝트에서 큰 도움이 됩니다.
프로 팁
Explorer에서 HTML 파일을 오른쪽 클릭하고 “Open with Live Server”를 선택하거나 단축키 Alt+L, Alt+O (Windows/Linux) / Cmd+L, Cmd+O (Mac)를 사용하세요.
5. Auto Rename Tag
HTML/XML 태그 쌍을 자동으로 동시에 바꿔 줍니다. 하나의 태그를 수정하면 대응되는 여는/닫는 태그가 동시에 업데이트됩니다.
왜 필요할까요
마크업 작업 시 태그 불일치를 찾는 시간을 크게 절약해 줍니다.
프로 팁
VS Code 설정에서 activationOnLanguage 옵션을 확인해 JSX와 TSX 파일에서도 활성화되어 있는지 확인하세요.
6. Path Intellisense
프로젝트 내 파일 경로에 대한 스마트 자동완성을 제공합니다. 경로를 입력하면 파일명과 폴더명을 제안·완성해 줍니다.
왜 필요할까요
파일 경로 오타를 없애고, 대규모 코드베이스를 더 효율적으로 탐색할 수 있습니다.
프로 팁
명확하고 일관된 네이밍 규칙으로 프로젝트 구조를 정리하면 확장 기능이 논리적인 폴더 계층에서 가장 잘 작동합니다.
7. Bracket Pair Colorizer 2
짝이 맞는 괄호에 색을 입혀 중첩된 코드를 쉽게 파악할 수 있게 해 줍니다. VS Code에도 기본 괄호 색상 기능이 있지만, 이 확장 프로그램은 추가적인 커스터마이징을 제공합니다.
왜 필요할까요
코드 구조를 즉시 이해하고 괄호 매칭에 소요되는 시간을 줄여 줍니다.
Note
다음 설정을 추가해 기본 색상화를 활성화할 수 있습니다:
{
"editor.bracketPairColorization.enabled": true
}8. REST Client
VS Code 안에서 HTTP 요청을 보내고 응답을 바로 확인할 수 있습니다. .http 또는 .rest 파일을 만들어 요청을 정리하세요.
왜 필요할까요
Postman 같은 외부 도구로 전환하지 않고도 API를 테스트할 수 있습니다. 요청 문서를 코드와 함께 보관할 수 있습니다.
프로 팁
변수와 환경 설정을 활용해 개발, 스테이징, 프로덕션 등 다양한 구성으로 관리하세요.
9. Better Comments
주석에 알림, 질문, TODO, 강조 등 다양한 태그를 색상으로 구분해 보다 인간 친화적인 주석을 만들 수 있게 도와줍니다.
왜 필요할까요
주석을 더 체계적이고 시각적으로 구분할 수 있어 문서화와 팀 커뮤니케이션이 향상됩니다.
프로 팁
settings.json에서 주석 스타일을 커스터마이즈하고, 기본 태그(!, ?, TODO, *) 외에 자신만의 태그도 추가해 보세요.
10. Error Lens
오류, 경고, 진단 정보를 전체 라인에 강조 표시하고 인라인으로 메시지를 보여 줍니다.
왜 필요할까요
작업 흐름을 방해하지 않고 즉시 오류를 파악할 수 있습니다. 인라인 표시가 시간 절약과 컨텍스트 전환 감소에 도움이 됩니다.
프로 팁
인라인 메시지가 방해가 된다면 설정을 조정해 오류만 표시하거나 배경 강조 강도를 낮추세요.
Extensions 설치 팁
- 리뷰와 평점을 확인한 뒤 설치하세요.
- 마지막 업데이트 날짜를 확인해 확장 기능이 활발히 유지 관리되고 있는지 확인하세요.
- 각 확장 기능이 요구하는 권한을 검토하세요.
- 사용하지 않는 확장 기능은 비활성화해 VS Code 성능을 유지하세요.
- VS Code의 Settings Sync 기능을 활용해 기기 간에 확장 기능을 동기화하세요.
- 핵심(Prettier, ESLint, GitLens, Live Server)부터 시작하고 필요에 따라 특화된 도구를 추가하세요.
이 확장 기능들은 VS Code Marketplace에서 제공되는 수많은 옵션 중 일부에 불과하지만, 모든 개발자에게 견고한 기반을 마련해 줍니다.