[React] 리액트 기본 설정

'Do it 리액트 프로그래밍의 정석' 공부한 내용을 정리하는 글입니다.

리액트 프로젝트를 생성해준다.

 

1. Prettier과 Reactjs code snippets 플러그인을 설치해준다.

 

 

그리고 프로젝트에 .prettierrc 라는 .jsx 파일을 생성해준다.

 

 

생성이 완료되었으면 

 

{
    "useTabs": false,
    "printWidth": 100,
    "tabWidth": 2,
    "trailingComma": "all",
    "semi": true,
    "singleQuote": true
}
 

 

• useTabs - 탭을 사용할 때 빈칸을 채운다.
• printWidth - 파일 최대 길이를 100칸으로 지정한다.
• tabWidth - 탭의 빈칸을 두칸으로 지정한다.
• trailingComma - 배열 항목의 마지막에 항상 쉼표를 붙인다.
• semi - 실행 줄 마지막에 항상 세미콜론을 붙인다.
• singleQuote - 문자 따옴표를 작은따옴표로 통일한다.

 

위의 코드 내용을 추가해준다. 마지막으로 [Preferences > Settings]에 들어가서 formatOnSave를 검색해서 체크박스를 true로 바꿔주면 Ctrl + s 를 누를 때마다 코드가 정렬된다.