Prettier 설정하기

Prettier 설정하기

2022. 9. 18. 17:47ㆍ개발 잡부

728x90

한동안 열심히 놀다가 현타가 와서 다시 돌아왔다.

회사에서 새로운 프로젝트를 시작했는데, 프리티어를 설정해본 적이 없어서 정리해볼겸 써볼까한다.

[VSCode] Prettier 설정 방법

Prettier는 VSCode에서 코드를 이쁘게 자동으로 정렬해준다. VSCode Extenstion탭에서 검색하여 설치해준 후, 설정 (Preference)에 들어가서 'editor format on save'를 검색, 체크박스에 체크 해준다. 다시 검..

nuggy875.tistory.com

VSCode Prettier 적용 안 되는 오류

올해 어느샌가부터 VSCode에서 저장하면 자동으로 코드를 정렬해주는 Prettier가 작동하지 않았다. 귀찮아서 그냥 쓰고 있었지만, 원인을 알아내고 말았지.. VSCode > Preference (cmd+,) 들어가서 'Default For

nuggy875.tistory.com

Ctrl + Shift + X를 누르고 검색창에 'prettier'를 검색한다.

'설치'를 누른다

Ctrl + Shift + P를 누르고 'prettier'를 검색한다.

Prettier: Create Configuration File을 선택한다.

폴더 선택 창이 나오면 원하는 위치에 선택한다.

선택한 폴더에 있는 .prettierrc 파일을 연다

설정값을 넣는다.

옵션	설명	값
tabWidth	탭키를 눌렀을 때 몇 글자가 공간을 차지하는가	숫자 JS: 2가 국룰 기타 언어: 4가 국룰
useTabs	Tab키를 눌렀을 때 탭 문자로 들어가는가	true: 탭문자로 들어감 false: 공백 여러개로 들어감
semi	프로시저 마지막에 ;을 넣느냐	true: ;를 붙임 false: ;를 붙이지 않음
trailingComma	Object의 프로퍼티가 여러줄로 있을 때, 맨 아랫줄에 ,를 넣느냐	all: 마지막에 ,를 붙임 es5: es5에 맞는 경우에만 붙음 (Type같은 경우에 안 붙음) none: 마지막에 ,를 붙이지 않음
singleQuote	문자열을 '로 감싸느냐, "로 감싸느냐	true: '을 사용 false: "를 사용

Ctrl + , 를 클릭 후, Editor: Default Formatter를 Prettier - Code Formatter로 설정

마찬가지로 설정 파일에서 Editor: Format On Save을 체크합니다.

금붕어의 일기장