안녕하세요. Visual Studio Code 유용한 기능 – prettier 에 대한 소개 포스트입니다.
VS Code를 사용하면서 다양한 플러그인(확장기능)을 사용하고 있는데요.
시간이 될 때 하나씩 소개하는 글을 작성하려고 합니다.

Prettier 란?

Prettier는 ‘Beautify’ 라는 확장기능과 양대산맥으로 불리는 Formatter 기능입니다.
Formatter란, 제가 작성한 코드에 대해 설정된 규칙에 의해 정렬을 해주는 기능이라고 보시면 됩니다.
VS Code에도 내장된 Formatter가 있지만, 이미 알고 있듯이 내장기능이 만족스럽지 않기 때문에 확장 플러그인이 개발이 됩니다.

Beautify vs Prettier

두 플러그인에 대해 간단하게 비교를 해보고자 합니다.
위 이미지는 VS Code에서 확장기능 검색을 통해 볼 수 있는 화면입니다.

비슷하지만 비교적 Prettier를 많이 다운받아 사용하는 것 같습니다.
반면에 평점은 Beautify가 더 좋네요.

대체적인 평으로는 Prettier는 정해진 규칙에 맞게 강제적으로 변경을 시키고 Beautify는 비교적 자유로운 포맷팅이 된다고 하네요.

저는 현재 React 코드를 작성할 때만 사용하고 있어서 초심자의 입장으로는 Prettier를 사용하여 가시성이 좋은 포맷으로 변경해주는게 만족스럽습니다.

Prettier 적용해보기 (VS Code)

Prettier를 적용해보기 위해 우선 프로젝트를 하나 생성해보겠습니다.

PS D:\WorkSpace\React\thinkground-lab> npx create-react-app tool-test
...(생성과정 생략)
Happy hacking!

저는 위와 같이 react 프로젝트를 생성했습니다.
여기서 기본적으로 생성해주는 코드로 앞으로 적용해본 기능들을 테스트해보시면 되겠습니다.

VS Code 에서 좌측 확장 버튼을 클릭한 후, ‘Prettier’를 검색합니다.
그리고 위와 같이 보이는 확장기능을 찾아서 설치를 합니다.

그리고 위와 같이 ‘.prettierrc’ 파일을 생성해줍니다.
이 파일은 prettier의 설정을 해주는 파일입니다.
기본적인 설정방법은 공식 홈페이지에서 확인할 수 있습니다.

위와 같이 다양한 옵션이 있는데 몇가지만 소개해드리자면,

• trailingComma
  코드 끝에 콤마(‘,’)를 입력할지 안할지 설정하는 영역입니다.
  ‘all’ 을 입력하면 모든 부분에 사용하겠다는 내용이고
  ‘none’ 을 입력하면 입력을 하지 않겠다는 내용이고
  ‘es5’ 을 입력하면 ES5에 지원하는 정도로 설정하겠다는 내용입니다.
• tabWidth
  들여쓰기를 얼만큼 할지 설정하는 부분입니다.
  기본값은 4 입니다.
• semi
  세미콜론(‘;’)을 사용할지 말지 설정합니다.
  true, false로 설정합니다.

그 외에도 여러 옵션이 있으니 공식홈페이지에서 확인해보시면 되겠습니다.
설정은 아래 이미지와 같이 해주시면 됩니다.

이렇게하면 설정까지 완료가 되었습니다.

적용은 VS Code에서 ‘F1’을 누른후 ‘Format Document’를 입력하면 포맷이 변경되는 것을 확인해보실 수 있습니다.

다른 방법으로는, [파일] – [기본설정] – [설정] 에 들어갑니다.

그리고 ‘format on save’를 검색해서 체크를 해주면, 저장할때 자동으로 포맷을 정리해주는 것을 보실 수 있습니다.

단축키로는 [Alt] + [Shift] + [f] 를 입력하시면 됩니다.
최초 사용시에는 어떤 Formatter를 사용할지 물어볼 수도 있는데 그때 Prettier를 선택해주시면 됩니다.

지금까지 Visual Studio Code 유용한 기능 – prettier 에 대한 소개 포스트였습니다.

Updated by 20.08.08 Visual Studio Code 유용한 기능 – prettier
Site : @ThinkGround
Instagram : @thinkground_official
Facebook : @ThinkGround
Twitter : @ThinkG_Flature