react -boilerplate: lint 적용하기(eslint, prettier, stylelint, husky)

적용 이유

팀원들과 지속적으로 프로젝트를 진행하면서 css의 순서까지 맞추기로 하였습니다. 

저는 팀원이 공유해준 css정렬 순서에 관한 블로그 글을 보며 계속 css를 맞추게 되었습니다.

하지만 이러한 작업이 저에게는 굉장히 귀찮고 하기 싫은 작업 중 하나로 남았습니다.

따라서 주말 동안 이를 자동화할 도구를 찾게 되었고 스타일린트를 적용하게 되었습니다.

 

스타일 린트란?

스타일린트 공식 홈페이지를 가게 된다면 아래와 같은 문장으로 설명합니다.

A mighty, modern linter that helps you avoid errors and enforce conventions in your styles

 

스타일린트와 css-in-js를 함께 사용하기 위해서는 추가적인 설정을 해주어야 합니다.

이를 위해서 @stylelint/postcss-css-in-js 라이브러리를 설치해주어야 하는데 npm에서의 사용법을 보고 stylelint와 적용을 하려 했지만, 많은 삽질을 하게 되었습니다. 

 

하지만 잘 되지 않았고 다시 stylelint의 문서를 보게 되었습니다.

그러다 아래와 같은 customSyntax를 발견하게 되었습니다.

 

If a shared config isn't available for your preferred language or library, then you can install the appropriate custom syntax yourself and use the customSyntax option to configure it. 

 

따라서 공식문서와 같이 customSyntax 키의 값으로 커스텀하고 싶은 옵션을 넣어주니 해결할 수 있었습니다.

 

또한 자동으로 커밋을 하기 전에 스타일을 수정하여 저장하게 하고 싶었습니다. 따라서 husky와 lint-staged를 설치하여 해결하였습니다.

eslint의 경우는 자동으로 하는 대신 직접 확인하는것이 좋다고 생각하여 자동으로 변경되지 않게 하였습니다.

boilerplate로 사용할 만큼 많은 규칙을 적용하는 대신 러프하게 기본적인 플러그인들만 적용하여 추후 수정 또한 용이하게 하였습니다.

 

boilerplate: https://github.com/jinn2u/react-lint-config