React - Reactjs code snippets 플러그인, Prettier 플러그인 설치

React  - Reactjs code snippets 플러그인, Prettier 플러그인 설치

---

출처 : 

http://www.yes24.com/Product/Goods/87631428

Do it! 리액트 프로그래밍 정석 - YES24

 

 

이전 포스팅

React 개발 환경 세팅 (NVM node.js, yarn, 비주얼 스튜디오 코드)

React 개발 환경 세팅 (NVM node.js, yarn, 비주얼 스튜디오 코드)

 

 

준비

개발에 필요한 라이브러리, 플러그인 설치를 위해서는 우선 비주얼 스튜디오 코드 에디터 창을 띄워줍니다.

이전 글 "React 개발 환경 세팅" 에서 생성했던 리액트 앱 "example1" 폴더를 불러옵니다.

리액트 앱 폴더 불러오기

 

Reactjs code snippets 플러그인 설치

첫 번째. Reactjs code snippets 플러그인 설치

Reactjs code snippets 플러그인은 리액트에서 자주 사용하는 코드를 자동으로 완성해줍니다. 설치해 두면 개발 작업이 용이해집니다. Reactjs code snippets 플러그인 설치를 위해 아래 화면 캡처를 참고해 주세요!

 

1) 확장(Extensions) 아이콘을 클릭합니다.

비주얼 스튜디오 코드 에디터 확장 아이콘

2) Reactjs code snippets 검색 후 설치하면, 플러그인 설치가 완료됩니다. 플러그인 설치 완료 후 VS Code를 재실행해 주세요!

Reactjs code snippets 플러그인 설치 캡처 화면

 

두 번째. Reactjs code snippet에서 자주 사용하는 단축 키워드

이러한 단축키를 사용하면 개발 시간을 줄일 수 있습니다. 아래 표로 정리한 단축 키워드들을 우선은 눈으로 한 번씩 봐주세요!

단축 키워드	설명
RCC	리액트 컴포넌트 코드 생성
RCCP	리액트 컴포넌트를 프로퍼티 타입(Prop Types)과 함께 생성
RCFC	리액트 컴포넌트를 생명주기(Life Cycle) 함수와 함께 생성
RSC	함수형 컴포넌트(Functional Component) 생성
RSCP	함수형 컴포넌트를 프로퍼티 타입과 함께 생성
RPC	리액트 퓨어 컴포넌트(PureComponent)를 생성

 

 

아래 캡처한 화면 자료를 참고하시면 단축 키워드를 어떻게 사용하는지 알 수 있습니다.

1) 우선, 테스트할 파일을 생성합니다. [src] 폴더에 [test01] 폴더를 생성합니다.

2) [test01] 폴더 하위에 RCC.jsx 파일을 생성합니다.

RCC.jsx 파일 생성 캡처 화면

3) RCC.jsx 파일을 열어서 편집 화면에 rcc라고 입력하시면, rcc와 관련된 목록이 보여집니다.

편집 화면에 rcc 입력 시 관련 목록 보여지는 캡처 화면

4) 첫 번째로 보여지는 reactClassComponent를 사용할 것이므로 편집 화면에 rcc를 입력 후 [enter] 키를 눌러주면, 아래 캡처 화면처럼 코드가 자동 완성됩니다. 편집 중인 파일 이름이 [RCC.jsx] 이므로 클래스 명이 RCC인 것을 확인해줍니다.

rcc 자동완성 코드 캡처 화면

Prettier 플러그인 설치

첫 번째. Prettier 플러그인 설치

다음으로 개발에 편의성을 위해 설치할 플러그인은 Prettier - Code formatter입니다. 플러그인 이름에서도 알 수 있듯이 줄 바꿈 등 코드의 스타일을 자동으로 변환을 도와주는 플러그인 입니다. Prettier는 특히 현업에서 자주 사용합니다. 그 이유는 프로젝트 시 코드 입력 스타일을 동일하게 유지할 수 있기 때문입니다. 아래 캡처 화면 자료를 참고하여 플러그인 설치를 시작합니다.

 

1) 위와 동일하게 확장(Extensions) 아이콘을 클릭 후 [prettier]를 검색합니다. 첫 번째로 검색되는 [Prettier - Code formatter] 를 설치해줍니다. 마찬가지로 설치 완료 후 VS Code 재시작합니다.

Prettier - Code formatter 플러그인 설치 캡처 화면

 

2) Prettier 설정

example1 프로젝트 폴더에 [.prettierrc] 설정 파일을 생성합니다. 파일명에는 반드시 [.]을 포함해야 합니다. 아래 화면을 참고하여 [.prettierrc] 파일에 설정 내용을 작성합니다.

Prettier 플러그인 설정 캡처 화면

[.prettierrc] 설정 파일에 작성된 옵션 내용은 아래와 같습니다.

• "useTabs": false
  • 탭 사용 시 빈칸으로 채웁니다.
• "printWidth": 100
  • 한 줄의 최대 길이를 100칸으로 지정합니다. 100칸을 넘기게 되면 줄 바꿈이 자동으로 됩니다.
• "tabWidth": 2
  • 탭의 빈칸을 2칸으로 설정합니다.
• "trailingComma": "all"
  • 나열한 항목의 마지막에 항상 [,(쉼표)] 를 붙입니다.
• "semi": true
  •  실행 줄 마지막에 항상 [;(세미콜론)] 을 붙입니다.
• "singleQuote": true
  
  • 문자 따옴표를 [''(작은따옴표)] 로 통일합니다.
  • 자바스크립트는 [""(큰따옴표)] 와 [''(작은따옴표)] 를 혼용하여 사용할 수 있습니다.
  • (HTML 작성 시는 큰따옴표 사용해야 합니다.)

 

3) Prettier 설정 적용

Prett파일을 열고 키보드의 [ctrl] + [shift] + [p] 를 누른 후 [format]을 검색하면 리스트 중 첫 번째에 [Format Document] 명령어가 표시됩니다. [Format Document] 명령어를 선택하시면, Prettier 플러그인 설정 적용된 것을 확인할 수 있습니다.

 

자동으로 설정 적용하기 위해서는,

아래 화면처럼 왼쪽 하단의 [톱니바퀴(관리)] 버튼을 클릭 후 [설정]을 클릭하시면, 오른쪽에 설정 창이 열립니다. 검색란에 [formatOnSave]를 입력하시면 Format On Save를 체크 및 체크 해제할 수 있습니다. 체크를 해주시면, Prettier 플러그인 자동 설정 적용이 완료됩니다. 체크한 후 파일에서 확인하시면 됩니다.

Prettier 플러그인 자동 설정 적용