비전공자의 개발자 도전기 | 프론트엔드 개발과 IT 기술 블로그

웹 개발자라면 Visual Studio Code(VS Code)의 강력한 기능과 다양한 플러그인을 활용해 생산성을 극대화할 수 있습니다.

 

VS Code는 오픈소스이며, 가볍고, 커스터마이징이 용이해서 웹 개발 환경에 최적화된 편집기입니다.

 

이번 글에서는 웹 개발을 위해 VS Code를 어떻게 설정하면 좋은지,

그리고 필수 확장 프로그램과 설정 팁을 소개하겠습니다. 😊

---

🔧 VS Code 설치 및 기본 설정

1. VS Code 설치

VS Code는 공식 웹사이트에서 무료로 다운로드할 수 있습니다.

설치가 완료되면, 원하는 언어와 라이브러리에 맞춰 확장 프로그램을 추가하여 개발 환경을 설정할 수 있습니다.

2. 기본 설정 파일 (settings.json) 위치

VS Code의 설정은 settings.json 파일에 저장됩니다.

이 설정 파일을 통해 테마, 폰트, 자동 완성 등 세부적인 환경을 조정할 수 있습니다.

• Windows:
  C:\Users\<사용자 이름>\AppData\Roaming\Code\User\settings.json
• Mac:
  ~/Library/Application Support/Code/User/settings.json
• Linux:
  ~/.config/Code/User/settings.json

Tip:
VS Code에서 Cmd + , (Mac) 또는 Ctrl + , (Windows)로 설정 화면을 열고,
오른쪽 상단의 아이콘을 클릭하면 settings.json을 직접 편집할 수 있습니다.

---

🎨 테마 및 폰트 설정

1. 테마 설정

테마는 개발 환경의 분위기를 결정하는 중요한 요소입니다.

다양한 테마 중 본인의 취향에 맞는 것을 골라보세요.

• 추천 테마:
  • One Dark Pro:
    Atom 에디터의 인기 테마로, 눈에 편안하고 직관적인 색상 구성
  • Dracula Official:
    다크 모드에 최적화된 인기 테마
  • Night Owl:
    저녁이나 밤 시간대 코딩에 최적화된 테마

설치 방법:
좌측 확장 프로그램 아이콘을 클릭한 후, 테마 이름을 검색하여 설치하고

Command Palette(Cmd + Shift + P또는 Ctrl + Shift + P)에서

Color Theme: Change Theme를 선택해 적용할 수 있습니다.

2. 폰트 설정

코딩에 적합한 폰트는 가독성을 높이고 오타를 줄이는 데 도움을 줍니다.

Fira Code, JetBrains Mono, Source Code Pro와 같은 코딩 전용 폰트를 사용해 보세요.

특히 Fira Code와 JetBrains Mono는 Ligatures(폰트 합자)를 지원해 ===, =>와 같은 기호들을 보기 좋게 표시해 줍니다.

{
  "editor.fontFamily": "Fira Code, Consolas, 'Courier New', monospace",
  "editor.fontLigatures": true
}

---

📦 웹 개발자를 위한 필수 확장 프로그램

1. Prettier - Code Formatter

코드의 일관성을 유지하기 위해 Prettier를 사용해보세요.

Prettier는 코드 스타일을 자동으로 정리해주며, 파일을 저장할 때마다 자동으로 포맷팅됩니다.

 

• 설정 방법:

{
  "editor.formatOnSave": true,            // 저장 시 자동 포맷팅
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

 

2. ESLint

ESLint는 JavaScript와 TypeScript 코드의 문법을 검사하고, 코드 품질을 유지하는 데 도움을 줍니다.

Prettier와 함께 사용하면 코드 스타일과 품질 모두를 관리할 수 있습니다.

 

• 설정 방법:

{
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true           // 저장 시 자동으로 ESLint 문제 해결
  }
}

 

3. Live Server

Live Server는 HTML 파일을 실시간으로 로컬 서버에 띄워주는 확장 프로그램입니다.

HTML 파일을 수정하면 브라우저가 자동으로 새로고침 되어 변경 사항을 즉시 확인할 수 있습니다.
• 설치 후 사용 방법: HTML 파일을 열고, 우클릭 메뉴에서 Open with Live Server를 선택합니다.

 

4. GitLens

GitLens는 Git의 히스토리와 변경 내역을 VS Code에서 바로 확인할 수 있는 확장입니다.

코드 라인별로 누가 작성했는지, 언제 수정했는지 등의 정보를 쉽게 확인할 수 있습니다.
• 주요 기능: 커밋 히스토리 보기, 파일 변경 사항 추적, 블레임(Blame) 기능 등

 

5. Path Intellisense

Path Intellisense는 파일 경로를 자동으로 완성해주는 확장 프로그램입니다.

웹 개발 시 여러 폴더와 파일을 참조할 때 큰 도움이 됩니다.
• 주요 기능: 경로 자동 완성, 경로 오류 방지

 

6. Auto Rename Tag & Auto Close Tag

Auto Rename Tag는 HTML이나 JSX 코드에서 태그를 수정할 때, 열림 태그와 닫힘 태그를 동시에 수정해줍니다.

Auto Close Tag는 HTML 태그를 입력할 때 자동으로 닫힘 태그를 추가해 주어 코드 작성 속도를 높입니다.

---

⚙️ 개발 환경 최적화를 위한 설정

1. 파일 자동 저장

코드를 작성하다가 잊지 않고 저장하는 습관을 들이기 위해, 자동 저장 설정을 활성화할 수 있습니다.

{
  "files.autoSave": "afterDelay",          // 일정 시간 후 자동 저장
  "files.autoSaveDelay": 1000              // 지연 시간 (ms 단위)
}

2. Emmet 설정

Emmet은 HTML과 CSS 코드 작성 속도를 극대화해 주는 확장 기능으로, 기본적으로 VS Code에 내장되어 있습니다.

Emmet을 활성화하여 HTML과 CSS를 더 빠르게 작성할 수 있습니다.
• 예시:
div.container>ul>li*5 입력 후 Tab 키를 누르면

 <div class="container"><ul><li></li><li></li><li></li><li></li><li></li></ul></div>

로 자동 변환됩니다.

3. 탭 크기 설정

코드를 깔끔하게 유지하기 위해 탭 크기를 조절해 보세요.

일반적으로 2 또는 4 스페이스를 사용하는 것이 좋습니다.

{
  "editor.tabSize": 2,                    // 탭 크기를 2로 설정
  "editor.insertSpaces": true              // 탭 대신 스페이스를 사용
}

 

4. Minimap 비활성화

Minimap(미니맵)은 VS Code의 코드 오른쪽에 작은 미리보기 화면을 제공하는 기능입니다.

화면 공간을 절약하고 싶다면 이를 비활성화할 수 있습니다.

{
  "editor.minimap.enabled": false
}

5. Bracket Pair Colorizer

Bracket Pair Colorizer는 괄호의 색상을 구별해줘서 코드 구조를 쉽게 파악할 수 있도록 도와줍니다.

긴 코드에서 중첩된 괄호를 쉽게 구분할 수 있어 가독성이 높아집니다.

---

🧰 개발 환경 커스터마이징을 위한 추가 팁

1. 사용자 정의 Snippet 설정

자주 사용하는 코드 블록이 있다면 User Snippet 기능을 활용해 보세요.

반복 작업을 줄이고 코드 작성 속도를 높일 수 있습니다.

• 설정 방법:
Command Palette(Cmd + Shift + P 또는 Ctrl + Shift + P)에서
Preferences: Configure User Snippets를 선택하고,
파일 타입을 선택한 후 원하는 코드 블록을 등록합니다.

 

2. Workspaces 사용

여러 프로젝트를 동시에 작업하거나 특정 프로젝트마다 다른 설정이 필요할 때 Workspaces를 사용하면 좋습니다.

워크스페이스를 통해 각 프로젝트별로 고유한 설정을 적용할 수 있습니다.

• 사용 방법:
File > Add Folder to Workspace를 통해 폴더를 추가하고,
File > Save Workspace As로 워크스페이스 파일을 저장합니다.

 

3. Settings Sync로 설정 동기화

VS Code의 Settings Sync 기능을 사용하면 여러 디바이스 간에 설정을 동기화할 수 있습니다. GitHub 계정으로 로그인하면 테마, 확장 프로그램, 키바인딩 등 모든 설정을 동기화할 수 있어 다른 컴퓨터에서도 동일한 환경에서 작업할 수 있습니다.

 

• 설정 방법:
Command Palette에서 Settings Sync: Turn On을 선택한 후
GitHub 계정으로 로그인하여 설정을 동기화합니다.

---

📝 결론

VS Code는 확장성과 커스터마이징 기능이 뛰어난 에디터로,

다양한 플러그인과 설정을 통해 자신만의 최적의 개발 환경을 구축할 수 있습니다.

 

코드 작성, 포맷팅, 디버깅, 협업 도구 등을 잘 활용하면 웹 개발 생산성을 크게 높일 수 있습니다.

소개된 설정과 확장 프로그램을 통해 더욱 효율적인 웹 개발 환경을 만들어 보세요! 🎉

---

❓ 자주 묻는 질문 (FAQ)

Q1. VS Code에서 초보자에게 추천할 만한 필수 확장은 무엇인가요?

A1.

초보자라면 Prettier(코드 포맷터), Live Server(실시간 미리보기),

Path Intellisense(경로 자동 완성), Auto Close Tag(자동 닫힘 태그)와 같은 확장을 추천합니다.

Q2. VS Code에서 특정 프로젝트마다 설정을 다르게 적용할 수 있나요?

A2.

네, 워크스페이스(Workspace) 기능을 사용하여 프로젝트마다 개별 설정을 적용할 수 있습니다.

Q3. 테마나 폰트 외에 눈의 피로를 줄이는 방법이 있을까요?

A3.

editor.cursorSmoothCaretAnimation 옵션을 true로 설정하면,

커서 이동이 부드러워져 눈의 피로가 줄어듭니다.

다크 모드 테마와 편안한 폰트를 사용하는 것도 도움이 됩니다.