VSCode 익스텐션 잘못 깔아 느려질 때? — 개발생산성 TOP 5 추천+설정

새로운 프로젝트를 시작하며 개발 생산성을 높이려 잔뜩 기대를 안고 VSCode 익스텐션을 설치했는데, 막상 편집기가 버벅거리고 느려져서 오히려 개발 속도가 떨어진 경험이 있으신가요?

대부분의 익스텐션은 백그라운드에서 동작하며 일정량의 시스템 자원을 소비하기 때문에, 무분별한 설치는 성능 저하로 이어질 수 있습니다.

이 글에서는 개발 생산성을 극대화하면서도 VSCode 성능 저하를 최소화할 수 있는 핵심 익스텐션 TOP 5를 소개하고, 각 익스텐션의 최적 설정 가이드를 구체적으로 알려드립니다.

VSCode 익스텐션, 왜 느려지는 걸까요?

익스텐션은 VSCode의 기능을 확장해주지만, 각각이 독립적인 프로세스를 가지거나 백그라운드에서 지속적으로 작업을 수행합니다. 설치된 익스텐션 수가 많아질수록 VSCode는 더 많은 리소스를 할당해야 하므로 성능 저하가 발생합니다. 특히 특정 익스텐션은 메모리 사용량이 많거나, 디스크 I/O를 빈번하게 유발하여 편집기 전체를 느리게 만들 수 있습니다.

이러한 현상은 단순히 편집기 로딩 속도를 늦출 뿐만 아니라, 코드 자동 완성, 파일 저장, 심지어 단순한 텍스트 입력 반응 속도에도 영향을 미쳐 개발 흐름을 방해합니다. 불필요한 익스텐션을 정리하고, 필요한 익스텐션만 신중하게 선택하며 최적의 설정으로 사용하는 것이 중요합니다.

Photo by Daniil Komov on Pexels

개발 생산성을 극대화하는 VSCode 익스텐션 TOP 5

이제 성능 저하 걱정 없이 개발 생산성을 획기적으로 향상시킬 수 있는 핵심 익스텐션 5가지를 소개합니다. 각 익스텐션은 코드 작성부터 협업까지 개발 과정 전반에 걸쳐 큰 도움을 줄 것입니다.

1. Prettier — 코드 포맷터

코드를 자동으로 일관된 스타일로 정리해주는 익스텐션입니다. 프로젝트 팀원 간 코드 스타일 통일에 대한 논쟁을 없애고, 코드 리뷰 시간을 절약해줍니다. 파일 저장 시 자동 포맷팅 기능을 활성화하면 매번 수동으로 코드를 정돈할 필요가 없어 약 10% 이상의 코드 정리 시간을 절약할 수 있습니다.

1. settings.json 열기 — Ctrl + , (Mac: Cmd + ,) → 상단 우측 {} 아이콘 클릭
2. 기본 포맷터 설정 — ”editor.defaultFormatter”: “esbenp.prettier-vscode” 추가
3. 저장 시 자동 포맷팅 활성화 — ”editor.formatOnSave”: true 추가
4. 다른 포맷터 비활성화 — Prettier와 충돌할 수 있는 다른 코드 포맷팅 익스텐션 (예: ESLint의 포맷팅 기능)은 필요에 따라 비활성화하거나, settings.json에서 특정 언어에 대한 기본 포맷터를 명확히 지정해 충돌을 방지합니다.

2. ESLint — 코드 품질 관리

자바스크립트 및 타입스크립트 코드에서 잠재적인 오류나 스타일 위반을 찾아내 수정하도록 도와주는 린터입니다. 실시간으로 코드 문제를 알려주어 버그를 미리 방지하고, 프로젝트의 코드 품질을 일관되게 유지하는 데 필수적입니다. 숙련된 개발자도 놓칠 수 있는 사소한 실수를 바로잡아 주어 장기적으로 약 20%의 디버깅 시간을 단축할 수 있습니다.

1. ESLint 익스텐션 설치 — ESLint 검색 후 설치
2. settings.json 설정 — ”eslint.validate”: [“javascript”, “typescript”] 및 ”editor.codeActionsOnSave”: {“source.fixAll.eslint”: true} 추가. 저장 시 ESLint가 자동으로 문제를 수정하도록 합니다.
3. .eslintrc.* 파일 설정 — 프로젝트 루트에 .eslintrc.js 또는 .eslintrc.json 파일을 생성하여 팀 규칙에 맞는 린팅 규칙을 정의합니다. extends 옵션으로 eslint:recommended나 airbnb와 같은 표준 설정을 활용할 수 있습니다.

3. GitLens — Git 버전 관리의 혁신

Git 관련 정보를 VSCode 에디터 내에서 시각적으로 풍부하게 제공하는 강력한 익스텐션입니다. 누가, 언제, 어떤 코드를 변경했는지 직관적으로 알 수 있어 코드의 히스토리를 빠르게 파악하고 문제 발생 시 원인을 추적하는 데 매우 유용합니다. 복잡한 git blame 명령어를 매번 입력할 필요 없이 클릭 한 번으로 모든 정보를 확인할 수 있어 하루에 10분 이상의 시간을 절약해줍니다.

1. GitLens 익스텐션 설치
2. settings.json 설정 (성능 최적화) — ”gitlens.hovers.currentLine.enabled”: false로 설정하여 현재 줄에 대한 Git 정보를 항상 표시하지 않도록 해 리소스 소모를 줄입니다. 필요할 때만 마우스를 올리면 표시됩니다.
3. 사이드바 보기 설정 — GitLens 사이드바에서 File History, Line History 등을 활용하여 특정 파일이나 라인의 변경 이력을 쉽게 추적합니다. 불필요한 뷰는 숨겨서 깔끔하게 유지할 수 있습니다.

4. Path Intellisense — 경로 자동 완성

파일 경로를 입력할 때 자동 완성 기능을 제공하여 오타를 줄이고 시간을 절약해주는 단순하지만 매우 효과적인 익스텐션입니다. 특히 대규모 프로젝트나 복잡한 폴더 구조에서 파일 경로를 일일이 기억하거나 찾아다닐 필요 없이 빠르고 정확하게 입력할 수 있게 돕습니다. 작은 기능 같지만, 개발자가 하루에 최소 5번 이상 경로를 입력한다고 가정하면 상당한 생산성 향상에 기여합니다.

1. Path Intellisense 익스텐션 설치
2. 기본 설정 사용 — 이 익스텐션은 대부분 기본 설정만으로도 충분히 강력합니다. 추가적인 복잡한 설정은 거의 필요하지 않습니다.
3. 제외 경로 설정 (선택 사항) — 특정 폴더 (예: node_modules, dist) 내 파일은 자동 완성에서 제외하고 싶다면 settings.json에 ”path-intellisense.ignore.directories”: [“/node_modules”, “/dist”] 와 같이 설정할 수 있습니다. 이는 성능에도 약간의 도움을 줍니다.

5. Live Share — 실시간 협업의 미래

팀원들과 VSCode 세션을 실시간으로 공유하여 코드를 함께 작성하고 디버깅할 수 있게 해주는 마이크로소프트의 공식 익스텐션입니다. 원격 환경에서 마치 한 컴퓨터에서 작업하는 것처럼 협업할 수 있어, 페어 프로그래밍이나 코드 리뷰를 훨씬 효율적으로 만들 수 있습니다. 복잡한 환경 설정 공유 없이 몇 초 만에 협업 환경을 구축하여 팀의 생산성을 획기적으로 끌어올립니다.

1. Live Share 익스텐션 설치 — 마이크로소프트 계정으로 로그인 필요
2. 세션 시작 및 초대 — VSCode 하단 스테이터스 바의 Live Share 아이콘을 클릭하여 세션을 시작하고, 생성된 링크를 팀원들에게 공유합니다.
3. 권한 설정 — 호스트는 게스트에게 읽기 전용, 편집 가능, 터미널 공유, 서버 공유 등 다양한 권한을 부여할 수 있습니다. 협업의 성격에 맞춰 적절한 권한을 설정하는 것이 중요합니다.

Photo by Daniil Komov on Pexels

익스텐션 성능 관리 및 최적화 팁

단순히 좋은 익스텐션을 설치하는 것 이상으로, 설치된 익스텐션들을 효율적으로 관리하는 것이 VSCode의 쾌적한 사용 환경을 유지하는 핵심입니다. 불필요한 익스텐션을 제거하거나 비활성화하는 습관은 편집기의 반응 속도를 크게 개선합니다.

모든 익스텐션은 VSCode의 확장 기능 탭에서 쉽게 관리할 수 있습니다. 사용 빈도가 낮은 익스텐션은 과감히 제거하거나, 특정 워크스페이스에서만 필요한 경우 해당 워크스페이스에서만 활성화하는 “워크스페이스 익스텐션” 기능을 활용하세요. 이를 통해 전역적으로 활성화되는 익스텐션의 수를 최소화하여 VSCode 시작 속도를 최대 30%까지 단축할 수 있습니다.

정기적으로 익스텐션 업데이트를 확인하는 것도 중요합니다. 개발자들은 지속적으로 버그를 수정하고 성능을 최적화한 버전을 배포하기 때문에, 최신 버전을 유지하는 것만으로도 안정성과 속도 면에서 이점을 얻을 수 있습니다.