본문 바로가기
Front-end/IDE (편집기)

Visual Studio Code 비쥬얼 스튜디오 설치 및 환경설정 변경하기 [무료 코드 편집기]

by mooyou 2021. 4. 18.
728x90
300x250

 

 

 

 

Visual Studio 비쥬얼 스튜디오 설치 및 환경설정 변경하기 [무료 코드 편집기]

 

 

 

 

 

목차

1) Visual Studio Code 비쥬얼 스튜디오 코드 설치하기 
2) 비쥬얼 스튜디오 코드 한국어로 변경하기
3) 색 테마 변경하기
4) 탐색기 폴더 열고 닫기
5) Live Server 확장 프로그램 설치

 

 

 

Visual Studio Code 비쥬얼 스튜디오 코드 설치 ::

 

 

1. 크롬에서 비쥬얼 스튜디오 코드 검색해서 visualstudio 사이트에 들어갑니다.

 

https://code.visualstudio.com/

 

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

code.visualstudio.com

 

 

 

 

2. Download for Windows를 클릭합니다.

 

 

 

 

 

 

 

3. 다운받은 비쥬얼스튜디오 셋업 파일을 실행합니다.

 

 

 

동의합니다 누르고 계속 다음다음 선택한 후 설치하기를 클릭합니다.

 

 

 

 

 

 

4. 설치완료

 

 

설치가 완료되었습니다.

 

 

 

 

 

 


 

 

 

 

이제 환경설정을 내가 사용하기 편하게 변경해 보겠습니다.

 

 

한국어로 변경하기 ::

 

이제 한국어로 변경하기 위해서  

1. 오른쪽 5번째 있는 Extensions 아이콘을 클릭합니다.

 

 

 

 

 

2. korean 검색하고 나오는 Korean Language Pack for... 을 Install 합니다.

 

 

 

 

 

3. 인스톨 후에 비쥬얼 스튜디오 코드를 껐다가 다시 켭니다.

한국어로 변경돼 있는 것을 확인할 수 있습니다.

 

 

 

 


 

 

 

 

 

색 테마 변경하기 ::

 

왼쪽 관리 아이콘을 클릭하고 색 테마에 들어가면

 

 

 

 

여러 가지로 변경 가능합니다. 원하는 색 테마를 선택해서 변경합니다.

 

 

 

 

 

 

 

탐색기 폴더 열고 닫기 ::

 

맨 위에 탐색기 아이콘을 클릭하면 작업 폴더 트리를 껐다 켰다 할 수 있습니다.

 

 

 

 

 


 

 

 

 

Live Server 확장 프로그램 설치 ::

 

바로바로 변경된 내용 실행시키기 위해서 Live Server, 확장 프로그램을 서치 하겠습니다.

 

 

확장 아이콘을 선택하고 live server를 검색해서 나온 Live Server 확장 프로그램을 설치합니다.

 

 

 

이 Live Server를 설치하면 바로바로 변경된 내용이 실행됩니다.

즉 html문서를 작성하는 즉시 화면에서 내용을 볼 수 있습니다.

 

 

코드를 작성할때 아래 같이 마우스 오른쪽 눌러서 

Open with Live Server를 클릭해주면

 

 

그냥 저장만 해줘도

바로바로 변경되는 걸 확인할 수 있습니다.

 

 

 

 

 

728x90
반응형

댓글