비주얼 스튜디오 코드, Visual Studio Code, 설치 및 사용 방법

비주얼 스튜디오 코드(Visual Studio Code) 설치 및 사용 방법

비주얼 스튜디오 코드, Visual Studio Code, 설치 및 사용 방법

목차

• Visual Studio Code(비주얼 스튜디오) 코드 설치 방법
• 비주얼 스튜디오 코드 인터페이스
• 비주얼 스튜디오 코드 확장 프로그램 설치
• Visual Studio Code 사용 방법

1. 비주얼 스튜디오 코드 설치 방법

비주얼 스튜디오 코드는 무료 코드 편집기이다.

windows , MacOS, Linux 모두 지원된다.

1) 비주얼 스튜디오 코드(Visual Studio Code) 접속 및 다운로드

비주얼 스튜디오 코드, Visual Studio Code 공식 홈페이지(이곳)에서 다운로드하면 된다.

아래 그림처럼 윈도우의 경우 Download for Windows를 선택한다.

두 번째 그림처럼 MacOS, Linux도 다운로드할 수 있다.

비주얼 스튜디오 코드 for Windows

  비주얼 스튜디오 코드 - MacOS, Linux 다운로드

2) 설치

2-1) 사용자 라이선스 동의

비주얼 스튜디오 코드 사용자 라이선스 동의

2-2) 설치 시작

비주얼 스튜디오 코드 설치 시작

2-3) 설치 폴더 지정

비주얼 스튜디오 코드 설치 폴더 지정

2-4) 추가 작업 선택

비주얼 스튜디오 코드 추가 작업 선택 

2-5) 설치 완료

비주얼 스튜디오 코드 설치 완료

3) Visual Studio Code 실행 화면, Visual Studio Code 인터페이스

Visual Studio CodeUI는 5가지 영역으로 나뉜다.

1. 활동 표시줄(Activity Bar): 맨 왼쪽 영역
2. 사이드 바(Side Bar)
3. 편집기(Editor) - 파일을 편집하는 기본 영역이며, 세로 및 가로로 나란히 원하는 수만큼 편집기를 열 수 있다.
4. 패널(Panels) - 출력 또는 디버그 정보, 오류 및 경고 등이 표시된다. 더 많은 수직 공간을 위해 패널을 오른쪽으로 이동할 수 있다.
5. 상태 표시줄(Status Bar) - 열려 있는 프로젝트 및 편집 중인 파일의 정보를 보여 준다.

Visual Studio Code 인터페이스

4) 확장 프로그램 설치

4-1) 한국어 설치

아래와 같이 검색하여 설치한다.

한국어 설치

4-2) code runner 설치

아래와 같이 검색하여 설치한다.

code runner 설치

4-3) open in browser 설치

open in browser 설치

2. 비주얼 스튜디오 코드 사용 방법

1) 새 파일 만들기

파일- 새 파일을 클릭하면 새로운 탭이 열린다.

새 파일 만들기

1-1) 코드를 작성하기 전에 파일 이름 지정 및 미리 파일 저장하기

폴더를 하나 만들고 미리 파일(html 파일 등)로 저장한 후 작성을 계속한다.

저장하고 나면 우측 하단의 문서 표시가 html로 나타나는 것이 보인다. 즉 비주얼 스튜디오 코드가 이 파일을 html이라는 언어로 인식했다는 것을 의미한다.

비주얼 스튜디오 코드 하단의 문서 표시

2) 비주얼 스튜디오 코드의 언어별 지원

원하는 언어(html, javascript 등)를 선택하면 그 언어에 맞는 지원을 한다.

비주얼 스튜디오 코드는 ht 까지만 치면 아래 그림처럼 html이라는 태그를 추천해 준다.

비주얼 스튜디오 코드 활용 방법

엔터를 치면 아래처럼 태그 포맷을 완성해 준다

비주얼 스튜디오 코드의 언어별 문서 형식 지원

바디에 필요한 태그를 위 붉은 박스 안의 것처럼 기재한 후 탭 키를 누르면 아래처럼 자동으로 문서가 형식화된다.

비주얼 스튜디오 코드의 문서 만들기 지원

위 그림에서 Lor + 탭 키로 로렘 텍스트가 지원된다.(샘플 텍스트 만들기를 할 수 있다.)

3) 들여 쓰기: 탭 키

• 범위 선택 후 탭 키 → 공백 4개만큼 들여 쓰기
• 범위 선택 후 Shift+탭 키 → 공백 4개만큼 내어 쓰기

4) 주석 설정 : 단축키 Ctrl+/

단축키를 한번 실행하면 해당 언어에 맞는 주석이 표시되고, 다시 한번 실행하면 주석이 해제된다.

주석 설정 : 단축키 Ctrl+/

5) 찾기 기능: 단축키 ctrl+F

비주얼 스튜디오 코드 찾기: ctrl+F

비주얼 스튜디오 코드 찾기 방법

6) 바꾸기 - 꺽쇠 클릭

① 하나씩 순차적으로 바꾸기.

② 모두 바꾸기

비주얼 스튜디오 코드 - 바꾸기 기능

7) 저장하기

자동 저장이 안 된다.(설정에서 지정할 수 있다)

아래 동그라미 표시는 저장이 안 되었다는 표시이므로 수시로 저장이 필요

비주얼 스튜디오 코드 저장하기

8) 프로젝트 폴더 관리

프로젝트 폴더 관리

8-1) 폴더 열기

폴더 열기 1

폴더 열기 2

9) 새 파일 추가 및 화면 추가

• 새 파일 추가 시 화면 드래그로 화면 추가(세로로 나누기, 가로로 나누기) 가능
• 드래그하여 아래쪽으로도 이동 가능
• 드래그하여 원래 자리로 복귀 가능

새 파일 추가

새 파일 추가 시 화면 나누기→ 화면 드래그로 가능

10) 설정

(윈도우의 경우) 파일 - 기본 설정 - 설정

단축키: ctrl+,

비주얼 스튜디오 코드 설정