VSCode 설치

GAMMJ·2025년 11월 28일

IDE (Integrated Development Environment) - 통합 개발 환경

IDE는 프로그래밍에 필요한 다양한 도구를 통합한 소프트웨어로,
개발자가 코드 작성, 디버깅, 테스트, 빌드 등을 한 곳에서 수행할 수 있도록 해줍니다.
IDE는 프로그래밍 생산성을 높이기 위해 코드 자동 완성, 디버깅, 코드 내비게이션,
빌드 및 실행 도구 등 다양한 개발 지원 기능을 포함하고 있습니다.
IDE에는 Visual Studio, IntelliJ IDEA, PyCharm 등이 대표적입니다.

Code Editor - 코드 편집 도구

코드 에디터는 텍스트 파일을 작성하고 편집하는 도구입니다.
코딩을 할 때는 주로 소스 코드를 작성하는 데 사용됩니다.
IDE처럼 추가적인 기능이 많지는 않지만, 플러그인을 통해 기능을 확장할 수 있는 제품들이 있고,
시스템 자원을 거의 사용하지 않고 빠른 실행속도를 가지고 있습니다.
Code Editor에는 Visual Studio Code, Notepad++,Vim 등이 대표적입니다.

IDE를 대신 VS Code를 사용하는 이유

Visual Studio Code는

  1. 경량성확장성 덕분에 개발 생산성을 높일 수 있는 도구입니다.
    • 모든 프로그래밍 언어에 맞춰 사용자가 원하는 대로 환경을 설정할 수 있습니다.
    • 다양한 언어 및 프로젝트에 맞는 확장 기능을 쉽게 설치할 수 있습니다.
  2. 무료이기 때문에 학생, 개발자 모두 부담 없이 사용할 수 있습니다.
    • 현재도 많은 개발자들이 사용하고 있는 에디터 이기도 합니다.
  3. 다양한 개발 환경에 적합합니다.
    • 웹 개발: HTML, CSS, JavaScript, TypeScript 등의 웹 개발
    • 백엔드 개발: Node.js, Python, Go 등의 백엔드 개발
    • 모바일 및 클라우드 개발: Flutter, React Native, Azure와 같은 모바일과 클라우드 서비스 활용가능

설치 방법

Visual Studio Code 공식 다운로드

  • Windows

    • 다운로드한 .exe 설치 파일을 실행합니다.
    • 설치 마법사에 따라 다음 단계를 진행합니다.
      • 사용권 계약 동의.
      • 설치 경로 설정.
      • 원하는 경우 "시작 메뉴에 추가", "Windows 탐색기에서 열기", "코드 편집기 기본 설정" 등의 옵션 선택.
    • "설치" 버튼을 클릭하여 설치를 진행합니다.
    • 설치 완료 후 "Visual Studio Code 실행"을 선택한 후 "완료" 를 클릭합니다.
    • 이후 바탕화면 또는 시작 메뉴에서 정상적으로 실행되는지 확인합니다.
  • MAC

    • 다운로드한 .zip 파일을 열어 압축을 해제 합니다.
    • "Visual Studio Code.app" 파일을 "응용 프로그램" 폴더로 드래그하여 이동합니다.
    • 응용 프로그램 폴더에서 Visual Studio Code를 실행합니다.
    • 정상적으로 실행되는지 확인합니다.
    • Optional : 터미널에서 code 명령어로 편집기 열기 사용 가능하게 설정
      • VS Code를 실행한 후, 상단 메뉴에서 View > Command Palette로 이동.
      • Shell Command: Install 'code' command in PATH 명령을 실행.
      • 이제 터미널에서 code 명령어로 Visual Studio Code를 실행 할 수 있습니다.
  • Ubuntu

    • 다운로드한 .deb 파일을 파일 관리자에서 찾아 더블 클릭합니다.
    • Ubuntu Software 또는 Gdebi 패키지 설치기가 실행됩니다.
    • "Install" 버튼을 클릭하여 설치를 진행합니다.
    • 설치가 완료되면 애플리케이션 메뉴에서 "Visual Studio Code"를 검색하여 실행합니다.

코드 가독성이 좋아지는 익스텐션 소개

1. Indent Rainbow
 코드의 들여쓰기를 색상으로 구분하여 들여쓰기 오류를 쉽게 발견할 수 있게 해주는 플러그인입니다.
2. Better Comments
 주석을 카테고리별로 색상으로 구분해주는 플러그인입니다. 중요한 부분, TODO, 경고 등을 눈에띄게 하여 코드 리뷰나  디버깅 시 가독성을 높여줍니다.
3. colorize
 CSS 의 색상문자 코드에 배경색을 입혀 색상을 알아볼 수 있게 해주는 플러그인입니다.


나는 추가적으로 prettier, Stylelint, Gitmoji, Live server, Korean Language 등 여러개를 쓰고 있는데 앞에 나열한 4개는 정말 잘쓰고 있는 익스텐션이라서 추천한다

0개의 댓글