Visual Studio Code (VS Code) 소개 및 간단한 기능들

Visual Studio Code는 마이크로소프트에서 개발한 무료 소스 코드 편집기 소프트웨어입니다. 이 소프트웨어는 Windows, macOS, Linux 그리고 웹 브라우저에서 실행할 수 있습니다. 주요 기능으로는 디버깅 지원, 지능형 코드 완성, 코드 스니펫, 그리고 Git을 활용한 내장형 버전 제어가 포함되어 있습니다.

 

VS Code는 JavaScript, Python, C++ 등 다양한 프로그래밍 언어를 지원하며, 수많은 확장 기능(Extensions)을 통해 기능을 확장할 수 있습니다. 초보자든 전문가든 상관없이, 필요한 기능들을 쉽게 설치하고 사용할 수 있습니다. 또한, VS Code의 UI는 사용자 취향에 맞게 커스터마이징할 수 있으며, 인터넷 연결 없이도 사용할 수 있는 것이 큰 장점입니다.

 

VS Code 다운로드: https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

 

<기능 및 확장 설치>

처음 시작 하면 하단 사진 처럼 빈 내용이 보이게 됩니다.

 

시작하려면 데스크톱에 코딩할 폴더 생성하고, 생성한 폴더를 우클릭하여 VS Code으로 이동하면 폴더명 작업을 시작할 수 있습니다.

 

이 폴더안에 좌클릭으로 새로운 폴더나 파일들을 생성할 수 있습니다. 단 파일 생성할 때 어떤 프로그래밍 언어를 사용할지 지정해줘야 합니다. 아래는 프런트엔드에서 자주 사용하는 파일명 예시입니다. (파일명은 본인이 설정 하면 됩니다)

HTML : index.html

JavaScript : script.js

CSS : style.css

React : app.tsx

TypeScript : main.ts

Docker : docker-compose.yml

env 파일 : .env

scss : style.scss

 

Linux와 비슷 터미널 기능 -> 빨간색 버튼을 누르면 VS Code 하단에 터미널 창이 열리며, 이곳에서 console.log 내용 확인 가능하고, npm 설치도, 폴더 이동 등 여려가지 행동을 할 수 있습니다.

 

확장 (extenstions) -> VS Code의 기본 기능을 확장할 수 있는 다양한 플러그인을 설치할 수 있으며, 대부분 무료로 제공됩니다. 설치 후 필요 없거나 사용하기 싫은 경우, 설치된 확장 기능 옆에 있는 톱니바퀴 아이콘을 클릭하여 사용 안 함 또는 제거를 선택할 수 있습니다.

하단처럼 확장 버튼 클릭 하면 설치 가능 및 설치 완료된 플러그인 목록 확인할 수 있습니다. 필요한 확장 플러그인 이 있으면 검색 창에 확인 할 수 있습니다. 

 

설치도 아주 쉽게 할 수 있습니다. 원하는 플러그인 검색하고 선택하면 그의 대한 설명이 나오고 "Install" 버튼이 보이게 됩니다. 설치 버튼만 눌러주면 자동으로 설치하고 바로 그 기능들을 사용할 수 있습니다. 

 

저도 직접 직장에서 VS Code을 사용하지는 못 하였지만 프런트엔드 (웹개발) 공부하면서 사용했던 확장 플러그인들을 나열 하겠습니다. (하단 플러그인들은 필수는 아니지만 코딩하면서 많은 도움이 됩니다)

vscode-icons : 폴더나 파일에 아이콘을 추가하여 가독성을 높입니다

Tailwind CSS intelliSense : Tailwind CSS 작성 시 자동 완성 및 구문 검사를 지원합니다

Prisma : Prisma 스키마 작업 시 유용한 도구를 제공합니다

Prettier - Code formatter : 코드 포매터이며 코드를 파싱하고 자체 규칙에 따라 다시 출력함으로써 일관된 스타일을 강제합니다. 그리고 보기 편하게 나열합니다

Postman : Postman 사이트에 직접 들어가지 않고도 VS Code 내에서 API 테스트를 진행할 수 있습니다

Path Intellisense : 파일명을 자동완성해 주는 인기 있는 Visual Studio Code 플러그인입니다

Material Icon Theme : 다양한 아이콘 테마를 제공합니다

Live Share : 다른 개발자들과 동시에 수정 및 디버깅이 가능하게 하는 플러그인입니다

Live Preview : HTML 파일이 어떻게 실행하는지 실시간으로 보여주는 플러그인입니다

ESLint : ESLint를 Visual Studio Code에 통합해 주는 플러그인입니다

ES7 + React/Redux/React-Native snippets : JavaScript와 React/Redux 코드 스니펫을 ES7+ 문법과 Babel 플러그인 기능을 통해 제공하는 Visual Studio Code 플러그인입니다

YAML : yaml-language-server를 통해 YAML 언어에 대한 종합적인 지원을 제공하며, Kubernetes 구문 지원이 내장된 Visual Studio Code 플러그인입니다.

 

<기본 커맨드>

Ctrl  + P : 빠른 파일 열기 - 파일 이름으로 열기

Ctrl  + W : 현제 창 닫기

Ctrl + X : 선택한 줄 잘라내

Ctrl + C : 선택한 줄 복사하기
Ctrl + V : 클립보드의 내용 붙여 넣기
Ctrl + Z : 마지막 작업 실행 취소
Ctrl + Y : 마지막 실행 취소 작업 다시 실행

Ctrl + D : 현재 선택한 부분과 일치하는 다음 항목 선택

Ctrl + L : 현재 줄 선택

Ctrl + B : 사이드바 표시/숨기기

Ctrl + Tab : 열린 파일 간 전환

Ctrl + F : 찾기

Ctrl + ` : 터미널 표시/숨기기

Ctrl + S : 현재 파일 저장

Ctrl + \ : 에디터 분할.
Ctrl + 1/2/3 : 첫 번째, 두 번째, 세 번째 에디터 그룹에 포커스

Ctrl + / : 주석 처리