[IntelliJ] Prettier 설정하기

설정하기에 앞서 Prettier가 무엇인지 간단히 알아보면,

JavaScript, JSX, Angular, Vue, Flow, TypeScript, CSS, Less, and SCSS, HTML, JSON, GraphQL, Markdown, including GFM and MDX, YAML의 코드 포맷을 사용자가 설정한 대로 만들어준다

 

그럼 Prettier는 왜 필요한가?

코드 스타일을 강제하여 1명 이상이 개발했을 때도 1명이 개발한 것처럼 통일성을 유지하여 깔끔한 코드를 유지할 수 있다. (완벽하다고는 할 수 없지만 혼자 사용할 때도 유용함엔 틀림 없다)

 

이제 설정을 해보자

Preferences > Plugins > Prettier를 검색해서 설치 후 재부팅한다

 

npm install --save-dev --save-exact prettier

또는

yarn add --dev --exact prettier

터미널에서 명령어를 사용하여 설치한다

 

여기까지하고 코드상에서 

Opt-Shift-Cmd-P on macOS
or
Alt-Shift-Ctrl-P on Windows and Linux

위의 OS에 맞는 Prettier 단축키를 눌러보면...

동작! 하지 않는다. 뭐지?!

 

한 가지 설정이 빠졌는데

JavaScript 기준으로,

Preferences > Languages & Frameworks > JavaScript > Prettier > Prettier package에서 prettier 관련된 경로를 선택해주어야 한다

 

그리고 다시 Prettier 단축키를 눌러보면 .prettierrc.js 파일의 설정값에 따라 코드가 정렬된다

 

프로젝트 생성 후 기본값으로 아래와 같이 설정되어 있다

module.exports = {
  bracketSpacing: false, // 객체 리터럴의 괄호 사이의 공간
  jsxBracketSameLine: true, // JSX 요소의 마지막 라인에 '>' 특수기호를 같은 라인|다음 라인
  singleQuote: true, // 쿼테이션 마크를 1개|2개
  trailingComma: 'all', // 끝에 ','를 붙임('es5'(기본), 'none', 'all' 3개의 옵션)
  tabWidth: 2, // 탭의 넓이
};

입맛에 맞게, 상황에 맞게 설정하여 사용하면 된다

 

상세하고 추가적인 옵션이 궁금할 때는 아래 주소로 이동하여 다양한 옵션을 확인해보자

Prettier · Opinionated Code Formatter

 

 

끝.