VS Code 필수 세팅 완벽 가이드 | 개발 생산성 2배 높이는 확장 프로그램 추천

VS Code 필수 세팅 방법을 처음부터 끝까지 알려드려요! IT 블로거가 4년간 프론트엔드 개발하며 터득한 최적 설정과 확장 프로그램 20선을 공개합니다. 초보 개발자부터 시니어까지 필수!

Table of Contents

VS Code, 설정만 잘해도 개발이 달라져요

안녕하세요! 프론트엔드 개발을 하면서 여러 에디터를 거쳐온 IT 블로거예요. Sublime Text, Atom, WebStorm 다 써봤는데, 결국 정착한 건 VS Code였어요. 무료면서도 강력하고, 확장성이 무한대거든요.

4년 전 VS Code를 처음 설치했을 때는 그냥 기본 설정으로 썼어요. “코드만 잘 치면 되지, 설정이 뭐 그리 중요해?”라고 생각했죠. 근데 회사 선배 개발자 화면을 보고 충격받았어요. 자동 완성은 물론이고, 에러는 실시간으로 잡아주고, 코드는 저장할 때마다 자동으로 정리되더라고요.

“똑같은 VS Code인데 어떻게 저렇게 다르지?” 궁금해서 물어봤더니, 선배가 설정 파일을 공유해주셨어요. 그걸 적용하고 나서 제 개발 생산성이 정말 2배는 올랐어요. 디버깅 시간은 줄고, 타이핑 속도는 빨라지고, 실수는 줄어들었죠.

오늘은 제가 4년간 VS Code 필수 세팅을 최적화하며 터득한 모든 노하우를 공개할게요. 기본 설정부터 숨겨진 기능, 그리고 업무 효율을 극대화하는 확장 프로그램까지 낱낱이 알려드릴 테니 끝까지 읽어주세요!

VS Code가 특별한 이유

Visual Studio Code는 마이크로소프트가 만든 무료 오픈소스 에디터예요.

왜 VS Code인가?

제가 VS Code를 선택한 이유:

완전 무료예요 (상업적 사용도 OK)
가볍고 빠르죠 (특히 Electron 앱 치고는)
확장 프로그램이 정말 많아요 (10만 개 이상)
거의 모든 언어를 지원해요
Git이 완벽하게 통합돼있어요
크로스 플랫폼 (Windows, Mac, Linux)

처음엔 “어차피 Sublime Text랑 비슷하겠지” 했는데, 써보니 차원이 다르더라고요. 특히 IntelliSense(자동 완성) 기능이 정말 똑똑해요.

다른 에디터와의 비교

제가 겪어본 에디터들:

Sublime Text: 정말 빨라요. 근데 플러그인 설치가 불편하고, 유료예요 (계속 평가판으로 쓸 순 있지만).

Atom: GitHub에서 만들었는데, 너무 느려요. 큰 파일 열면 버벅거리더라고요.

WebStorm: JetBrains 제품이라 기능은 최고예요. 근데 연 약 20만 원이 부담스럽죠. 회사에서는 써봤는데 개인 프로젝트용으론 VS Code가 나아요.

결국 무료, 빠른 속도, 풍부한 확장성이라는 삼박자가 다 갖춰진 건 VS Code밖에 없었어요.

기본 설정 최적화 – 시작이 중요해요

VS Code 필수 세팅의 첫 단계, 기본 설정부터 잡아봐요.

설정 파일 접근하기

방법 1: UI로 설정 File → Preferences → Settings (Ctrl + ,)

방법 2: JSON 직접 수정 (제가 선호하는 방법) Ctrl + Shift + P → “Preferences: Open Settings (JSON)”

저는 JSON 파일을 직접 수정하는 걸 선호해요. 한눈에 모든 설정을 볼 수 있고, 복사-붙여넣기로 다른 컴퓨터에 적용하기도 쉽거든요.

필수 기본 설정

제가 4년간 사용하며 정제한 settings.json이에요:

json

{
  // 에디터 기본 설정
  "editor.fontSize": 14,
  "editor.fontFamily": "'D2Coding', 'Fira Code', Consolas, monospace",
  "editor.fontLigatures": true,
  "editor.lineHeight": 22,
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  
  // 자동 저장 (진짜 꿀기능!)
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000,
  
  // 코드 포맷팅
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  
  // 미니맵 (개인 취향)
  "editor.minimap.enabled": false,
  
  // 공백 표시
  "editor.renderWhitespace": "boundary",
  
  // 브래킷 색상
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": true
}
```

하나씩 설명해드릴게요.

### 폰트 설정의 중요성

**"editor.fontFamily":**
저는 D2Coding 폰트를 제일 좋아해요. 한글과 영문이 1:2 비율이라 코드가 정렬이 잘 맞거든요. 네이버에서 무료로 배포해요.

Fira Code는 ligature(합자) 지원 폰트예요. `=>`, `!=`, `===` 같은 기호가 하나의 예쁜 문자로 표시되죠. 처음엔 "이게 뭐가 좋아?" 했는데, 익숙해지니 코드 가독성이 확 올라가더라고요.

**실제 비교:**
```
일반 폰트: != >= => ===
Fira Code: ≠ ≥ ⇒ ≡

두 번째가 훨씬 보기 좋죠?

자동 저장 – 인생 세팅

“files.autoSave”: “afterDelay”

이거 설정하고 나서 Ctrl+S 누르는 습관이 사라졌어요. 1초 후 자동 저장되니까 신경 쓸 필요가 없죠.

예전에는 코드 수정하고 저장 안 하고 테스트해서 “왜 안 바뀌지?” 헤맸던 적이 많았는데, 이제는 그런 실수가 완전히 사라졌어요.

주의사항: Git을 쓸 때는 자동 저장이 불편할 수 있어요. 수정 중인 파일이 계속 변경되니까요. 저는 익숙해져서 괜찮은데, 불편하시면 “onFocusChange”로 설정하세요.

포맷팅 자동화

“editor.formatOnSave”: true

이것도 VS Code 필수 세팅 중 하나예요. 저장할 때 자동으로 코드를 정리해줘요.

들여쓰기 엉망인 코드를 받아서 Ctrl+S만 눌렀는데 깔끔하게 정리되는 거 보면 쾌감이 장난 아니에요. 특히 팀 프로젝트에서 코드 스타일 통일에 정말 유용해요.

실전 경험: 작년에 신입 개발자가 들여쓰기를 탭으로 했다가 스페이스로 했다가 섞여서 코드가 난장판이었어요. “formatOnSave 켜세요”라고 했더니 문제가 바로 해결됐죠.

작업 환경 커스터마이징

이제 좀 더 개인화된 설정을 해봐요.

색상 테마 – 눈의 피로를 줄여요

추천 테마:

1. One Dark Pro (제가 쓰는 테마) Atom 에디터의 그 유명한 테마예요. 색상 대비가 적당해서 장시간 코딩해도 눈이 안 아파요.

2. Dracula Official 보라색 계열이 예뻐요. 밤에 코딩할 때 특히 좋아요.

3. GitHub Theme 밝은 테마 선호하시는 분들께 추천해요. GitHub처럼 깔끔해요.

저는 낮에는 밝은 테마, 밤에는 어두운 테마를 쓰고 싶어서 “Auto Dark Mode” 확장을 설치했어요. 시간에 따라 자동으로 테마가 바뀌니까 편해요.

아이콘 테마 – 파일 구분이 쉬워져요

Material Icon Theme 강추예요!

파일 확장자별로 다른 아이콘이 표시돼요. .js, .jsx, .ts, .tsx, .css, .scss… 한눈에 파일 종류를 알 수 있죠.

처음엔 “아이콘이 뭐가 중요해?”라고 생각했는데, 파일이 수십 개일 때 아이콘으로 구분하니까 찾는 속도가 확 빨라지더라고요.

터미널 설정

VS Code 내장 터미널을 정말 많이 쓰는데요, 기본 설정이 별로예요.

json

{
  "terminal.integrated.fontSize": 13,
  "terminal.integrated.fontFamily": "D2Coding",
  "terminal.integrated.cursorStyle": "line",
  "terminal.integrated.cursorBlinking": true,
  "terminal.integrated.defaultProfile.windows": "Git Bash"
}

Windows에서는 Git Bash를 기본 터미널로 쓰면 Linux 명령어를 쓸 수 있어서 좋아요.

필수 확장 프로그램 – 생산성의 핵심

이제 본격적으로 VS Code 필수 세팅의 꽃, 확장 프로그램을 소개할게요.

1. Prettier – Code formatter (절대 필수!)

코드 포맷터예요. 이거 없으면 개발 못 해요.

설치 후 설정:

json

{
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "prettier.singleQuote": true,
  "prettier.semi": true,
  "prettier.tabWidth": 2
}

제가 Prettier를 사랑하는 이유:

세미콜론 자동으로 붙여줘요
따옴표 통일해줘요 (작은따옴표 vs 큰따옴표)
들여쓰기 자동으로 맞춰줘요
줄 길이 제한해줘요 (80자 또는 120자)

팀 프로젝트할 때 .prettierrc 파일로 규칙을 공유하면 모든 팀원의 코드 스타일이 통일돼요. 코드 리뷰할 때 스타일 때문에 싸울 일이 없어지죠!

2. ESLint (JavaScript/TypeScript 필수)

문법 오류와 잠재적 버그를 실시간으로 잡아줘요.

설정 예시:

json

{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

실제 경험: 작년에 변수명을 오타 냈는데 ESLint가 빨간 줄 그어서 바로 알아챘어요. 만약 못 봤으면 런타임 에러로 고생했을 거예요.

특히 === vs == 같은 거 잡아주는 게 좋아요. 초보 때 이거 헷갈려서 버그 많이 만들었거든요.

3. Auto Rename Tag

HTML/JSX 태그 이름을 바꾸면 짝꿍 태그도 자동으로 바뀌어요.

예시:

jsx

content

를

으로 바꾸면

도 자동으로 이 돼요.

이거 없을 때는 닫는 태그 수정 안 해서 에러 나는 경우가 많았어요. 이제는 그런 실수가 완전히 사라졌죠.

4. Auto Close Tag

태그 자동 완성이에요.

타이핑하면

가 자동으로 생겨요. 커서는 가운데 위치하고요.

이것도 타이핑 시간을 엄청 줄여주는 VS Code 필수 세팅이에요.

5. Path Intellisense

파일 경로 자동 완성이에요.

javascript

import Component from './com...'

./com까지만 치면 components 폴더가 자동완성 목록에 뜨죠. 경로 오타로 에러 나는 일이 없어져요.

설정 팁:

json

{
  "path-intellisense.mappings": {
    "@": "${workspaceRoot}/src"
  }
}

이렇게 하면 @/components/Button 같은 절대 경로도 자동완성돼요.

6. GitLens (Git 히스토리의 끝판왕)

이건 정말 신세계예요. 각 코드 줄마다 누가, 언제, 왜 수정했는지 보여줘요.

기능:

Blame annotations: 각 줄의 커밋 정보
File History: 파일 변경 이력
Line History: 특정 줄의 변경 이력
Compare: 브랜치/커밋 비교

실전 활용: 이상한 코드를 발견했을 때 “누가 이렇게 짰지?” 궁금하잖아요? GitLens로 바로 확인할 수 있어요. 그 사람한테 물어보면 되니까 디버깅이 훨씬 쉬워져요.

작년에 버그를 찾는데, GitLens로 해당 코드가 6개월 전에 추가됐다는 걸 알아냈어요. 커밋 메시지를 보니 “임시 핫픽스”라고 적혀있더라고요. 결국 그게 버그 원인이었죠.

7. Live Server

HTML 파일을 로컬 서버로 띄워주고, 저장하면 자동으로 새로고침해줘요.

프론트엔드 개발할 때 정말 편해요. 파일 수정하고 저장하면 브라우저가 바로 업데이트되니까 실시간으로 결과를 볼 수 있어요.

저는 간단한 프로토타입 만들 때 항상 써요. React 같은 프레임워크 설정 없이 빠르게 테스트할 수 있거든요.

8. Error Lens

에러와 경고를 라인 끝에 인라인으로 보여줘요.

기본 VS Code: 문제 패널에서 에러를 확인해야 해요.

Error Lens 사용: 에러가 발생한 줄 바로 옆에 메시지가 뜹니다.

처음엔 “화면이 지저분하지 않나?” 걱정했는데, 오히려 에러를 빨리 발견해서 생산성이 올랐어요.

9. Bracket Pair Colorizer 2 (현재는 내장 기능)

중괄호, 대괄호를 색상으로 구분해줘요.

예전엔 확장 프로그램이었는데, 지금은 VS Code에 내장됐어요. 위에서 본 editor.bracketPairColorization.enabled가 바로 이거예요.

javascript

function example() {
  if (true) {
    console.log([1, 2, 3]);
  }
}

각 괄호 쌍이 같은 색으로 표시돼서 어디서 열고 닫는지 한눈에 보여요.

10. Better Comments

주석을 색상으로 구분해줘요.

javascript

// TODO: 나중에 수정할 것
// ! 중요: 절대 삭제하지 말 것
// ? 질문: 이게 맞나?
// * 강조

각 유형별로 다른 색상이 표시돼요. 주석을 훑어볼 때 중요한 것부터 눈에 들어오죠.

팀 프로젝트할 때 정말 유용했어요. “TODO” 검색으로 미완성 작업을 한눈에 찾을 수 있거든요.

언어별 필수 확장

개발하는 언어에 따라 추가로 설치해야 할 확장들이에요.

JavaScript/TypeScript 개발자

1. JavaScript (ES6) code snippets clg → console.log()
imp → import ... from ...
exp → export default

타이핑 시간이 정말 많이 줄어요.

2. Quokka.js 코드를 실행하지 않고도 결과를 실시간으로 보여줘요. 디버깅할 때 정말 편해요.

javascript

const x = 10;
const y = 20;
console.log(x + y); // 옆에 30이 바로 표시됨

3. TypeScript Hero (TypeScript 사용자) import 자동 정리, 미사용 import 제거 등 정말 편해요.

React 개발자

1. ES7+ React/Redux/React-Native snippets rafce → 함수형 컴포넌트 생성
useS → useState 훅
useE → useEffect 훅

컴포넌트 만들 때 템플릿으로 정말 유용해요.

2. vscode-styled-components styled-components 문법 하이라이팅과 자동완성해줘요.

Python 개발자

1. Python (Microsoft 공식) 필수예요. IntelliSense, 디버깅, 린팅 전부 제공해요.

2. Pylance 더 빠른 IntelliSense를 제공해요.

HTML/CSS 개발자

1. HTML CSS Support HTML에서 CSS 클래스 자동완성해줘요.

2. IntelliSense for CSS class names 프로젝트 내 모든 CSS 클래스명을 자동완성해줘요.

숨겨진 생산성 기능

VS Code 필수 세팅에는 확장 프로그램만 있는 게 아니에요. 내장 기능도 정말 강력해요.

1. 멀티 커서 (진짜 신세계)

Ctrl + D: 현재 단어 선택, 반복하면 다음 동일 단어 선택
Ctrl + Shift + L: 모든 동일 단어 선택
Alt + Click: 원하는 위치에 커서 추가

실전 예시:

javascript

const name = 'John';
const age = 30;
const city = 'Seoul';

const를 모두 let으로 바꾸고 싶다면?

const 하나에 커서 놓기
Ctrl + Shift + L
let 타이핑

세 줄이 동시에 바뀌어요!

처음 이 기능 알았을 때 정말 감탄했어요. 100줄이든 1000줄이든 한 번에 수정할 수 있으니까요.

2. 코드 접기/펼치기

Ctrl + Shift + [: 코드 블록 접기
Ctrl + Shift + ]: 코드 블록 펼치기
Ctrl + K, Ctrl + 0: 모두 접기
Ctrl + K, Ctrl + J: 모두 펼치기

큰 파일 작업할 때 정말 유용해요. 관련 없는 부분은 접어두고 작업할 부분만 펼쳐놓으면 집중이 잘 돼요.

3. 빠른 파일 이동

Ctrl + P: 파일 빠른 열기
Ctrl + Shift + P: 명령 팔레트
Ctrl + Tab: 최근 파일 이동

파일이 100개 넘는 프로젝트에서 마우스로 찾으면 시간이 오래 걸려요. Ctrl + P 누르고 파일명 몇 글자만 치면 바로 찾아지죠.

저는 이 단축키 익히고 나서 마우스 사용이 80% 줄었어요.

4. Emmet (HTML 작성 속도 10배)

VS Code에 기본 내장된 기능이에요.

예시: div.container>ul>li*5>a + Tab

결과:

html

한 줄로 복잡한 HTML 구조를 만들 수 있어요!

5. 스니펫 직접 만들기

자주 쓰는 코드 패턴을 스니펫으로 만들어두면 정말 편해요.

만드는 방법: File → Preferences → User Snippets

제가 만든 React 스니펫:

json

{
  "React Component with Props": {
    "prefix": "rcp",
    "body": [
      "interface ${1:ComponentName}Props {",
      "  $2",
      "}",
      "",
      "export const ${1:ComponentName}: React.FC<${1:ComponentName}Props> = ({ $3 }) => {",
      "  return (",
      "    ",
      "      $4",
      "    ",
      "  );",
      "};"
    ]
  }
}

rcp + Tab만 누르면 TypeScript React 컴포넌트 템플릿이 생성돼요.

워크스페이스 설정 – 프로젝트별 관리

프로젝트마다 설정이 다를 때가 있어요.

.vscode 폴더 활용

프로젝트 루트에 .vscode 폴더를 만들고 settings.json을 넣으면 프로젝트별 설정이 가능해요.

예시: 회사 프로젝트

json

{
  "editor.tabSize": 4,
  "prettier.singleQuote": false
}

예시: 개인 프로젝트

json

{
  "editor.tabSize": 2,
  "prettier.singleQuote": true
}

이렇게 하면 프로젝트 열 때마다 자동으로 적절한 설정이 적용돼요.

디버깅 설정 – 콘솔로그 안녕

콘솔로그로만 디버깅하는 분들 많으시죠? VS Code 디버거를 쓰면 훨씬 효율적이에요.

launch.json 설정

.vscode/launch.json 파일을 만들어요.

React 앱 디버깅:

json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "React App",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src"
    }
  ]
}

Node.js 디버깅:

json

{
  "type": "node",
  "request": "launch",
  "name": "Node App",
  "program": "${workspaceFolder}/app.js"
}

F5만 누르면 디버그 모드로 실행돼요. 브레이크포인트를 찍어서 변수값을 실시간으로 확인할 수 있죠.

제 경험: 예전엔 console.log()를 수십 개 찍어서 디버깅했어요. 근데 디버거를 쓰니까 시간이 절반으로 줄었어요. 특히 복잡한 로직에서 정말 유용해요.

성능 최적화 – 가볍게 유지하기

확장 프로그램을 많이 설치하면 VS Code가 느려질 수 있어요.

최적화 팁

1. 사용 안 하는 확장 비활성화 Extensions 패널에서 확장 우클릭 → “Disable”

저는 언어별로 워크스페이스를 나눠서 필요한 확장만 활성화해요.

2. 파일 제외 설정

json

{
  "files.exclude": {
    "**/node_modules": true,
    "**/.git": true,
    "**/dist": true
  },
  "search.exclude": {
    "**/node_modules": true,
    "**/dist": true
  }
}

node_modules 같은 큰 폴더를 제외하면 검색 속도가 훨씬 빨라져요.

3. 텔레메트리 끄기

json

{
  "telemetry.telemetryLevel": "off"
}

약간의 성능 향상이 있어요.

협업을 위한 설정

팀 프로젝트에서 유용한 VS Code 필수 세팅이에요.

Live Share

실시간으로 코드를 함께 편집할 수 있어요. 구글 독스처럼요!

사용 시나리오:

페어 프로그래밍
코드 리뷰
원격 지원

작년에 후배 개발자가 막혔을 때 Live Share로 제 화면을 공유하고 함께 디버깅했어요. 화면 공유보다 훨씬 편하더라고요.

Settings Sync

여러 컴퓨터에서 설정을 동기화해줘요.

회사 PC, 집 PC, 노트북… 모두 같은 설정을 유지할 수 있어요. GitHub 계정으로 로그인하면 자동으로 동기화돼요.

저는 이 기능 덕분에 새 컴퓨터 세팅 시간이 1시간에서 5분으로 줄었어요!

테마와 폰트 추천

개발 환경은 하루 8시간 이상 보는 공간이에요. 예쁘고 편해야 해요.

제가 사용하는 조합

테마: One Dark Pro
아이콘: Material Icon Theme
폰트: D2Coding (한글), Fira Code (영문)
터미널 폰트: D2Coding

이 조합으로 4년째 쓰는데 전혀 질리지 않아요.

눈 건강을 위한 팁

json

{
  "workbench.colorCustomizations": {
    "editor.background": "#1e1e1e",
    "editor.lineHighlightBackground": "#2a2a2a"
  }
}

배경색을 약간 조정하면 눈의 피로가 줄어요.

블루라이트 차단 안경도 쓰고, 1시간마다 10분씩 쉬는 습관도 들였어요. 40대가 되니 눈 건강이 정말 중요하더라고요.

자주 하는 실수와 해결법

제가 겪었던 시행착오를 공유할게요.

실수 1: 확장 프로그램 과다 설치

처음엔 좋아 보이는 확장을 다 설치했어요. 50개 넘게요. 그랬더니 VS Code가 느려지고 충돌도 자주 일어났죠.

해결책: 정말 필요한 것만 남기고 다 삭제했어요. 지금은 20개 정도만 쓰는데 훨씬 쾌적해요.

실수 2: Prettier와 ESLint 충돌

두 확장이 서로 다른 규칙을 적용해서 저장할 때마다 코드가 왔다 갔다 하는 경우가 있어요.

해결책: .eslintrc.js에 이렇게 설정하세요:

javascript

{
  "extends": ["prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

ESLint가 Prettier 규칙을 따르게 만드는 거예요.

실수 3: Git 자격 증명 문제

VS Code에서 Git push할 때 자꾸 비밀번호를 물어봐서 짜증났어요.

해결책: Git Credential Manager를 설치하거나, SSH 키를 설정하세요.

저는 SSH 키를 쓰는데, 한 번 설정하면 평생 편해요.

마무리하며 – VS Code가 바꾼 제 개발 생활

VS Code 필수 세팅을 최적화한 후 제 개발 속도가 정말 빨라졌어요.

구체적인 변화:

타이핑 시간: 30% 감소
디버깅 시간: 50% 감소
에러 발생: 40% 감소
코드 품질: 팀 내 최고 평가

더 중요한 건, 개발이 즐거워졌다는 거예요. 에디터가 제 의도를 알아서 척척 도와주니까 창의적인 부분에 집중할 수 있게 됐어요.

초보 개발자분들께

“설정이 어렵다”고 겁먹지 마세요. 하나씩 천천히 적용해보세요.

오늘 소개한 걸 다 한 번에 하려고 하지 말고, 일주일에 하나씩 익혀가세요. 저도 4년에 걸쳐 지금의 설정을 만들었어요.

첫 걸음

내일 출근하면 제일 먼저:

Prettier 설치
Auto Save 켜기
Format On Save 켜기

이 세 가지만 해도 개발 경험이 확 달라질 거예요.

제 settings.json 전체가 궁금하시면 댓글로 요청해주세요. 공유해드릴게요. 다음에는 고급 디버깅 테크닉으로 찾아뵐게요!

문의하기 (Contact Us) 25.12.29.시행

VS Code, 설정만 잘해도 개발이 달라져요

VS Code가 특별한 이유

왜 VS Code인가?

다른 에디터와의 비교

기본 설정 최적화 – 시작이 중요해요

설정 파일 접근하기

필수 기본 설정

자동 저장 – 인생 세팅

포맷팅 자동화

작업 환경 커스터마이징

색상 테마 – 눈의 피로를 줄여요

아이콘 테마 – 파일 구분이 쉬워져요

터미널 설정

필수 확장 프로그램 – 생산성의 핵심

1. Prettier – Code formatter (절대 필수!)

2. ESLint (JavaScript/TypeScript 필수)

3. Auto Rename Tag

4. Auto Close Tag

5. Path Intellisense

6. GitLens (Git 히스토리의 끝판왕)

7. Live Server

8. Error Lens

9. Bracket Pair Colorizer 2 (현재는 내장 기능)

10. Better Comments

언어별 필수 확장

JavaScript/TypeScript 개발자

React 개발자

Python 개발자

HTML/CSS 개발자

숨겨진 생산성 기능

1. 멀티 커서 (진짜 신세계)

2. 코드 접기/펼치기

3. 빠른 파일 이동

4. Emmet (HTML 작성 속도 10배)

5. 스니펫 직접 만들기

워크스페이스 설정 – 프로젝트별 관리

.vscode 폴더 활용

추천 확장 설정

디버깅 설정 – 콘솔로그 안녕

launch.json 설정

성능 최적화 – 가볍게 유지하기

최적화 팁

협업을 위한 설정

Live Share

Settings Sync

테마와 폰트 추천

제가 사용하는 조합

눈 건강을 위한 팁

자주 하는 실수와 해결법

실수 1: 확장 프로그램 과다 설치

실수 2: Prettier와 ESLint 충돌

실수 3: Git 자격 증명 문제

마무리하며 – VS Code가 바꾼 제 개발 생활

초보 개발자분들께

첫 걸음

IT최신정보 카테고리의 다른 글

댓글 남기기 응답 취소