VS Code 생산성 확장 추천 3가지, 제가 직접 써보고 남긴 정리
개발의 길 2026. 10. 7. 17:03 |

VS Code 생산성 확장 추천 3가지, 제가 직접 써보고 남긴 정리
처음에는 VS Code 확장을 이것저것 다 깔았어요. 그런데 편해지기는커녕 저장할 때마다 서식이 흔들리고, 뭘 켜야 하는지 더 헷갈리더군요. 한참 돌아서 끝내 남긴 건 딱 작업 흐름을 덜 끊는 조합이었습니다.

처음엔 왜 이렇게 헷갈렸냐면
저는 자바스크립트 파일을 저장할 때마다 코드가 살짝씩 달라져서 꽤 스트레스를 받았어요. 진짜 그랬어요. 프리터도 켜고, 에슬린트도 켜고, 기본 포매터도 여기저기 건드리다 보니, 작은 수정 하나 하려다가 오히려 서식 충돌만 더 커졌습니다.
그때는 몰랐는데, 문제는 확장 개수가 아니라 역할이 겹친 거였어요.
간단합니다.
"공식 문서를 확인하면" 확장은 설치보다 관리가 더 중요하고, 신뢰할 수 있는 출처에서 버전을 골라 쓰는 습관이 먼저라고 나옵니다. 비주얼 스튜디오 코드 일점 팔육 릴리스노트도 자동 저장이 더 세밀해졌다고 설명하죠. 결국 도구를 많이 쓰는 것보다, 흐름을 안 깨는 구성이 핵심이었습니다.
이런 일이 일어난 진짜 원인
저는 처음에 프리터만 문제라고 생각했어요. 설마 에슬린트까지 같이 원인일 줄은 몰랐죠. 그런데 "스택오버플로우 답변에 따르면" 포맷 온 세이브가 안 될 때는 기본 포매터 충돌부터 확인하라는 조언이 자주 보입니다. 저도 그 순서대로 보니 바로 답이 보였어요.
문제는 대체로 이 셋 중 하나였습니다.
- 기본 포매터가 다른 확장으로 잡혀 있음
- 저장할 때 서식과 진단이 동시에 개입함
- 작업 폴더마다 설정이 달라짐
한마디로, 확장이 나쁜 게 아니었어요.
겹쳐서 쓴 게 문제였죠.

제가 결국 찾은 해결 방법
이 부분은 꽤 단순합니다. 저는 아래 순서로 정리했더니 제일 안정적이었어요.
| 확장 | 주 역할 | 제가 느낀 점 | 추천도 |
|---|---|---|---|
| 프리터 | 코드 서식 맞추기 | 저장할 때 결과가 가장 눈에 띔 | 높음 |
| 에슬린트 | 코드 문제 찾기 | 오류를 빨리 잡아줘서 든든함 | 높음 |
| 깃허브 풀 리퀘스트와 이슈 | 작업 흐름 정리 | 저장소 연동이 편해져요 | 중간 |
제가 고른 순서는 이랬습니다.
프리터 먼저. 그다음 에슬린트. 마지막에 깃허브 연동 확장.
이 순서가 꽤 괜찮았어요.
"깃허브 이슈 트래커에 따르면" VS Code는 인라인 제안이나 편집 흐름 같은 부분을 계속 다듬고 있습니다. 실제로 깃허브 이슈 일팔공오칠칠 같은 기록을 보면, 확장과 편집 경험을 손보는 논의가 꾸준히 이어지더라고요. 개인적으로 이런 흐름이 좋아요. 도구가 조용히 좋아지는 편이니까요.
핵심은 확장 자체보다 역할 분리입니다. 서식, 진단, 저장소 연결을 한데 섞지 말고, 한 확장이 한 일만 맡게 두면 충돌이 확 줄어요.
이번 경험에서 얻은 3가지 교훈
첫째, 확장은 많을수록 좋은 게 아니었습니다.
둘째, 저장할 때 자동으로 움직이는 기능일수록 더 단순하게 써야 했어요.
셋째, 설치보다 설정이 반입니다. 어쨌든 여기서 갈립니다.
그리고 참고로, "공식 문서를 확인하면" 특정 버전으로 맞춰 쓰는 습관도 꽤 중요해요. 확장 마켓플레이스 문서와 함께 버전 안내를 같이 보면, 왜 어떤 날은 잘 되고 어떤 날은 꼬이는지 이해가 빨라집니다.
설마 했는데, 이런 기본 정리가 제일 오래 갑니다.
마무리
정리하면, VS Code 생산성 확장 추천은 화려한 목록보다 내 작업 흐름에 맞는 조합을 고르는 쪽이 더 낫습니다. 저는 프리터, 에슬린트, 깃허브 연동 확장만 남기고 나서야 손이 편해졌어요. 지금 확장이 너무 많아서 매번 헷갈린다면, 오늘 딱 세 개만 남겨두고 일주일 써보세요. 생각보다 체감이 큽니다.
참고 링크도 남겨둘게요.
- 공식 문서: https://code.visualstudio.com/docs/configure/extensions/extension-marketplace
- 릴리스노트: https://code.visualstudio.com/updates/v1_86
- 스택오버플로우: https://stackoverflow.com/questions/59433286/vs-code-prettier-format-on-save-doesnt-work
- 깃허브 이슈: https://github.com/microsoft/vscode/issues/180577
끝까지 읽어주셔서 고맙습니다. 궁금한 점은 댓글로 알려주세요. 이 글이 조금이라도 도움이 됐다면 다음 글도 기대해 주세요.
자주 묻는 질문
Q. 초보자도 바로 쓰기 좋은 확장은 뭔가요?
A. 저는 프리터부터 권합니다. 눈에 보이는 변화가 빨라서 시작하기 편해요.
Q. 에슬린트와 프리터를 같이 써도 되나요?
A. 됩니다. 다만 기본 포매터를 하나로 고정하는 쪽이 덜 꼬입니다.
Q. 확장이 너무 많으면 느려지나요?
A. 체감상 그럴 수 있어요. 특히 저장할 때 개입하는 확장은 줄이는 게 좋아요.
Q. 깃허브 연동 확장은 꼭 필요한가요?
A. 혼자 작업하면 필수는 아니에요. 다만 저장소를 자주 쓴다면 꽤 편합니다.
#비주얼스튜디오코드 #생산성확장 #프리터 #에슬린트 #개발도구
'개발의 길' 카테고리의 다른 글
| 새벽 2시, 우리 프로젝트 React 컴포넌트 200개가 한꺼번에 뒤집어졌을 때 — 그때 (0) | 2026.09.20 |
|---|---|
| Git 자주 쓰는 명령어 정리, 헷갈릴 때 먼저 보는 다섯 가지 (0) | 2026.09.12 |
| VS Code 생산성 확장 추천으로 작업 속도 올리는 법 (0) | 2026.09.11 |
| 파이썬 입문, 어디서부터 시작해야 진짜 다룰 수 있을까? (0) | 2026.08.17 |
| React 컴포넌트 설계 패턴, 반년 동안 삽질하고 정리한 이야기 (0) | 2026.08.03 |









