[Visual Studio Code] - VSCode 설치 및 추가 플러그인 설치

1. Visual Studio Code 설치

---

VSCode 주소 -> https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

---

1-1. 각자 환경에 맞게 다운로드하면 됩니다.

---

1-2. 라이센스 관련 동의 체크 후 "다음" 클릭

---

1-3.  설치할 경로 확인 후 "다음" 클릭

 

---

1-4. 시작 메뉴 관련 설정 후 "다음" 클릭

---

1-5. 추가 작업 선택 후 "다음" 클릭

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

---

1-6. "설치" 후 "종료" 클릭

이렇게 설치가 완료되면 실행 후 플러그인을 설치해 보겠습니다.

---

2. 플러그인 설치

2-1. 한글 설정

• VSCode는 기본적으로 영문으로 설정
• 한글 설정으로 변환

---

2-2. React 개발시

• React 개발 시 편의를 위한 플러그인
• React에서 자주 사용하는 코드들을 자동 완성 해주는 플러그인

---

2-3. Live Server

• 현재 작성하고 있는 코드를 실시간으로 보여주는 기능
• 저장이 감지되면 자동으로 로컬 서버를 통해 웹브라우저에 수정사항을 반영해준다

2-4. Prettier

• 줄바꿈등의 스타일을 자동으로 변환
• 이클립스의 코드 포매터와 비슷

2-5. Auto Rename Tag

• 태그의 이름을 변경 시 열고 닫는 태그를 한번에 수정

2-6. Git History

• 특정 파일의 커밋 히스토리를 보고싶을 때 사용
• 마우스 우클릭 -> Git : View File History를 클릭하면 해당 파일, 라인에 대한 커밋 히스토리가 화면에 표시

2-7. Git Graph

• 커밋 로그들을 그래프 형태로 직관적으로 볼 때 사용