본문 바로가기
배움: MBA, English, 운동

비주얼 스튜디오 코드 ( Visual Studio Code ) - 강력하고 가벼운 코드 편집기

by Heedong-Kim 2024. 3. 7.

Microsoft Visual Studio Code(이하 VS Code)는 개발자들에게 매우 인기 있는 오픈 소스 코드 편집기입니다. 가볍고 빠르면서도 강력한 기능을 제공하여, 프론트엔드와 백엔드 개발 모두에 적합합니다. 다양한 프로그래밍 언어를 지원하며, 플러그인을 통해 기능을 확장할 수 있습니다. 이 블로그에서는 VS Code의 기본적인 소개, 설치 방법, 세팅 방법, 유용한 플러그인, 그리고 단축키에 대해 다룹니다.

주요 장점:

  • 크로스 플랫폼 지원: Windows, macOS, Linux 운영 체제에서 모두 사용할 수 있어, 다양한 환경에서의 개발을 지원합니다.
  • 뛰어난 확장성: 마켓플레이스를 통해 제공되는 수천 개의 확장 프로그램으로 개발 환경을 맞춤 설정하고 기능을 추가할 수 있습니다. 이를 통해 거의 모든 유형의 개발 작업을 지원할 수 있습니다.
  • 내장 Git 지원: Git 명령을 직접 통합하여 사용할 수 있어, 소스 코드 버전 관리를 손쉽게 할 수 있습니다. 이는 개발자들이 코드를 더 효율적으로 관리하게 해줍니다.
  • 인텔리센스: 강력한 코드 완성 기능은 코드를 더 빠르고 정확하게 작성할 수 있도록 도와줍니다. 변수, 함수 등의 이름을 자동으로 완성해주며, 타입 정보에 따른 메소드와 속성을 제안합니다.
  • 디버깅 도구: 내장 디버거를 사용하여 코드를 단계별로 실행하고, 변수를 검사하며, 콜 스택을 확인할 수 있습니다. 이는 복잡한 문제를 해결하는 데 큰 도움이 됩니다.

핵심 기능:

  • 다중 언어 지원: JavaScript, TypeScript, Python, PHP, C++, C#, Java 등 다양한 프로그래밍 언어에 대한 기본 지원을 제공합니다.
  • 코드 스니펫: 자주 사용하는 코드 조각을 쉽게 재사용할 수 있도록 해줍니다. 이는 개발 시간을 단축시키는 데 도움이 됩니다.
  • 테마와 사용자 인터페이스: 다양한 색상 테마와 아이콘을 통해 개발 환경을 개인의 취향에 맞게 꾸밀 수 있습니다. 또한, 사용자 인터페이스는 직관적이고 사용하기 쉽게 설계되어 있습니다.
  • 포맷터와 린터: 코드를 깔끔하고 일관된 스타일로 유지하기 위한 다양한 포맷터와 린터를 지원합니다. 이를 통해 코드 품질을 향상시키고, 오류를 줄일 수 있습니다.
  • 리모트 개발: 원격 서버, 컨테이너, 혹은 WSL(Windows Subsystem for Linux)에서 직접 코드를 편집하고 디버깅할 수 있는 기능을 제공합니다. 이는 다양한 환경에서의 개발을 유연하게 지원합니다.

 

설치 방법

  1. 공식 웹사이트 방문: VS Code 공식 웹사이트 ( https://code.visualstudio.com/ ) 로 이동합니다.

  • 다운로드: 사용 중인 운영 체제에 맞는 버전을 선택하여 다운로드합니다.
  • 설치: 다운로드한 파일을 실행하여 설치를 진행합니다. 설치 과정은 몇 분 내에 완료됩니다.

세팅 방법

  • 테마 변경: File > Preferences > Color Theme 을 선택하여 원하는 테마로 변경할 수 있습니다.
    설치하시면, 바로 "choose your theme" 메뉴가 나옵니다. 여기서 원하시는 형태의 테마를 선택하시면 됩니다. 

아래와 같이, 테마를 변경하시면, 아래에 추가적인 설정을 더 선택해서 구성하실 수 있습니다. 

 

  • 폰트와 크기 조절: File > Preferences > Settings에서 Editor: Font Size를 조정하여 폰트 크기를 변경할 수 있습니다.

  • 키 바인딩: File > Preferences > Keyboard Shortcuts을 통해 개인의 코딩 스타일에 맞게 단축키를 설정할 수 있습니다.



유용한 플러그인

아래 문서 파일에서 Top Extentions 를 다운로드 받으실 수 있습니다. 
https://code.visualstudio.com/docs/?dv=win64user

 

  1. Live Server: 실시간으로 HTML/CSS/JS 파일을 미리 볼 수 있게 해주는 확장 프로그램입니다.
  2. Prettier - Code formatter: 코드 포맷터로, 일관된 코드 스타일을 유지할 수 있도록 도와줍니다.
  3. GitLens: Git 히스토리를 강화하고, 코드 블레임 정보를 제공하여, 작업을 더 쉽게 추적할 수 있게 해줍니다.
  4. Python: Python 개발을 위한 종합적인 확장 프로그램으로, 디버깅, 테스팅, 코드 완성 등을 지원합니다.

단축키
아래 문서에서 Keyboard Shortcuts 에 대해 확인하실 수 있습니다. 
https://code.visualstudio.com/docs/getstarted/keybindings#_keyboard-shortcuts-reference

  • Ctrl + P: 빠른 파일 열기
  • Ctrl + Shift + P: 명령 팔레트 열기
  • Ctrl + /: 현재 줄 주석 처리
  • Alt + Up/Down: 현재 줄을 위/아래로 이동
  • Ctrl + ` : 터미널 창 토글

VS Code는 개발자들 사이에서 그 사용성과 확장성 덕분에 높은 인기를 자랑합니다. 이러한 특징들을 통해 개발 작업의 효율성과 생산성을 대폭 향상시킬 수 있습니다. 맞춤 설정과 유용한 플러그인을 적절히 활용하여 개발 환경을 최적화해 보세요.