개발도구

[개발 도구 설치] 03. Visual Studio Code 설치 및 추천 플러그인 설치

민졈 2022. 5. 25. 10:15

 

 

 

 

 

이번 시간에는 Visual Studio Code 설치하는 방법에 대해 알아보도록 하겠습니다.

 

웹 개발을 하다보면 어떤 IDE를 사용해야할지 고민하실텐데요,

 

Visual Studio Code는 Visual Studio와 다르게 코드 편집에 최적화된 단순한 인터페이스를 가지고 있습니다.

 

또한 자바스크립트, 타입스크립트, Node.js 등의 지원 기능을 내장하고 있고

 

여러 언어를 위한 확장 프로그램을 가지고 있기 때문에

 

타 에디터에 비해서 가볍고 빠르다는 특징을 가지고 있습니다.

 

다운로드 방법은 의외로 간단한데요,

 

아래의 링크로 들어가서 설치해주면 됩니다.

 

https://code.visualstudio.com/download

 

Download Visual Studio Code - Mac, Linux, Windows

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

code.visualstudio.com

 

 

 

 

Windows, Mac, Debian, Ubuntu 등 다양한 운영 체제에 맞는 파일들이 있습니다.

 

 

 

다운로드를 완료했다면 설치파일을 실행시켜줍니다.

 

라이센스 관련 내용에 동의 하고 다음 클릭

 

 

 

 

​

설치 경로 확인 후 다음 클릭, 시작 메뉴 관련 설정 후 다음 클릭

 

 

 

 

추가 작업 선택 후 다음 클릭

 

1) 아이콘 추가 : 바탕 화면에 VSCode 아이콘을 만들기
2) 두 번째, 세 번째 "code(으)로 열기" : 폴더나 파일을 VSCode로 바로 열 수 있도록 마우스 우클릭 메뉴에 code(으)로 열기를 표시해줍니다.
3) VSCode를 기본 편집기로 사용하고 싶은 경우 체크해주면 됩니다.
4) PATH에 추가 :  명령 창(CMD, 파워셀 등)에서 code를 입력하면 VSCode가 바로 실행 됩니다.

 

 

 

 

위의 설정들을 해주고 설치를 눌러주면 설치가 완료됩니다!!

 

 

 

 

자 이제 프로그램 설치를 완료 했으니, 필요한 플러그인 설치를 해보겠습니다.

 

 

 

1. 한글 설정

 

기본적으로 vsCode는 영문버전으로 되어있기 때문에 영어가 어려우신 분들은

 

한글 확장 프로그램을 설치해주면 됩니다!!

 

 

1) 왼쪽 하단의 익스텐션 아이콘 클릭 (단축키 : Ctrl + Shift + x)

 

 

 

2) 검색창에 "korean"입력 후 설치

 

3) 설치 완료 후 "Restart Now" 클릭

 

 

4) 재시작이 된 후 확인하면 한글 버전으로 변경된 것을 확인할 수 있습니다.

 

 

 

2. Reactjs code sinppets

리액트를 사용하는 분들을 위한 플러그인인데요!

 

리액트에서 자주 사용하는 코드 뭉치들을 자동 완성해주는 플러그인입니다. 

 

리액트 관련 템플릿을 단축키로 작성할 수 있게 도와줍니다.

 

 

 

 

 

3. Prettier

줄 바꿈 등의 스타일을 자동으로 변환시켜주는 플러그인입니다. 

 

설치 방법은 한글 확장 프로그램 설치 방법과 같습니다.

 

 

 

 

 

4. Auto Rename Tag

태그의 이름 변경 시 열고 닫는 태그를 한번에 같이 수정해주는 플러그인입니다.

 

 

 

 

 

5. Git History

특정 파일의 커밋 히스토리를 보고 싶을 때 사용하는 나름 유용한 플러그인입니다.

 

사용 방법은 마우스 우클릭 > Git : View file History를 클릭하면 해당 파일, 라인에 대한 커밋 히스토리가 표시됩니다.

 

 

 

6. Git Graph

커밋 로그들을 그래프 형태로 좀 더 쉽게 볼 수 있도록 해주는 플러그인입니다.

 

 

저는 아직 깃에 연동하지 않아서 파일이 추적되지 않음이라고 뜨지만

 

깃에 연동하고 나면 로그들을 추적해줍니다.

 

 

 

 

 

 

이 외에도 다양한 프로그래밍 언어 Python, Java, ReactJS 등의 확장 프로그램을 가지고 있기 때문에

 

사용할 프로그램들은 앞서 설명해드린 방법으로 추가로 다운받아 사용하시면 됩니다.

 

이상으로 VSCode 설치 및 플러그인 설치를 마치도록 하겠습니다!!