WebStorm에서 자동 저장 시 Prettier를 실행하게 되면 깨끗한 코딩이 매우 낫다.

본고에서는 WebStrom에 Prettier를 짜넣어, 파일 자동 저장시에 Prettier를 실행하도록 하는 설정 방법을 소개한다.

배경 지식

WebStorm: JavaScript를 타겟으로 하는 통합 개발 환경.

Prettier : Node.js제의 코드 성형 툴로, JavaScript, TypeScript를 비롯한 복수의 프로그래밍 언어를 서포트한다.

Opinionated and automated code formatting : 독단적이고 자동적인 코드 성형. 코딩 스타일에 대해 팀에서 불모한 논의를 피하고 코딩의 본질(=작동하는 것)에 집중하기 위한 프랙티스.

WebStorm에서 파일을 자동 저장할 때 Prettier를 실행하는 방법

Preference → Tools → File Watchers를 열고 +를 누르고 Prettier 템플릿을 선택합니다.

「File type」을 「TypeScript」등을 선택한다. Auto-save edited files to trigger the watcher에 체크를 하여 파일 자동 저장시에 Prettier가 실행되도록 한다.

이상.

※Tools에 File Watchers가 없는 경우는, File Watchers 플러그인을 WebStorm에 인스톨 할 필요가 있다.

소감

코드를 변경할 때마다, 코드 정형이 자동으로 달리므로, 잡하게 써도 코드가 비교적 깨끗한 마무리가 되어 편해.