2026 VS Code 개발자 세팅 가이드: settings.json, 추천 확장 프로그램, 단축키 총정리

개발자가 새 장비를 세팅할 때 가장 오래 쓰게 되는 앱은 결국 코드 에디터다.

터미널, Git, Node.js, Python, Docker도 중요하지만, 하루 대부분의 개발 시간은 VS Code 안에서 보낸다. 그래서 VS Code 세팅은 단순히 취향 문제가 아니라 생산성 문제에 가깝다.

이 글은 2026년 기준으로 새 맥북, 윈도우 노트북, 데스크톱을 세팅하는 개발자를 위한 VS Code 개발환경 세팅 가이드다.

단순히 추천 확장 프로그램만 나열하지 않고, 아래 내용을 한 번에 정리했다.

• VS Code 설치 방법
• code 명령어 설정
• User Settings와 Workspace Settings 차이
• 추천 settings.json
• 개발자용 폰트 설정
• 추천 확장 프로그램
• Astro / MDX / Tailwind 세팅
• AI 코딩 확장과 Cursor 역할 분리
• 단축키
• Settings Sync와 Profiles
• VS Code가 느려졌을 때 점검 방법
• 새 장비용 백업과 복원 명령어

새 장비 전체 세팅은 2026 맥북 개발자 세팅 가이드와 2026 윈도우 개발자 세팅 가이드에서 따로 정리했다. 이 글은 그중에서도 VS Code 자체 세팅에 집중한다.

1. 왜 VS Code 세팅이 중요한가

VS Code는 기본 상태로도 충분히 좋은 에디터다. 하지만 개발자가 매일 쓰는 도구라는 점을 생각하면, 몇 가지 설정만 바꿔도 체감이 꽤 크다.

예를 들면:

• 폰트가 불편하면 오래 코딩하기 힘들다.
• 저장할 때 포맷팅이 되지 않으면 코드 스타일이 쉽게 흐트러진다.
• 확장 프로그램을 너무 많이 깔면 VS Code가 느려진다.
• Windows에서는 줄바꿈 설정을 잘못하면 Git diff가 지저분해질 수 있다.
• AI 코딩툴을 쓰더라도 lint, format, build 설정이 잡혀 있지 않으면 결과물을 검증하기 어렵다.

AI 코딩 시대에는 에디터의 역할도 조금 달라졌다.

예전에는 VS Code가 “내가 코드를 직접 작성하는 공간”에 가까웠다면, 이제는 AI가 만든 코드를 검토하고, 수정하고, 실행하고, 정리하는 작업대에 가까워지고 있다.

그래서 VS Code 세팅의 핵심은 예쁘게 꾸미는 것이 아니라, 코드를 읽고, 수정하고, 검증하는 흐름을 빠르게 만드는 것이다.

2. VS Code 설치 방법

운영체제별 설치 방법은 조금 다르다.

2-1. macOS에서 설치

Homebrew를 쓰고 있다면 아래 명령어로 설치한다.

brew install --cask visual-studio-code

설치 후 실행한다.

open -a "Visual Studio Code"

macOS에서는 터미널에서 code . 명령어를 쓰기 위해 PATH 설정이 필요할 수 있다.

VS Code를 실행한 뒤 아래 순서로 설정한다.

1. Cmd + Shift + P
2. Shell Command 검색
3. Shell Command: Install 'code' command in PATH 선택
4. 터미널 재시작

확인:

code --version

프로젝트 폴더에서 VS Code 열기:

code .

2-2. Windows에서 설치

Windows에서는 winget으로 설치하는 것이 편하다.

winget install --id Microsoft.VisualStudioCode -e

설치 후 Windows Terminal 또는 PowerShell을 재시작한다.

확인:

code --version

프로젝트 폴더에서 VS Code 열기:

code .

Windows 설치 프로그램은 보통 code 명령어를 PATH에 추가한다. 그래도 인식되지 않으면 터미널을 완전히 닫았다가 다시 열어보면 된다.

3. User Settings와 Workspace Settings 차이

VS Code 설정을 제대로 관리하려면 User Settings와 Workspace Settings 차이를 이해해야 한다.

3-1. User Settings

User Settings는 내 VS Code 전체에 적용되는 개인 설정이다.

예를 들면:

• 폰트
• 폰트 크기
• 테마
• 자동 저장
• 미니맵 표시 여부
• 터미널 폰트
• Git 자동 fetch 여부

같은 것들은 User Settings에 넣는 것이 좋다.

User Settings JSON을 여는 방법:

1. Cmd + Shift + P 또는 Ctrl + Shift + P
2. Preferences: Open User Settings (JSON) 검색
3. 선택

3-2. Workspace Settings

Workspace Settings는 특정 프로젝트에만 적용되는 설정이다.

예를 들면:

• 특정 프로젝트의 formatter
• 프로젝트별 TypeScript SDK
• Astro 프로젝트 설정
• Tailwind 설정
• 특정 확장 프로그램 enable/disable
• 프로젝트별 파일 제외 규칙

같은 것들은 Workspace Settings에 넣는 것이 좋다.

Workspace Settings JSON을 여는 방법:

1. Cmd + Shift + P 또는 Ctrl + Shift + P
2. Preferences: Open Workspace Settings (JSON) 검색
3. 선택

프로젝트 안에서는 보통 아래 파일로 저장된다.

.vscode/settings.json

기준은 단순하다.

개인 취향은 User Settings에 넣고, 프로젝트 규칙은 Workspace Settings에 넣는 것이 좋다.

예를 들어 “나는 미니맵을 끄고 싶다”는 User Settings다.

반면 “이 Astro 프로젝트는 Prettier로 포맷팅한다”는 Workspace Settings에 가깝다.

4. 추천 settings.json

아래 설정은 새 장비에서 기본값으로 넣어두기 좋은 User Settings 예시다.

VS Code에서 Preferences: Open User Settings (JSON)을 열고 붙여 넣으면 된다.

{
  "editor.fontFamily": "JetBrainsMono Nerd Font, MesloLGS NF, CaskaydiaCove Nerd Font, Menlo, Monaco, 'Courier New', monospace",
  "editor.fontSize": 14,
  "editor.lineHeight": 1.6,
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "editor.minimap.enabled": false,
  "editor.renderWhitespace": "boundary",
  "editor.formatOnSave": true,
  "editor.formatOnPaste": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000,
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  "workbench.startupEditor": "none",
  "workbench.editor.labelFormat": "short",
  "explorer.confirmDelete": false,
  "explorer.confirmDragAndDrop": false,
  "breadcrumbs.enabled": true,
  "git.confirmSync": false,
  "git.autofetch": true,
  "security.workspace.trust.untrustedFiles": "open"
}

개인적으로 중요하게 보는 설정은 아래다.

설정	추천 이유
editor.minimap.enabled: false	맥북/노트북 화면에서는 코드 영역을 넓게 쓰는 편이 좋음
editor.formatOnSave: true	저장할 때 자동 정리
files.trimTrailingWhitespace: true	불필요한 공백 제거
files.insertFinalNewline: true	파일 끝 개행 유지
git.autofetch: true	원격 변경사항을 자동으로 확인
workbench.startupEditor: none	시작 화면 없이 바로 작업하기 좋음

5. OS별 터미널 설정

운영체제에 따라 VS Code 통합 터미널 설정을 조금 다르게 가져가는 것이 좋다.

5-1. macOS 추천 터미널 설정

macOS에서 zsh와 MesloLGS NF를 쓴다면 아래 설정을 추가한다.

{
  "terminal.integrated.defaultProfile.osx": "zsh",
  "terminal.integrated.fontFamily": "MesloLGS NF",
  "terminal.integrated.fontSize": 13
}

iTerm2와 VS Code 터미널 폰트를 비슷하게 맞추면 터미널을 오갈 때 이질감이 줄어든다.

5-2. Windows 추천 터미널 설정

Windows에서 PowerShell 7과 Oh My Posh를 쓴다면 아래 설정을 추천한다.

{
  "terminal.integrated.defaultProfile.windows": "PowerShell",
  "terminal.integrated.fontFamily": "CaskaydiaCove Nerd Font",
  "terminal.integrated.fontSize": 13,
  "files.eol": "\n"
}

Windows에서는 특히 files.eol 설정이 중요하다.

{
  "files.eol": "\n"
}

이 설정은 새 파일의 줄바꿈을 LF로 맞추는 데 도움이 된다.

Windows에서는 CRLF와 LF가 섞이면 Git diff가 지저분해질 수 있다. 웹 개발, Astro, React, Next.js 같은 프로젝트에서는 LF로 통일하는 편이 대체로 편하다.

6. 개발자용 폰트 추천

VS Code에서 폰트는 생각보다 중요하다.

하루 종일 코드를 보는 사람이라면 폰트와 줄 간격이 피로도에 영향을 준다.

추천 폰트는 다음과 같다.

폰트	추천 이유
JetBrains Mono Nerd Font	가독성이 좋고 개발자에게 인기
MesloLGS NF	Powerlevel10k와 궁합이 좋음
CaskaydiaCove Nerd Font	Windows Terminal, Oh My Posh와 궁합이 좋음
Fira Code Nerd Font	ligature를 선호하는 사람에게 좋음
SF Mono	macOS 기본 감성과 잘 맞음

macOS에서 설치:

brew install --cask font-jetbrains-mono-nerd-font
brew install --cask font-meslo-lg-nerd-font
brew install --cask font-fira-code-nerd-font

Windows에서는 Oh My Posh를 설치한 뒤 아래 명령어로 Nerd Font를 설치할 수 있다.

oh-my-posh font install

처음에는 너무 특이한 폰트보다 JetBrains Mono Nerd Font 또는 CaskaydiaCove Nerd Font를 추천한다.

VS Code 폰트 크기는 보통 14부터 시작하면 무난하다.

{
  "editor.fontSize": 14,
  "editor.lineHeight": 1.6
}

노트북 화면에서는 1314, 외부 모니터에서는 1416 정도가 편하다.

7. 추천 확장 프로그램

VS Code 확장 프로그램은 많이 설치한다고 좋은 것이 아니다.

확장 프로그램이 많아질수록 VS Code가 느려질 수 있고, 서로 충돌할 수도 있다.

처음에는 꼭 필요한 것만 설치하고, 프로젝트가 필요로 할 때 추가하는 방식이 좋다.

7-1. 공통 개발 확장 프로그램

아래는 대부분의 개발자에게 추천할 만한 기본 확장 프로그램이다.

code --install-extension eamodio.gitlens
code --install-extension usernamehw.errorlens
code --install-extension esbenp.prettier-vscode
code --install-extension dbaeumer.vscode-eslint
code --install-extension gruntfuggly.todo-tree

Extension	용도
GitLens	Git 히스토리와 blame 확인
Error Lens	에러를 코드 줄에 바로 표시
Prettier	코드 포맷팅
ESLint	JavaScript / TypeScript 린팅
Todo Tree	TODO 목록 탐색

GitLens와 Error Lens는 체감이 큰 편이다.

GitLens는 “이 코드를 누가 언제 왜 바꿨는지”를 보기 좋게 해주고, Error Lens는 에러와 경고를 코드 줄에 바로 보여준다.

7-2. 웹 개발 확장 프로그램

웹 개발자라면 아래 확장 프로그램을 추천한다.

code --install-extension bradlc.vscode-tailwindcss
code --install-extension formulahendry.auto-rename-tag
code --install-extension christian-kohler.path-intellisense
code --install-extension naumovs.color-highlight

Extension	용도
Tailwind CSS IntelliSense	Tailwind 클래스 자동완성
Auto Rename Tag	HTML/JSX 태그 동시 수정
Path Intellisense	파일 경로 자동완성
Color Highlight	색상 코드 미리보기

Tailwind CSS를 쓴다면 Tailwind CSS IntelliSense는 거의 필수다.

클래스 자동완성, 색상 미리보기, lint 기능이 있어서 Tailwind 작업 속도가 많이 올라간다.

7-3. Astro / MDX 블로그용 확장 프로그램

Astro 블로그를 운영한다면 아래 확장 프로그램을 추천한다.

code --install-extension astro-build.astro-vscode
code --install-extension unifiedjs.vscode-mdx
code --install-extension yzhang.markdown-all-in-one

Extension	용도
Astro	Astro 문법 지원
MDX	MDX 문법 지원
Markdown All in One	마크다운 작성 보조

Astro 블로그를 운영한다면 Astro와 MDX 확장 프로그램은 꼭 설치하는 것이 좋다.

특히 MDX 글을 자주 작성한다면 마크다운 문법 강조, 링크, 제목 구조, 코드블록 가독성이 중요하다.

관련 글: VS Code로 Astro 블로그 관리하는 방법

7-4. Python 개발 확장 프로그램

Python 개발을 한다면 아래 확장 프로그램을 설치한다.

code --install-extension ms-python.python
code --install-extension ms-python.vscode-pylance
code --install-extension ms-toolsai.jupyter

Extension	용도
Python	Python 언어 지원
Pylance	타입 체크와 자동완성
Jupyter	노트북 개발

Python 프로젝트에서는 가상환경을 프로젝트별로 만들고, VS Code에서 해당 인터프리터를 선택하는 것이 중요하다.

명령 팔레트에서 아래를 실행한다.

Python: Select Interpreter

프로젝트 안에 .venv를 만들었다면 해당 가상환경을 선택하면 된다.

7-5. Remote / WSL / Docker 확장 프로그램

Windows에서 WSL2를 쓰거나 Docker 기반 개발을 한다면 아래 확장 프로그램을 추천한다.

code --install-extension ms-vscode-remote.remote-wsl
code --install-extension ms-vscode-remote.remote-containers
code --install-extension ms-azuretools.vscode-docker

Extension	용도
WSL	WSL 내부 프로젝트를 VS Code로 열기
Dev Containers	컨테이너 기반 개발환경
Docker	Docker 이미지, 컨테이너 관리

WSL 프로젝트는 Windows 파일 시스템에서 여는 것보다 WSL 내부 경로에서 여는 것이 좋다.

예:

/home/username/projects/my-app

WSL 터미널 안에서 프로젝트 폴더로 이동한 뒤 실행한다.

code .

이렇게 하면 VS Code UI는 Windows에서 실행되지만, 터미널과 파일 작업은 WSL 환경을 사용한다.

7-6. AI 코딩 확장 프로그램

AI 코딩을 VS Code 안에서 쓰고 싶다면 아래 확장 프로그램을 고려할 수 있다.

code --install-extension github.copilot
code --install-extension github.copilot-chat
code --install-extension continue.continue

Extension	용도
GitHub Copilot	코드 자동완성
GitHub Copilot Chat	VS Code 안에서 AI 채팅과 에이전트형 작업
Continue	여러 LLM과 연결 가능한 오픈소스 AI 코딩 보조 도구

2026년 기준으로 VS Code의 AI 기능은 단순 자동완성에서 점점 에이전트형 개발 보조로 이동하고 있다.

즉, “이 코드 한 줄을 추천해줘”에서 끝나는 것이 아니라:

• 작업 계획 세우기
• 여러 파일 수정하기
• 터미널 명령어 실행 흐름 보조하기
• 변경사항 설명하기
• 테스트와 빌드 실패 원인 추적하기

같은 방향으로 발전하고 있다.

다만 Cursor를 메인 AI 코딩 에디터로 쓰고 있다면 VS Code에 AI 확장을 너무 많이 설치하지 않아도 된다.

개인적으로는 역할을 나누는 방식도 좋다고 본다.

도구	추천 역할
VS Code	안정적인 편집, 블로그 작성, 코드 검토
Cursor	AI 기반 코드 생성과 대규모 수정
Claude Code	터미널 기반 프로젝트 작업
ChatGPT / Claude / Gemini	설계, 리서치, 설명, 문서화

AI 코딩툴을 함께 쓰는 방식은 Claude Code vs Cursor 비교 정리와 ChatGPT, Claude, Gemini를 개발 작업에 나눠 쓰는 방법에서 더 자세히 다뤘다.

8. Astro / MDX / Tailwind 프로젝트용 Workspace 설정

Astro 블로그 프로젝트에서는 전역 User Settings보다 프로젝트별 Workspace Settings를 따로 두는 것이 좋다.

프로젝트 루트에 아래 파일을 만든다.

.vscode/settings.json

예시:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "[astro]": {
    "editor.defaultFormatter": "astro-build.astro-vscode"
  },
  "[mdx]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[markdown]": {
    "editor.wordWrap": "on",
    "editor.quickSuggestions": {
      "comments": "off",
      "strings": "off",
      "other": "off"
    }
  },
  "tailwindCSS.includeLanguages": {
    "astro": "html",
    "javascript": "javascript",
    "typescript": "typescript"
  },
  "files.associations": {
    "*.mdx": "mdx"
  }
}

이렇게 해두면 Astro, MDX, Markdown 파일을 조금 더 안정적으로 다룰 수 있다.

다만 프로젝트마다 포맷터 설정이 다를 수 있으니, 기존 프로젝트에 이미 .vscode/settings.json이나 .prettierrc가 있다면 그 설정을 우선해야 한다.

9. Prettier와 ESLint 기본 세팅

VS Code 설정만으로 모든 포맷팅 문제가 해결되지는 않는다.

프로젝트에 Prettier와 ESLint가 설치되어 있어야 제대로 동작한다.

웹 프로젝트에서 자주 쓰는 설치 예시는 다음과 같다.

npm install -D prettier eslint

Astro 프로젝트라면 필요에 따라 Prettier Astro 플러그인을 추가할 수 있다.

npm install -D prettier prettier-plugin-astro

.prettierrc 예시:

{
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100
}

Astro 플러그인을 쓴다면 아래처럼 설정할 수 있다.

{
  "plugins": ["prettier-plugin-astro"],
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100
}

중요한 것은 VS Code 설정과 프로젝트 설정이 충돌하지 않게 하는 것이다.

개인 취향은 VS Code User Settings에 두고, 팀/프로젝트 규칙은 .prettierrc, .eslintrc, .vscode/settings.json에 두는 것이 좋다.

10. VS Code 단축키

VS Code는 확장 프로그램보다 단축키를 잘 쓰는 것이 생산성에 더 큰 영향을 준다.

자주 쓰는 단축키를 정리하면 다음과 같다.

기능	macOS	Windows
파일 빠르게 열기	Cmd + P	Ctrl + P
명령 팔레트	Cmd + Shift + P	Ctrl + Shift + P
전체 검색	Cmd + Shift + F	Ctrl + Shift + F
터미널 열기/닫기	Cmd + J	Ctrl + J
사이드바 토글	Cmd + B	Ctrl + B
주석 처리	Cmd + /	Ctrl + /
문서 포맷팅	Option + Shift + F	Alt + Shift + F
현재 줄 복사	Option + Shift + ↓	Alt + Shift + ↓
현재 줄 이동	Option + ↑/↓	Alt + ↑/↓
다중 커서	Option + Click	Alt + Click
정의로 이동	F12	F12
이전 위치로 이동	Control + -	Alt + ←

처음부터 모든 단축키를 외울 필요는 없다.

일단 아래 5개만 익혀도 체감이 크다.

• 파일 빠르게 열기
• 명령 팔레트
• 전체 검색
• 터미널 열기
• 주석 처리

11. Settings Sync 사용하기

새 장비를 자주 바꾸거나 맥과 윈도우를 함께 쓴다면 Settings Sync를 켜두는 것이 좋다.

Settings Sync는 아래 항목을 동기화할 수 있다.

• Settings
• Keyboard Shortcuts
• User Snippets
• Extensions
• UI State
• Profiles

켜는 방법:

1. VS Code 왼쪽 아래 계정 아이콘 클릭
2. Turn on Settings Sync... 선택
3. GitHub 또는 Microsoft 계정으로 로그인
4. 동기화할 항목 선택

주의할 점도 있다.

Remote Window, 즉 SSH, Dev Container, WSL 환경에 설치된 확장 프로그램은 일반 로컬 확장 프로그램과 동기화 방식이 다를 수 있다.

그래서 WSL을 쓰는 개발자는 Windows 로컬 VS Code 확장과 WSL 내부 확장을 구분해서 생각하는 것이 좋다.

12. Profiles로 작업 환경 나누기

VS Code Profiles는 작업 종류별로 설정과 확장 프로그램을 분리할 수 있는 기능이다.

예를 들어 아래처럼 나눌 수 있다.

Profile	용도
Default	일반 개발
Blog Writing	블로그, MDX, Markdown 작성
Web Development	React, Astro, Tailwind 개발
Python	Python, Jupyter 개발
AI Coding	Copilot, Continue 등 AI 코딩 중심

Profiles를 만들려면:

1. 왼쪽 아래 톱니바퀴 클릭
2. Profiles 선택
3. Create Profile... 선택
4. 이름과 포함할 설정 선택

Profiles를 잘 쓰면 VS Code를 가볍게 유지하는 데 도움이 된다.

예를 들어 블로그 글만 쓸 때는 Python, Docker, C++ 확장 프로그램이 필요 없다.
반대로 Python 프로젝트를 할 때는 Astro, Tailwind 확장 프로그램이 필요 없을 수 있다.

프로필을 분리하면 필요한 확장만 켜진 가벼운 환경을 만들 수 있다.

13. VS Code가 느려졌을 때 점검할 것

VS Code가 느려졌다면 대부분 원인은 확장 프로그램, 대형 저장소, 언어 서버, Git 인덱싱 중 하나다.

아래 순서로 점검해보면 좋다.

13-1. 실행 중인 확장 프로그램 확인

명령 팔레트에서 실행한다.

Developer: Show Running Extensions

확장 프로그램별 활성화 시간과 실행 상태를 볼 수 있다.

너무 무거운 확장이 있으면 비활성화해본다.

13-2. Extension Bisect 실행

어떤 확장 프로그램이 문제인지 모르겠다면 Extension Bisect를 사용할 수 있다.

명령 팔레트에서 실행한다.

Help: Start Extension Bisect

VS Code가 확장 프로그램을 절반씩 꺼가며 문제 원인을 찾는 데 도움을 준다.

13-3. Extension Host 재시작

확장 프로그램이 꼬였을 때는 Extension Host를 재시작할 수 있다.

Developer: Restart Extension Host

13-4. TypeScript 서버 재시작

TypeScript 프로젝트에서 자동완성이나 타입 체크가 이상하면 TS Server를 재시작한다.

TypeScript: Restart TS Server

13-5. 불필요한 확장 프로그램 비활성화

모든 확장을 항상 켜둘 필요는 없다.

예를 들어:

• Python을 안 쓰는 프로젝트에서는 Python 확장 비활성화
• Docker를 안 쓰는 프로젝트에서는 Docker 확장 비활성화
• 블로그 작성 프로필에서는 무거운 AI 확장 최소화

이렇게 정리하면 VS Code가 훨씬 가벼워질 수 있다.

14. 확장 프로그램 백업과 복원

새 장비로 옮길 때 가장 귀찮은 것 중 하나가 확장 프로그램 재설치다.

아래 명령어로 현재 설치된 확장 목록을 백업할 수 있다.

macOS / Linux:

code --list-extensions > vscode-extensions.txt

복원:

cat vscode-extensions.txt | xargs -L 1 code --install-extension

Windows PowerShell:

code --list-extensions > vscode-extensions.txt

복원:

Get-Content .\vscode-extensions.txt | ForEach-Object { code --install-extension $_ }

확장 목록 파일은 GitHub private repo나 개인 백업 폴더에 보관해두면 좋다.

15. VS Code 설정 파일 위치

설정 파일을 직접 백업하고 싶다면 위치를 알아두면 좋다.

15-1. macOS

User Settings:

~/Library/Application Support/Code/User/settings.json

Keybindings:

~/Library/Application Support/Code/User/keybindings.json

Snippets:

~/Library/Application Support/Code/User/snippets

15-2. Windows

User Settings:

%APPDATA%\Code\User\settings.json

Keybindings:

%APPDATA%\Code\User\keybindings.json

Snippets:

%APPDATA%\Code\User\snippets

보통은 Settings Sync를 쓰는 것이 편하지만, 중요한 설정은 별도로 백업해두면 더 안전하다.

16. 새 장비용 VS Code 세팅 체크리스트

새 맥북이나 윈도우 노트북을 세팅할 때 아래 순서대로 확인하면 된다.

# VS Code 설치 확인
code --version

# 확장 프로그램 설치 확인
code --list-extensions

# 프로젝트 열기
code .

# Git 확인
git --version

# Node 확인
node --version
npm --version

# 빌드 테스트
npm run build

# 개발 서버 실행
npm run dev

VS Code 내부에서는 아래를 확인한다.

• settings.json 적용
• 폰트 정상 표시
• 통합 터미널 정상 실행
• Git 변경사항 표시
• Prettier 저장 시 동작
• ESLint 에러 표시
• Astro / MDX 문법 강조
• Tailwind 자동완성
• AI 확장 로그인 여부
• Settings Sync 활성화 여부

17. 내가 추천하는 최소 설치 조합

처음부터 너무 많은 확장 프로그램을 설치하기 싫다면 아래 조합만 먼저 추천한다.

code --install-extension eamodio.gitlens
code --install-extension usernamehw.errorlens
code --install-extension esbenp.prettier-vscode
code --install-extension dbaeumer.vscode-eslint
code --install-extension bradlc.vscode-tailwindcss
code --install-extension astro-build.astro-vscode
code --install-extension unifiedjs.vscode-mdx
code --install-extension yzhang.markdown-all-in-one

AI 코딩까지 고려한다면 추가로:

code --install-extension github.copilot
code --install-extension github.copilot-chat

WSL이나 Docker 개발을 한다면:

code --install-extension ms-vscode-remote.remote-wsl
code --install-extension ms-vscode-remote.remote-containers
code --install-extension ms-azuretools.vscode-docker

Python 개발을 한다면:

code --install-extension ms-python.python
code --install-extension ms-python.vscode-pylance
code --install-extension ms-toolsai.jupyter

이 정도면 대부분의 웹 개발, Astro 블로그 운영, AI 코딩 실험에는 충분하다.

마무리

VS Code 세팅은 한 번에 완벽하게 끝내는 작업이 아니다.

프로젝트를 하면서 조금씩 다듬어가는 것이 맞다.

다만 새 장비를 세팅할 때는 아래 세 가지를 먼저 잡아두는 것이 좋다.

1. settings.json으로 기본 편집 환경을 통일한다.
2. 확장 프로그램은 꼭 필요한 것만 설치한다.
3. Settings Sync와 확장 목록 백업으로 다음 장비 이전을 쉽게 만든다.

AI 코딩툴이 발전해도 VS Code 같은 에디터의 중요성은 줄어들지 않는다.

오히려 AI가 만든 코드를 검토하고, 정리하고, 실행하고, 배포하는 작업은 더 중요해지고 있다.

그래서 VS Code는 단순한 코드 작성 도구가 아니라, AI 시대의 개발 작업대에 가깝다.

새 장비를 샀다면 이 글을 체크리스트처럼 보면서 하나씩 세팅해보면 된다.

---

관련 글 더 보기

• 2026 맥북 개발자 세팅 가이드
• 2026 윈도우 개발자 세팅 가이드
• VS Code로 Astro 블로그 관리하는 방법
• Claude Code vs Cursor 비교 정리
• ChatGPT, Claude, Gemini를 개발 작업에 나눠 쓰는 방법

참고한 공식 문서

• VS Code 공식 설치 개요
• VS Code macOS 설치 문서
• VS Code Windows 설치 문서
• VS Code Command Line Interface 문서
• VS Code User and Workspace Settings 문서
• VS Code Extension Marketplace 문서
• VS Code Settings Sync 문서
• VS Code Profiles 문서
• GitHub Copilot in VS Code 문서
• VS Code Agents 문서