리액트 시작 전 유용한 플러그인

오인섭·2021년 1월 19일
0

ReactJS

목록 보기
1/6

1. Reactjs code snippets

리액트에서 자주 사용하는 코드를 자동완성 시켜주는 플러그인

*.jsx 파일 생성 후 아래 키워드 입력시 컴포넌트 자동완성

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

2. Prettier

코드의 줄바꿈, 줄 구분 간격 등 설정한 스타일로 자동변환

제대로 이해한게 맞는진 모르지만 prettier가 설치된 경로의 setting.json 파일에 아래 객체를 추가해주면 됨

prettier{
    "useTabs":false,	//탭 사용시 빈칸채움
    "printWidth":100,	//파일 최대 길이 100칸
    "tabWidth":2,	//탭의 빈칸 2칸으로
    "trailingComma":"all",	//나열항목 뒤에 항상 쉼표 표시(,)
    "semi":true,	//실행줄 마지막에 항상 세미콜론 표시(;)
    "singleQuote":true	//문자의 따옴표를 작은따옴표(' ')로 통일
}

파일 저장시 자동으로 Prettier가 실행되게 설정

설정 - formatOnSave 검색 후 체크박스 체크

0개의 댓글