[WebStorm] Prettier를 사용하여 vue파일 reformat하기

안녕하세요, Einre입니다.

(ADblock을 꺼주시면 감사하겠습니다.)

---

오늘은 JetBrains의 WebStorm에서, Prettier를 사용하여 vue파일을 reformat하는 방법과, rule을 설정하는 방법에 대해 알아보도록 하겠습니다.

 

 

 

WebStorm에서 Prettier plugin 설치하기

Settings - Plugins의 화면

우선, Setting - Plugins에서 prettier를 검색하여 설치해줍니다.

 

 

Prettier의 상세 설명

Prettier의 상세 설명을 보면, 사용 방법이 다음과 같이 나와있습니다.

• 당신의 프로젝트이 Prettier를 추가해라.
• Prettier를 이용해 reformat할 코드나 파일을 선택해라.
• "Reformat with Prettier"액션(ctrl+alt+shift+p)을 사용하거나, "Find Action"팝업에서 찾아서 사용해라.

 

 

 

Project에 Prettier 설치하기

Prettier 설치 방법

프로젝트 경로에서, npm install --save-dev prettier 명령어를 사용해서 개발의존성으로 설치합니다.

 

 

package.json의 devDependencies

그러면 위와 같이 devDependencies에 prettier가 자동으로 추가됩니다.

 

 

 

package.json에 prettier 설정 추가하기

tabWidth설정 추가

prettier 객체를 새로 작성하고, 내부에 tabWidth의 값을 원하는 들여쓰기 값으로 설정합니다.

그러면 상단에 Use code style ~~? 이라는 문구가 뜨는데, 이 때 Yes를 눌러줍니다.

 

이후, vue파일 내에서 reformat을 하고 싶다면 위의 사용법에 나와 있는 대로 하시면 됩니다.

 

 

 

참고

JetBrains IDE Support - How can I change the prettier settings?

How can I change the prettier settings?

WebStrom 2019.1 Help

Prettier - Help | WebStorm