✨ VS Code의 압도적인 장점들

1. 완전 무료 + 오픈소스 💰
WebStorm 같은 경우 연간 13만원 정도 내야 하는데, VS Code는 완전 공짜야. Microsoft가 오픈소스로 공개했거든. 개인 프로젝트든 회사 업무든 라이선스 걱정 제로!

2. 미친 확장성 🔌
마켓플레이스에 확장 프로그램이 5만 개 이상이야. 네가 상상하는 거의 모든 기능이 이미 누군가 만들어놨어. Python 개발? 확장 설치. React 개발? 확장 설치. 심지어 코딩하면서 음악 듣는 확장도 있어! 🎵

3. 가볍고 빠름 ⚡
Electron 기반이라 무겁지 않을까 걱정했는데, 최적화가 정말 잘 돼있어. 내 노트북(i5, 8GB RAM)에서도 프로젝트 10개 열어놔도 버벅임 없어.

4. Git 통합 🌿
Git 명령어 외울 필요 없어. UI로 클릭 몇 번이면 커밋, 푸시, 풀, 브랜치 관리 다 돼. 충돌 해결도 시각적으로 보여줘서 초보자도 쉽게 할 수 있어.

5. 크로스 플랫폼 💻
Windows, Mac, Linux 다 돼. 회사에서 Mac 쓰다가 집에서 Windows 써도 설정 동기화되니까 환경 차이 걱정 없어.

Figma → 코드 변환

디자이너가 Figma로 디자인 넘겨주면, 거기서 CSS 코드 바로 복사 가능해.

실제 워크플로우:
1. Figma에서 요소 선택
2. 오른쪽 패널에서 "Code" 탭 클릭
3. CSS 코드 복사 → VS Code에 붙여넣기
4. 끝! 🎉

폰트 크기, 색상, 여백 다 자동으로 계산해줘. 디자인 시안 보고 "이거 몇 픽셀이지?" 고민할 필요 없어!

색상 팔레트 도구

Coolors.co - 스페이스바만 누르면 랜덤 색상 조합 생성. 마음에 드는 거 나올 때까지 계속 눌러! 🎨

Adobe Color - 색상 이론 기반으로 조화로운 팔레트 만들어줘. 보색, 유사색, 3색 조합 등 자동 생성.

내가 쓰는 방법: 메인 색상 하나 정하면 나머지는 도구가 추천해줘. 디자인 감각 없어도 괜찮은 색 조합 만들 수 있어! 😎

🤖 GitHub Copilot AI 유료

AI가 코드를 자동으로 작성해줘. 주석 쓰면 그에 맞는 코드를 제안하고, 함수 이름만 쓰면 내용을 추측해서 완성해줘.

실제 사용 예시:

// 이메일 유효성 검사 함수
function validateEmail(email) {
  // 여기까지만 쓰면 Copilot이 나머지를 자동 완성!
  const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return regex.test(email);
}

📝 Tabnine AI 무료/유료

Copilot의 무료 대안! 기본 기능은 무료로 쓸 수 있어. 내 코딩 패턴을 학습해서 점점 똑똑해져.

장점:
- 무료 버전도 꽤 쓸만함
- 프라이버시 중시 (로컬에서 학습 가능)
- 다양한 언어 지원

추천 대상: Copilot 구독 부담스러운 사람, 개인정보 민감한 프로젝트

🎯 IntelliCode 무료 Microsoft

Microsoft가 만든 AI 자동완성. GitHub의 수백만 오픈소스 코드를 학습했어.

특징:
- 완전 무료
- VS Code와 완벽 통합
- 맥락을 이해하는 똑똑한 자동완성

예를 들어 array.map() 쓸 때 가장 많이 쓰는 패턴을 우선 제안해줘. ⭐ 표시로 추천 항목 알려줌!

🔍 ESLint 필수

JavaScript/TypeScript 코드 품질 검사 도구. 오타, 문법 오류, 안 좋은 코딩 패턴 다 잡아줘.

설정 방법:
1. 확장 설치
2. 프로젝트 루트에 .eslintrc.json 파일 생성
3. 규칙 설정 (Airbnb, Standard, Google 스타일 가이드 중 선택)

내가 쓰는 설정:

{
  "extends": "airbnb",
  "rules": {
    "no-console": "warn",  // console.log 경고
    "semi": ["error", "always"],  // 세미콜론 필수
    "quotes": ["error", "single"]  // 작은따옴표 사용
  }
}

✨ Prettier 필수

코드 포맷터. 저장하면 자동으로 코드 정리해줘. 들여쓰기, 줄바꿈, 따옴표 스타일 등 일관성 있게 만들어줌.

ESLint vs Prettier 차이:
- ESLint: 코드 품질 (버그 가능성 있는 코드 찾기)
- Prettier: 코드 스타일 (보기 좋게 정리)

꿀팁: 둘이 같이 쓰면 시너지 대박! ESLint로 오류 잡고, Prettier로 자동 정리. 설정 한 번 해놓으면 코드 스타일 고민 끝! 😎

설정:
settings.json에 추가:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

🌿 GitLens 무료 강추

Git을 슈퍼파워로 만들어주는 확장! 각 줄마다 누가, 언제, 왜 수정했는지 보여줘.

주요 기능:
- Blame Annotations: 코드 각 줄에 커밋 정보 표시
- File History: 파일 변경 이력 시각화
- Compare: 브랜치, 커밋 간 비교
- Search: 커밋 메시지로 검색

실전 활용:
버그 발견했을 때 → GitLens로 해당 코드 누가 작성했는지 확인 → 그 사람한테 물어보기! 혼자 삽질 안 해도 돼! 😄

🔀 Git Graph 무료

Git 브랜치를 시각적으로 보여주는 확장. 복잡한 브랜치 구조도 한눈에 파악 가능!

왜 필요해?
터미널에서 git log 보면 머리 아프잖아? 이거 쓰면 그래프로 예쁘게 보여줘. 어떤 브랜치가 어디서 갈라졌는지, 머지는 언제 했는지 직관적으로 알 수 있어! 🌳

🎨 Live Server 필수 초보자 강추

HTML 파일 수정하면 브라우저가 자동으로 새로고침! 개발 서버를 로컬에서 바로 띄워줘.

사용법:
1. HTML 파일 우클릭
2. "Open with Live Server" 클릭
3. 브라우저 자동으로 열림
4. 코드 수정하면 실시간 반영! ⚡

내 경험: 예전엔 코드 수정하고 → 저장하고 → 브라우저 가서 → F5 누르고... 이 과정 반복했는데, 이제는 저장만 하면 끝! 시간 엄청 아껴! 🚀

🌈 Auto Rename Tag 무료

HTML 태그 하나 수정하면 짝꿍 태그도 자동으로 수정!

예시:

<div>내용</div>

🎯 CSS Peek 무료

HTML에서 클래스 이름 클릭하면 해당 CSS 정의로 바로 이동! 파일 왔다갔다 안 해도 돼.

기능:
- Ctrl+클릭: CSS 파일로 이동
- Hover: CSS 내용 미리보기
- 정의 찾기: 해당 클래스 쓰는 곳 전부 찾기

대형 프로젝트에서 CSS 파일 여러 개일 때 진짜 유용해! 🔍

🖼️ Image Preview 무료

코드에서 이미지 경로에 마우스 올리면 미리보기 보여줘! 이미지 파일 일일이 열어볼 필요 없어.

지원 형식: jpg, png, gif, svg, webp 등

<img src="./images/logo.png"> 이런 코드에서 경로에 마우스만 올려도 이미지 확인 가능! 👀

⚡ Path Intellisense 무료 필수

파일 경로 자동완성! 더 이상 경로 오타로 고생하지 마!

작동 방식:
import Header from './components/' 여기까지 치면 components 폴더 안의 파일 목록이 자동으로 나와. 화살표 키로 선택하고 엔터! 끝! 🎯

특히 React, Vue 같은 프레임워크 쓸 때 import 문 작성할 때 완전 꿀!

📦 npm Intellisense 무료

npm 패키지 import할 때 자동완성 지원!

import React from 're' 여기까지만 쳐도 'react' 자동완성 제안! 패키지 이름 정확히 기억 안 나도 괜찮아! 😎

🔖 Bookmarks 무료

코드에 북마크 설정해서 중요한 부분 빠르게 이동!

사용법:
- Ctrl+Alt+K: 북마크 토글
- Ctrl+Alt+J: 이전 북마크로 이동
- Ctrl+Alt+L: 다음 북마크로 이동

큰 파일에서 여러 부분 수정할 때 완전 유용! 스크롤 삽질 안 해도 돼! 📍

🎨 Color Highlight 무료

CSS 색상 코드에 실제 색상 표시!

color: #667eea; 이렇게 쓰면 코드 배경이 실제 그 색으로 표시돼. 색상 코드만 봐도 어떤 색인지 바로 알 수 있어! 🌈

📏 Indent Rainbow 무료

들여쓰기 레벨마다 다른 색으로 표시! 코드 구조 파악이 훨씬 쉬워져.

특히 Python, YAML 같이 들여쓰기가 중요한 언어 쓸 때 완전 필수! 중첩된 코드 블록 구분하기 쉬워! 🎨

🌙 One Dark Pro 무료 인기

Atom 에디터의 유명한 다크 테마를 VS Code로! 눈이 편하고 색상 대비가 좋아서 코드 가독성 최고!

다운로드: 500만+ (가장 인기 있는 테마 중 하나)
특징: 부드러운 색상, 눈의 피로 최소화

🎨 Material Icon Theme 무료

파일 타입별로 예쁜 아이콘 표시! 파일 찾기가 훨씬 쉬워져.

지원 파일:
- .js → JavaScript 아이콘
- .css → CSS 아이콘
- .html → HTML 아이콘
- .json → JSON 아이콘
- 등등 수백 가지 파일 타입 지원!

폴더도 타입별로 다른 아이콘! components 폴더는 컴포넌트 아이콘, styles 폴더는 페인트 아이콘 이런 식! 👀

내가 쓰는 최적화 설정 (복붙 가능!)

{
  // 에디터 기본 설정
  "editor.fontSize": 14,
  "editor.fontFamily": "Fira Code, Consolas, monospace",
  "editor.fontLigatures": true,  // 코드 리가처 (예쁜 기호)
  "editor.lineHeight": 22,
  "editor.tabSize": 2,
  "editor.wordWrap": "on",  // 자동 줄바꿈
  
  // 자동 저장 & 포맷팅
  "files.autoSave": "onFocusChange",  // 포커스 이동시 자동 저장
  "editor.formatOnSave": true,  // 저장시 자동 포맷
  "editor.formatOnPaste": true,  // 붙여넣기시 자동 포맷
  
  // 코드 제안 & 자동완성
  "editor.suggestSelection": "first",
  "editor.quickSuggestions": {
    "strings": true  // 문자열 안에서도 자동완성
  },
  "editor.acceptSuggestionOnEnter": "smart",
  
  // 미니맵 & UI
  "editor.minimap.enabled": true,
  "editor.minimap.maxColumn": 80,
  "workbench.colorTheme": "One Dark Pro",
  "workbench.iconTheme": "material-icon-theme",
  
  // 파일 탐색기
  "explorer.confirmDelete": false,  // 삭제 확인 안 함
  "explorer.confirmDragAndDrop": false,  // 드래그 확인 안 함
  
  // Git
  "git.autofetch": true,  // 자동으로 원격 변경사항 가져오기
  "git.confirmSync": false,  // 동기화 확인 안 함
  
  // 터미널
  "terminal.integrated.fontSize": 13,
  "terminal.integrated.fontFamily": "Fira Code",
  
  // ESLint & Prettier
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true  // 저장시 ESLint 자동 수정
  },
  
  // 파일 연결
  "files.associations": {
    "*.jsx": "javascriptreact",
    "*.tsx": "typescriptreact"
  },
  
  // 성능 최적화
  "files.exclude": {
    "**/node_modules": true,
    "**/.git": true,
    "**/dist": true,
    "**/build": true
  },
  "search.exclude": {
    "**/node_modules": true,
    "**/dist": true
  }
}

🎓 설정 설명:

Fira Code 폰트: 코딩 전용 폰트! !=를 ≠로, =>를 ⇒로 예쁘게 표시해줘. 무료 다운로드 가능!

자동 저장: 다른 창 클릭하면 자동 저장! Ctrl+S 누를 필요 없어. 습관 들이면 완전 편해!

파일 제외: node_modules 같은 큰 폴더는 검색에서 제외! 검색 속도 엄청 빨라져! ⚡

프로젝트마다 다른 설정 필요할 때 있잖아? 회사 프로젝트는 탭 4칸, 개인 프로젝트는 2칸 이런 식으로!

워크스페이스 설정 방법:
1. 프로젝트 루트에 .vscode 폴더 생성
2. 그 안에 settings.json 파일 생성
3. 프로젝트별 설정 작성!

예시 - React 프로젝트 설정:

{
  "editor.tabSize": 2,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "eslint.workingDirectories": ["./src"],
  "files.exclude": {
    "node_modules": true,
    "build": true
  }
}

자주 쓰는 코드 패턴 있으면 스니펫으로 만들어! 몇 글자만 치면 전체 코드 자동 완성!

스니펫 만드는 법:
1. Ctrl+Shift+P → "Configure User Snippets"
2. 언어 선택 (예: JavaScript)
3. JSON 형식으로 스니펫 작성

예시 - React 함수형 컴포넌트 스니펫:

{
  "React Functional Component": {
    "prefix": "rfc",
    "body": [
      "import React from 'react';",
      "",
      "const ${1:ComponentName} = () => {",
      "  return (",
      "    <div>",
      "      $0",
      "    </div>",
      "  );",
      "};",
      "",
      "export default ${1:ComponentName};"
    ],
    "description": "React 함수형 컴포넌트 템플릿"
  }
}

대량의 코드 수정할 때 정규표현식 쓰면 완전 신세계!

사용법:
1. Ctrl+H (바꾸기 창 열기)
2. 정규표현식 버튼 클릭 (.*)
3. 패턴 입력!

실전 예시:

예시 1: 모든 console.log 제거
찾기: console\.log\(.*\);
바꾸기: (비워두기)
→ 모든 console.log 한 번에 삭제! 🗑️

예시 2: 클래스명 일괄 변경
찾기: class="btn-(\w+)"
바꾸기: class="button-$1"
→ btn-primary → button-primary 자동 변환!

예시 3: 날짜 형식 변경
찾기: (\d{4})-(\d{2})-(\d{2})
바꾸기: $3/$2/$1
→ 2024-01-15 → 15/01/2024 변환!

정규표현식 어렵다고? 처음엔 다들 그래. 근데 몇 번 써보면 금방 익숙해져! 💪

HTML/CSS 빠르게 작성하는 비법! Emmet은 VS Code에 기본 내장돼있어.

HTML 작성 예시:

1. 기본 구조:
! 치고 탭 → HTML5 기본 구조 생성!

2. 중첩 구조:
div>ul>li*3 치고 탭 →

<div>
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

<header></header>
<main></main>
<footer></footer>

<ul>
  <li class="item1"></li>
  <li class="item2"></li>
  <li class="item3"></li>
</ul>

VS Code의 내장 리팩토링 기능 제대로 쓰면 코드 정리가 완전 쉬워져!

1. 변수 추출 (Extract Variable)
복잡한 표현식을 변수로 분리!

// 전
return user.profile.settings.theme.color;

// 후
const themeColor = user.profile.settings.theme.color;
return themeColor;

필수 확장 세트:

1. ES7+ React/Redux/React-Native snippets - 코드 스니펫
2. ESLint - 코드 품질
3. Prettier - 코드 포맷팅
4. Auto Import - import 자동 추가
5. Bracket Pair Colorizer - 괄호 색상 구분
6. GitLens - Git 통합
7. npm Intellisense - 패키지 자동완성
8. Path Intellisense - 경로 자동완성

선택 확장:
- React DevTools - 컴포넌트 디버깅
- Redux DevTools - 상태 관리 디버깅
- Styled Components - CSS-in-JS 지원

추천 설정:

{
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },
  "emmet.triggerExpansionOnTab": true,
  "editor.formatOnSave": true,
  "eslint.validate": ["javascript", "javascriptreact"]
}

필수 확장 세트:

1. Vetur - Vue 공식 확장
2. Vue VSCode Snippets - Vue 스니펫
3. ESLint - 코드 품질
4. Prettier - 코드 포맷팅
5. Auto Close Tag - 태그 자동 닫기
6. Auto Rename Tag - 태그 자동 수정

Vue 3 사용시 추가:
- Volar - Vue 3 최적화 확장 (Vetur 대체)

추천 설정:

{
  "vetur.validation.template": true,
  "vetur.format.defaultFormatter.html": "prettier",
  "vetur.format.defaultFormatter.js": "prettier-eslint"
}

필수 확장 세트:

1. Angular Language Service - Angular 공식
2. Angular Snippets - 코드 스니펫
3. TSLint - TypeScript 린팅
4. Prettier - 코드 포맷팅
5. Path Intellisense - 경로 자동완성

Angular는 TypeScript 기반이라 TS 관련 확장도 중요해!

필수 확장 세트:

1. Live Server - 실시간 미리보기
2. HTML CSS Support - CSS 자동완성
3. IntelliSense for CSS - CSS 클래스 자동완성
4. Auto Close Tag - 태그 자동 닫기
5. Auto Rename Tag - 태그 자동 수정
6. Color Highlight - 색상 시각화
7. Image Preview - 이미지 미리보기

초보자한테 가장 추천하는 조합! 설정 복잡하지 않고 바로 쓸 수 있어! 😊

필수 확장 세트:

1. TypeScript Hero - import 자동 정리
2. ESLint - 코드 품질
3. Prettier - 코드 포맷팅
4. Path Intellisense - 경로 자동완성
5. Error Lens - 에러 인라인 표시

추천 설정:

{
  "typescript.updateImportsOnFileMove.enabled": "always",
  "typescript.preferences.importModuleSpecifier": "relative",
  "typescript.suggest.autoImports": true
}