intelliJ Prettier 설정하기

Prettier란?

코드 포멧터(Code Formatter)란 개발자가 작성한 코드를 정해진 코딩 스타일을 따르도록 변환해주는 도구를 말합니다. Prettier는 이러한 코드 포멧터 중에서도 최근에 가장 인기를 많이 얻어 거의 표준이 되고 가고 있는 자바스크립트 라이브러리 이다.

코드를 저장 시 정해놓은 규칙에 맞게 자동으로 정렬해서 가독성을 높이고 코드 스타일을 통일할 수 있다.

Prettier 설정방법

1. IntelliJ IDEA Plugins 설치
   Settings(Ctrl + Alt + s) > plugins > Prettier 검색 > Install > IDE restart
   
   
2. 필요한 Dependencies 설치

   $ npm install --save-dev --save-exact prettier 
   // 정확히 일치하는 버전의 패키지를 추가한다.

3. Prettier 설정
   Settings(Ctrl + Alt + s) > Languages & Framworks > JavaScript > Prettier
   
   • Node Interpreter : 프로젝트에 사용 중인 버전의 node를 선택
   • Prettier package : 프로젝트 루트 디렉토리/node_modules/prettier 모듈 디렉토리를 선택
     
     
4. .prettierrc.js 파일 생성

   module.exports =  {
          semi:  true,
          trailingComma:  'all',
          singleQuote:  true,
          printWidth:  100,
          tabWidth:  2,
  };

• 추가적인 옵션은 여기를 참고하자 : https://prettier.io/docs/en/options.html

Prettier 적용방법

Ctrl + Shift + Alt + P

Reference

Prettier