[Prettier] VS Code 에서 Prettier 프리티어만 설정하기

안녕하세요, 다람쥐입니다!

예전에 Visual Studio Code (VS Code) 에서 프리티어(Prettier)와 ESLint 를 같이 설정해서 프로젝트를 구성하여 사용했었습니다.

그러던 중 자바스크립트 교재 실습하려고 프로젝트를 구성했는데, 프리티어(Prettier)만 쓰려고 했는데 설정이 잘 안되길래

공식 문서를 차근 차근 따라했더니 바로 됐습니다. ( 역시 문서를 잘 봐야.. )

다음에 까먹지 않기 위해 VS Code 에서 Prettier 플러그인 설정하는 법을 정리했습니다.

 

위에서 언급한 대로 Visual Studio Code 에서 Prettier 플러그인을 제공해줘서, 저장 시에 자동으로 포맷팅을 해주도록 설정할 수 있습니다. VS Code 왼쪽 메뉴 중에서 가장 아래 버튼을 클릭하면 플러그인을 검색할 수 있습니다.

'Prettier' 을 검색하여 'Prettier - Code formatter' 을 설치해줍니다.

VS Code Prettier 플러그인

Command + , 버튼으로 설정에 들어가서 파일 탭의 우측에 ( VS Code 우측 상단 ) 맨 왼쪽 버튼으로 JSON 설정 파일로 전환합니다.

VS Code 우측 상단

아래 속성들을 추가로 넣어줍니다.

{
  ...
  
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

추가로 프로젝트 폴더에 'prettier' 패키지를 개발용으로 설치해줍니다.

npm install prettier -D --save-exact

프로젝트 폴더에 '.prettierrc' ( 또는 '.prettierrc.json' ) 파일로 어떻게 포맷팅을 할지 설정해줍니다.

{
  "singleQuote": true,
  "semi": true
}

자세한 Prettier 옵션은 공식 문서를 참고해주시면 될 것 같습니다.

한 줄 길이, 탭 너비, 탭 대신 공백 여부, 세미클론 여부, 따음표, 끝 콤마, 중괄호 앞뒤 공백, 화살표 함수 인자 괄호 여부 등등을 설정해줄 수 있습니다.