[AI스쿨] Prettier란 무엇인가? (prettier설치, 설정)

#prettier란 #prettier설치 #prettier설정 #AI스쿨

​

이 글은 AI스쿨 msa기반 java 백엔드 코스중에 공부한 내용을 정리하였습니다.

학습법 이론

학습을 하기 이전, 명심해야할 학습법이 있다.

​

1.이해가지 않는다고 뒤돌아가 다시 보지 말 것

2.외우지 말라

=> 자주 봐서 외워짐을 당하라

=> 크롬을 통해 copy and paste하라

1. 이해하는게 중요하다

=> 왜 생겨났는지?

=> 왜 사용하는지?

===> 응용이 가능해진다.

4.새로운 지식을 넣을땐 뇌를 비우자

​

Prettier란?

Prettier란?

prettier는 코드를 일관성있는 모양으로 만들어주는 개발도구입니다! 모든 개발자가 똑같은 방법으로 코드를 작성하기란 불가능한데, prettier를 사용하여 일관성있게 코드를 만들 수 있습니다. 코드를 일관성있게 작성하면, 협업할때 효율적이게 코드작성 및 수정이 가능합니다.

​

prettier설치방법

-g // 컴퓨터에 설치

-d // package.json devDependencies에 저장

-e // 사용자 지정버전 설치

​

prettier 설정방법

.prettierrc.json

prettier를 적용할 디렉토리에 .prettierrc.json파일을 만들어 사용자가 원하는 설정을 지정할 수 있습니다. 아래는 사용자 설정에 대한 예시입니다.

객체형태로 key:value 형식으로 넣으시면 됩니다!

​

prettier의 모든 설정을 보고싶다면 pretiier공식문서를 참고하세요! (구글림)

​

prettier 설정정리

설정내용

각 설정 key가 무엇을 의미하는지 알고 싶다면, 공식문서를 참고하는게 가장 빠를것 입니다. 하지만 영어로 되어있어서 해독하기 어려우신 분들을 위해 몇가지 주요설정을 적어봤습니다.

​

tabWidth

tabWidth 속성은 들여쓰기입니다. 2는 디폴트 값이며 tab한번당 2만큼의 들여쓰기가 적용됩니다.

​

semi

semi 속성을 true를 주게된다면, prettier가 적용되는 모든코드의 마지막에 semicolon(;)이 붙습니다. 사용자가 빼먹고 저장했을시에 자동으로 적용되는 유용한 속성입니다.

​

bracketSpacing

bracketSpacingi 속성을 true로 설정한다면 객체가 다음과 같이 저장됩니다.

​

true

{ foo: bar }

​

false

{foo: bar}

​

singleQuote

singleQuote 속성을 true로 설정하면 prettier적용시 모든 quote(" ", ' ')가 single(' ')로 설정됩니다.