React5일차-prettier

prettier 에 대해서 알아보겠습니다.이것도 eslint와 비슷한 역할을 합니다.

 

빈폴더에 우클릭 하고 vscode열어주세요

(하면서 다시 인지한건데 폴더이름에 빈공간이 없어야됩니다. 새 폴더안되요 ㅎㅎ )

code(으)로 열기 클릭

들어와서 터미널 -새터미널 해서 터미널 열어주세요(이때까지 햇으니 알수 있을거에요 ㅎㅎ)

새터미 널 열기

npm inint -y 하고 엔터

엔터치기전

엔터 치고나서

package.json파일 생성 됬을겁니다

npm i prettier -D 치고 엔터

전

후

파일 목록

이제 index.js라는 폴더 만들어주겠습니다.

클릭

이렇게 해서 index.js 파일을 만들어주세요

그럼 저희는 이렇게 파일목록이 될거입니다

그다음 index.js켜서 console.log("hi)입력 ;찍지 말아주세요

npx prettier index.js 입력 하고 엔터

전

후

이렇게 틀린부분이 고쳐져서 반환됩니다.

npx prettier index.js --write 치고 엔터

전

후

index.js 변환

이거는 틀린부분을 찾고 index.js를 수정해줍니다. 

이제 이걸 편하게 하기위해서 다시확장프로그램 설치해주도록 합시다

4번째 블록 같이생긴거 클릭

prettier 검새하고 젤위에꺼 설치

그리고 이렇게 해서 파일-기본설정-설정 진입

format 검색

Editor:Default Formatter 그림처럼 prettier클릭 하고 밑에 두개 체크박스 클릭

그럼 이런식이되고 다시 index.js로 이동

이상태로 저장 누르면 자동으로 변환됩니다.

저장전

저장후

그럼 이제 create react app에서 어떻게 쓰는지 알아보겠습니다.

package.json 파일 안에 eslintConfig 의 extends 내부 저렇게 "prettier", 를 추가해주면 eslint와 충돌이 나지 않고잘 작동됩니다

이제 끝 수고하셔습니다