최근 진행된 Antigravity 업데이트 이후, 개인적으로 작업 환경이 너무 불편해져서 고민하다 다시 친숙한 VSCode로 복귀하게 되었습니다.
다시 에디터를 세팅하면서, 저처럼 VSCode로 회귀하셨거나 새롭게 Next.js 프로젝트를 준비하시는 분들을 위해 Next.js 개발 환경을 쾌적하게 만들어 줄 VSCode 확장 프로그램 30가지를 정리해 보았습니다. 프론트엔드부터 풀스택, 그리고 AI 코딩 에이전트 환경까지 포괄적으로 담았으니 유용하게 활용해 보세요.
1. 리액트 & 프레임워크 생태계
-
ES7+ React/Redux/React-Native snippets:
rfce,rafce등 짧은 명령어로 컴포넌트 보일러플레이트를 빠르게 생성합니다. -
Next.js Snippets:
getServerSideProps나 App Router의 기본 파일 구조(page.tsx,layout.tsx)를 자동 완성합니다. -
VSCode React Refactor: 비대해진 JSX 코드를 드래그 한 번으로 새로운 함수나 파일로 분리해 줍니다.
-
MDX: Next.js에서 블로그나 문서를 작성할 때 자주 사용하는
.mdx파일의 마크다운 및 JSX 문법을 하이라이팅합니다. -
Auto Rename Tag: 여는 태그(
<div className="...">)를 수정하면 닫는 태그(</div>)까지 동시에 변경해 주어 마크업 작업 시간을 줄입니다.
2. 린팅, 포맷팅 & 코드 퀄리티
-
ESLint: 자바스크립트와 타입스크립트 코드의 잠재적 오류를 잡고 팀의 일관된 코드 컨벤션을 강제합니다.
-
Prettier - Code formatter: 파일을 저장할 때마다 설정된 룰에 맞게 코드를 자동으로 깔끔하게 정렬합니다.
-
Error Lens: 에러와 경고 메시지를 하단 패널을 열어보지 않고도 코드 라인 바로 옆에 직관적으로 띄워줍니다.
-
Pretty TypeScript Errors: 읽기 힘든 복잡한 타입스크립트 에러 로그를 보기 좋게 정제하여 보여줍니다.
-
Code Spell Checker: 오타가 난 변수명이나 함수명에 밑줄을 그어 어색한 영문 네이밍을 방지합니다.
3. 스타일링
-
Tailwind CSS IntelliSense: Tailwind 클래스 자동 완성, 린팅, 그리고 적용된 CSS 속성이 무엇인지 호버(Hover) 프리뷰를 제공하는 필수 확장입니다.
-
PostCSS Language Support: Tailwind와 함께 쓰이는 PostCSS 문법(
.pcss,postcss.config.js)의 에러를 방지하고 하이라이팅을 지원합니다. -
Color Highlight: 에디터 내의 HEX, RGB 색상 코드를 해당 색상의 배경으로 칠해 직관적으로 어떤 색인지 확인하게 해줍니다.
4. 생산성 & 유틸리티
-
Path Intellisense: 모듈을
import할 때 로컬 파일과 폴더 경로를 자동으로 제안합니다. -
Import Cost:
import한 패키지의 크기를 라인 옆에 표시하여 프론트엔드 번들 사이즈에 대한 경각심을 줍니다. -
DotENV:
.env환경 변수 파일의 구문을 강조해 변수 관리를 더 편하게 만듭니다. -
Better Comments: 주석에
!,?,TODO등의 접두사를 붙이면 색상을 다르게 표시해 가독성을 높입니다. -
Todo Tree: 프로젝트 전체에 흩어진
TODO와FIXME주석들을 좌측 사이드바에 트리 형태로 한눈에 모아줍니다. -
CodeSnap: 코드를 예쁘게 캡처해 이미지로 만들어줍니다. 슬랙이나 디스코드에 작업 내용을 공유할 때 유용합니다.
5. 디버깅 & 로그
-
Console Ninja:
console.log의 출력 결과를 브라우저 개발자 도구까지 갈 필요 없이 VSCode 에디터 코드 라인 안에서 바로 보여줍니다. -
Turbo Console Log: 변수를 선택하고 단축키를 누르면 파일명과 라인 수가 포함된 상세한
console.log구문을 즉시 생성합니다.
6. 풀스택 & 데이터베이스
-
MongoDB for VS Code: 에디터 내에서 MongoDB 데이터베이스에 직접 연결해 컬렉션을 확인하고 플레이그라운드에서 쿼리를 바로 실행해 볼 수 있습니다.
-
Thunder Client: Next.js API Routes나 외부 API를 테스트할 때 무거운 포스트맨 대신 가볍게 쓸 수 있는 내장 REST API 클라이언트입니다.
-
Prisma: ORM으로 Prisma를 도입할 경우 스키마 하이라이팅과 자동 완성을 위해 꼭 필요합니다.
7. 버전 관리 및 의존성
-
GitLens: 코드를 누가, 언제, 어떤 커밋으로 수정했는지 라인별로 블레임(Blame)을 띄워 협업 시 히스토리 파악을 돕습니다.
-
Git Graph: 터미널의 복잡한 Git 브랜치 트리를 GUI 형태로 깔끔하게 시각화합니다.
-
Version Lens:
package.json에서 현재 설치된 패키지들의 최신 버전 정보를 확인하고 에디터 내에서 바로 업데이트할 수 있게 해줍니다.
8. AI 에이전트 & 환경
-
Cline (Roo Code): Claude 기반으로 동작하며 MCP(Model Context Protocol) 연동이 가능한 AI 코딩 에이전트입니다. Next.js 프로젝트의 전체 문맥을 파악하고 자율적으로 코드를 작성해 줍니다.
-
Material Icon Theme: 탐색기의 폴더와 파일 아이콘을 직관적으로 변경해 원하는 파일을 빠르게 식별하게 돕습니다.
-
WakaTime: 프로젝트에서 코딩을 몇 시간 했는지, 어떤 파일에 가장 오래 머물렀는지 작업 통계를 내주는 대시보드입니다.