티스토리 뷰

PC관련

💻 Visual Studio Code(VS Code) 기본 설정 가이드 (테마, 줄바꿈, 아이콘, 한글, 자동 저장, 포맷 자동화 등)

쭈~~울 2025. 5. 23. 14:32

목차



    반응형

    Visual Studio Code (일명 VS Code)는 개발자들이 가장 선호하는 코드 에디터 중 하나인데요.

    가볍지만 강력하고, 수많은 확장(Extension)을 통해 어떤 개발 환경이든 커스터마이징할 수 있다는 장점 때문이죠.

    참고로, 저도 윈도우의 메모장 대신에 항상 vscode를 사용하고 있을 정도죠.

     

    오늘은 VS Code를 처음 사용하거나,

    혹은 기존에 사용하고 있지만 좀 더 효율적으로 설정하고 싶은 분들을 위해 VS Code 기본 설정 가이드를 준비해봤습니다.

     

    vscode 기본 설정 가이드

    목차

      🧰 1. VS Code 설치하기

      설치가 끝나면 VS Code를 실행하고, 간단한 인터페이스를 확인해보세요.

      vs code 인터페이스 설명

       

      • 활동 바 (Activity Bar): 왼쪽에 세로로 길게 위치하며, 탐색기, 검색, 소스 제어, 확장, 실행 및 디버그 등 주요 기능을 전환할 수 있습니다.
      • 사이드 바 (Side Bar): 활동 바에서 선택한 기능(예: 탐색기)의 상세 내용이 표시되는 영역입니다.
      • 에디터 그룹 (Editor Group): 코드를 작성하는 주 작업 공간입니다. 여러 파일을 열거나 분할하여 볼 수 있습니다.
      • 패널 (Panel): 하단에 위치하며 터미널, 출력, 디버그 콘솔, 문제점 등의 탭이 있습니다.
      • 상태 바 (Status Bar): 하단에 가로로 길게 위치하며 현재 파일의 정보, 언어 모드, Git 브랜치, 경고/오류 메시지 등을 표시합니다.

       

       

      ⚙️ 2. 한글 언어팩 설치

      🔤 영어가 불편하다면?

      1. 좌측 메뉴에서 Extensions (확장기능) 클릭 (단축키: Ctrl + Shift + X)
      2. 검색창에 Korean Language Pack 입력
      3. 설치 후 "재시작" 클릭

       

       

      🎨 3. 테마 & 아이콘 설정

      🖼️ 테마 바꾸기

      1. Ctrl + Shift + P → “Color Theme” 입력
      2. 원하는 테마 선택 (예: Dark+, Light+, GitHub Dark 등)
      3. 원하는 테마가 없다면 Dracula, One Dark Pro 설치 추천!

      📁 아이콘 테마

      • 확장 기능에서 Material Icon Theme 설치
      • 폴더와 파일에 직관적인 아이콘 적용 가능

       

      🧩 4. 꼭 필요한 확장 기능 설치

      기능확장 프로그램(extension) 이름
      HTML 자동완성 Auto Close Tag, Auto Rename Tag
      코드 정리 Prettier - Code formatter
      라이브 미리보기 Live Server
      Git 연동 GitLens
      Python 개발 Python (by Microsoft)
       

      ✨ 확장기능 설치는 Ctrl + Shift + X → 검색 후 [Install] 클릭!

       

      🔧 5. 사용자 설정 변경 (settings.json)

      설정 열기

      • Ctrl + , → 오른쪽 상단 톱니바퀴 클릭 → settings.json 열기
      • 또는 Ctrl + Shift + P → “Preferences: Open Settings (JSON)”

      자주 쓰는 설정 예시 (JSON)

      { "editor.tabSize": 2, "editor.formatOnSave": true, "files.autoSave": "afterDelay", "editor.fontFamily": "Fira Code, Consolas, 'Courier New', monospace", "editor.fontLigatures": true }
       
       
       

      ✅ 코드를 저장할 때 자동 정렬되게 하거나, 탭 크기를 지정할 수 있어요.

       

      🐍 6. Python 또는 JavaScript 개발환경 설정 예시

      Python

      • Python 확장 설치
      • Python 경로 자동 감지 or 수동 지정 (Ctrl + Shift + P → Python: Select Interpreter)
      • 터미널 → python filename.py 실행

      JavaScript

      • Node.js 설치 (https://nodejs.org/ko/)
      • Live Server 확장으로 HTML 실행
      • .js 파일 저장 후 콘솔에서 node filename.js 실행

       

      🛠️ 7. 단축키 자주 쓰는 것 정리

      기능 단축키
      명령 팔레트 Ctrl + Shift + P
      파일 열기 Ctrl + O
      폴더 열기 Ctrl + K, Ctrl + O
      새 파일 생성 Ctrl + N
      저장 Ctrl + S
      확장기능 열기 Ctrl + Shift + X
      터미널 열기 Ctrl + ~
       

       

       

      🧼 8. 마무리 정리

      항목 추천 설정
      언어 Korean Language Pack 설치
      테마 One Dark Pro, Dracula
      확장 Prettier, Live Server, GitLens
      자동 저장 "files.autoSave": "afterDelay"
      포맷 자동화 "editor.formatOnSave": true

       

      반응형