intelliJ Prettier 설정하기

• Prettier를 다음에도 빠르게 설정하기 위해 작성하는 글

코드 포맷터란?

• 코드 포멧터(Code Formatter)란 개발자가 작성한 코드를 정해진 코딩 스타일을 따르도록 변환해주는 도구를 말합니다.

Prettier란?

• Prettier는 이러한 코드 포멧터 중에서도 최근에 가장 인기를 많이 얻어 거의 표준이 되고 가고 있는 자바스크립트 라이브러리 이다.
• 코드를 저장 시 정해놓은 규칙에 맞게 자동으로 정렬해서 가독성을 높이고 코드 스타일을 통일할 수 있다.

Prettier 설정방법

1. IntelliJ IDEA Plugins 설치

• Settings(Ctrl + Alt + s) > plugins > Prettier 검색 > Install > IDE restart

2. 필요한 Dependencies 설치

// gitbash에서 내가 설치한 vue의 front 패키지에 이동 후 
$ npm install --save-dev --save-exact prettier 

3. Prettier 설정 (Prettier 들어가서 수동으로 패키지 위치 지정)

- Settings(Ctrl + Alt + s) > Languages & Framworks > JavaScript > Prettier

• 사진 처럼 Run on 'Reformat Code' action 이거 체크 누르기!

4. .prettier.js 파일 생성

{
  "$schema": "https://json.schemastore.org/prettierrc",
  "semi": false,
  "singleQuote": true,
  "printWidth": 100
}