* Visual Studio Code 설치

VS Code 설치

 

https://code.visualstudio.com/에 접속하여 자신의 OS에 맞게 설치합니다.

Visual Studio Code - Code Editing. Redefined

 

• 라이센스 동의 후 [다음] 클릭

 

• 설치할 경로 지정 후 [다음] 클릭

 

• 시작 메뉴 관련 설정 후 [다음] 클릭

 

• 추가 작업 선택 후 [다음] 클릭

ㅁ 바탕화면에 아이콘을 만들려면 "바탕 화면에 바로가기 만들기"를 클릭합니다.

ㅁ 폴더나 파일을 VS Code로 바로 열 수 있도록 마우스 우클릭에 code(으)로 열기를 표시합니다.

ㅁ VS Code를 기본 편집기로 사용하고 싶은 경우 체크합니다.

ㅁ CMD 등에서 code를 입력하면 VS Code가 바로 실행되게 하려면 "PATH에 추가"를 체크합니다.

 

• [설치] 클릭

 

• 설치 끝 !

 

도움이 될만한 기능들(VSC Extension)

 

1. Korean(사용법) Language Pack for Visual Studio

: 한글 버전의 VS Code를 사용할 수 있습니다.

 

2. Reactjs code snippets

: 리액트에서 자주 사용하는 코드 뭉치들을 자동으로 완성해주는 플러그인입니다. React 관련 템플릿을 단축키로 작성할 수 있습니다.

단축키	설명
rcc	클래스 컴포넌트 생성
rrc	클래스 컴포넌트와 react-redux 리덕스를 연결해서 생성
rccp	클래스 컴포넌트와 prop type들을 클래스 뒤에 생성
rcjc	import와 export없이 클래스컴포넌트 생성
rcfc	클래스 컴포넌트와 모든 라이프사이클 메서드를 포함해서 생성
rwwd	import없이 클래스 컴포넌트 생성
rsc	화살표함수형 컴포넌트 생성
rsf	함수형 컴포넌트를 생성
rsc	화살표함수형에 props를 내려서 생성

 

3. Live Server

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

 

4. Prettier

: 줄바꿈 등의 스타일을 자동으로 변환해줍니다. 

 

5. Auto Rename Tag

: 태그의 이름을 변경할 때 열고 닫는 태그를 한번에 수정해줍니다.

 

6. REST Client

: .http 또는 .rest 확장자 파일로 생성해줍니다.

 

7. Git History

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

 

8. Git Graph

: 커밋 로그들을 그래프 형태로 직관적으로 볼 수 있습니다.