React를 위한 VSCode Visual Studio Code 설치하기

React를 위한 VSCode를 설치하려고 합니다.

 

 

#1. VSCode설치파일 다운로드 하기

 

https://code.visualstudio.com/download#

Download Visual Studio Code - Mac, Linux, Windows

 

- OS에 맞는 설치프로그램 다운로드

 

#2. VSCode 설치

 

- 라인선스 동의

 

- 추가 작업 선택 후 다음

1) 바탕화면에 VSCode 아이콘 생성

2) 'code(으)로 열기' : 폴더, 파일을 마우스 우클릭 시 VSCode로 바로 열기할 수 있도록 표시

3) VSCode를 기본편집기로 사용하고자 할때 체크

4) PATH에 추가하여, 명령창(CMD, CLI)등에서 code를 입력하면  VSCode 실행

설치 완료

 

#3. React를 위한 플러그인 설치

1) Reactjs code snippets

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

  - react  템플릿을 단축키로 작성 가능

  - 자주 사용하는 키워드

    rcc : 클래스 컴포넌트 생성

    rrc : 클래스 컴포넌트와 react-redux 를 연결하여 생성

    rcjc : import와 export 없이 클래스 컴포넌트 생성

    rwwd : import없이 클래스 컴포넌트 생성

    rsc : 화살표 함수형 컴포넌트 생성

    rsf : 함수형 컴포넌트 생성

 

 2) Live Server

  - 현재 작성하고 있는 코드를 실시간으로 보여주는 기능

  - 저장이 감지되면 자동으로 로컬 서버를 통해 웹브라우저에 수정사항 반영

 

 

3) Prettier

 - 줄바꿈, 들여쓰기 등의 스타일을 자동으로 변경

 

 

4) Auto Rename Tag

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

 

 

 

5) Rest Client

자세한 설명은 아래 링크로

  - REST Client - Visual Studio Marketplace

REST Client - Visual Studio Marketplace

   1. http라는 확장자의 파일을 만들고

   2. api를 입력하면 응답값을 확인 가능하고, endpoint 구분은 ### 으로

 

 

6) Git history, Git Graph, Git Lens