[React] Visual Studio Code 및 관련 플러그인 설치

비주얼 스튜디오 코드 설치

https://code.visualstudio.com/download

Download Visual Studio Code - Mac, Linux, Windows

1. Reactjs code snippets 플러그인 설치

기본적인 리액트 코드 골격을 자동 완성해주는 플러그인입니다.

1. 비주얼 스튜디오 코드 실행
2. 화면 왼쪽 아래 Extensions아이콘 클릭
3. 검색창에 reactjs code snippets 입력
4. 리스트에서 선택하여 [Install] 클릭 및 [Reload]

VScode에서 RCS 플러그인 설치 화면

2. Reactjs code snippets 사용하기

본인의 프로젝트 소스 폴더에 이름.jsx (예RCC.jsx) 생성 후 열고, 편집하면에 rcc 라고 입력하면

아래 화면 처럼 리스트가 나오고 본인이 원하는 코드 골격을 선택하면 됩니다.

 

RCS를 사용하면 다양한 React 코드 골격이 생성 가능

RCC 키워드로 생성한 기본 리액트 컴포넌트 코드

참고로 자주 사용하는 키워드는 아래 표와 같습니다.

키워드	설명
RCC	기본 리액트 컴포넌트 코드 생성
RCCP	리액트 컴포넌트를 프로퍼티 타입과 함께 생성
RCFC	리액트 컴포넌트를 생명주기 함수와 함께 생성
RPC	리액트 퓨어(Pure) 컴포넌트를 생성
RSC	함수형 컴포넌트를 생성
RSCP	함수형 컴포넌트를 프로퍼티 타입과 함께 생성

3. Prettier 코드 포맷터 사용하기

코드 입력 스타일을 자동으로 변환해주는 플러그인입니다.

설치 방법은 상기한 reactjs code snippets와 비슷하게 Extensions에서 'Prettier' 검색 [Install]

prettier code formatter 플러그인 설치 화면

Prettier 설정 방법은 여러 가지가 있지만, 이번에는 각 프로젝트마다 따로 설정하는 방법으로 설명합니다.

본인의 프로젝트 루트폴더에 .prettierrc (점을포함) 파일 생성 후, 원하는 옵션을 설정하면 됩니다

 

{
  "arrowParens": "avoid",				// 화살표 함수 괄호 사용 방식
  "bracketSpacing": false,				// 객체 리터럴에서 괄호에 공백 삽입 여부 
  "endOfLine": "auto", 					// EoF 방식, OS별로 처리 방식이 다름 
  "htmlWhitespaceSensitivity": "css",	// HTML 공백 감도 설정
  "jsxBracketSameLine": false, 		// JSX의 마지막 `>`를 다음 줄로 내릴지 여부 
  "jsxSingleQuote": false, 			// JSX에 singe 쿼테이션 사용 여부
  "printWidth": 80, 				// 줄 바꿈 할 폭 길이
  "proseWrap": "preserve", 			// markdown 텍스트의 줄바꿈 방식 (v1.8.2)
  "quoteProps": "as-needed", 		// 객체 속성에 쿼테이션 적용 방식
  "semi": true, 					// 세미콜론 사용 여부
  "singleQuote": true, 				// single 쿼테이션 사용 여부
  "tabWidth": 2, 					// 탭 너비 
  "trailingComma": "all", 			// 여러 줄을 사용할 때, 후행 콤마 사용 방식
  "useTabs": false, 				// 탭 사용 여부
  "vueIndentScriptAndStyle": true, 	// Vue 파일의 script와 style 태그의 들여쓰기 여부 (v1.19.0)
  "parser": "", 			// 사용할 parser를 지정, 자동으로 지정됨
  "filepath": "", 			// parser를 유추할 수 있는 파일을 지정
  "rangeStart": 0, 			// 포맷팅을 부분 적용할 파일의 시작 라인 지정
  "rangeEnd": "Infinity", 	// 포맷팅 부분 적용할 파일의 끝 라인 지정,
  "requirePragma": false, 	// 파일 상단에 미리 정의된 주석을 작성하고 Pragma로 포맷팅 사용 여부 지정 (v1.8.0)
  "insertPragma": false, 	// 미리 정의된 @format marker의 사용 여부 (v1.8.0)
}

 

참고

https://velog.io/@kyusung/eslint-prettier-config

https://github.com/prettier/prettier-vscode

 

마지막으로 VScode 설정에서 저장 옵션을 설정합니다.

메뉴 [File > Preferences > Settings] 검색 창에서 formatOnSave 입력 및 체크 박스 ON

VScode 에디터포맷 저장설정 

여기까지 입니다! 참 쉽죠?

---

2020/09/09 - [Web프론트엔드/리액트] - [React] 리액트 테스트 앱 생성 및 수정