해당 글은 prettier plugin 개발기를 담고 있습니다.

Motivation

혹시 prettier가 없는 개발을 경험해보신적이 있으신가요?

eslint는 plugin에 굉장히 친화적인 생태계로 인해 많은 회사에서 직접 plugin을 개발하여 사용중 입니다.

하지만 eslint 와 비교하였을때, 상대적으로 prettier plugin 에 대해서는 크게 알려지지 않았고, 눈에 보이는 시도가 없어 보였습니다.

+) Deprecation of formatting rules에 따르면 eslint는 더 이상 formating을 지원하지 않는다고 합니다.

또한 부스트캠프 8기(웹 모바일)를 진행하며, vanilaJS 로 컴포넌트를 설계하거나 웹 개발을 진행해야하는 과제가 정말 많았습니다.

특히나 innerHTML 을 작성하기 위해서 백틱(`)안에서 한줄한줄 html을 작성하던 기억이 새록새록 합니다😂

과제를 수행하면서 어떻게든 더 수월하게 포맷팅을 수행하기 위해서 찾아보았지만, 역시나 백틱 내부의 html 코드에 대해서 정렬기능을 제공하는 prettier plugin 은 찾을 수 없었습니다.

이제는 부스트캠프도 끝났으나, 그래도 뒤를 이을 후배 캠퍼분들(네이버 부스트캠프) 이나 다른 부트캠프 분들께서도 요긴하게 사용하실 수 있지 않을까 싶어 해당 plugin 을 개발하게 되었습니다.

주의

해당 시리즈는 제가 prettier라는 거대한 프로젝트의 plugin 을 개발하기 위한 문제 해결과정 전체를 담고 있습니다.

이런 분이 읽으시면 좋습니다.

1. 제가 문제해결을 위해 근거를 찾는 과정이 궁금하신 분
2. 나만의 prettier plugin 을 개발하고 싶으신 분
3. prettier-plugin-html-formatter-in-backtick 의 구현과정이 궁금하신분

그럼 시작해보겠습니다.