-
Stylelint를 이용해 css 정리하기 (feat. Styled-Components)React 2022. 11. 14. 15:15728x90
(이 글은 MacOS, VSCode, postcss@8.4.19, postcss-jsx@0.36.4, stylelint@14.14.1, react@18.2.0을 기반으로 작성되었습니다.)
Eslint는 이제 React로 개발을 진행할 때 혼자 하는 프로젝트에서는 물론이고 같이 협업하는 프로젝트에서는 거의 필수적으로 사용하는 라이브러리입니다.
주로 Eslint + Prettier을 이용해 자동으로 Eslint에서 설정한 룰과 Prettier에서 추가한 내용에 대하여 수정하는 식으로 진행하기에 더욱 사랑받고 있는 것 같습니다.
여기에서 style에 대해서는 이런 툴이 없을까 하는 생각에 발견한 것이 바로 Stylelint입니다.
이거다 하는 생각에 신나게 설정을 진행했을 때 당황할 수밖에 없었습니다.
제가 React를 사용할 때 주로 사용하는 Style 라이브러리인 styled-components에는
친절하게stylelint를 설정하는 방법을 소개하고 있습니다.하지만 저걸 사이트에 나온 방법을 그대로 적용하면 뭔가 잘못된 것을 느낄 수 있을 겁니다.
그럼 이제 제가 찾아낸 방법에 대해 설명하겠습니다.
1. Stylelint Extention 설치하기
Stylelint - Visual Studio Marketplace
2. Stylelint Extention 설정하기
cmd + , > 검색창에 stylelint 검색
순서대로 진행한 뒤 하단에서 Stylelint: Snippet, Stylelint: Validate을 찾아 값을 추가/수정해 줍니다.
- css
- postcss
- javascript
- javascriptreact
만약 Typescript를 사용한다면 아래의 내용도 추가해 줍니다.
- typescript
- typescriptreact
3. 라이브러리를 설치하기
npm install -D postcss, postcss-jsx, postcss-syntax, stylelint, stylelint-config-recess-order
4. .stylelintrc 작성하기
{ "extends": ["stylelint-config-recess-order"], "customSyntax": "postcss-jsx", "overrides": [ { "files": ["**/*.styles.{ts,tsx}"], "customSyntax": "postcss-jsx" } ], "rules": { "no-empty-first-line": null, // 필수 "function-no-unknown": null, // 필수 "string-quotes": "single", "declaration-colon-newline-after": null, "value-list-comma-newline-after": null, "value-keyword-case": null, "function-name-case": null } }
위 2가지 rules의 경우 필수 항목이며 나머지 항목에 대해서는 취향에 맞게 변경하며 적용해 나가면 될 겁니다.
제가 지금 설정한 방법 역시 완벽하지 않습니다.
이전에는 stylelint-config-standard extends 역시 사용했지만, 이번에 버전을 올리며 제거했으며 postcss-jsx 역시 마지막 업데이트가 3년 전이기에 불안한 것 역시 사실입니다.
하지만 한 번 설정해 사용해 보신다면 stylelint의 장점에 푹 빠지실 거라고 생각합니다.
만약 이외에도 더 좋은 방법을 알고 있으신 분이 있다면 공유해주시면 감사하겠습니다 :)
'React' 카테고리의 다른 글
useState와 useEffect를 넘어선 고급 React Hooks (0) 2024.01.29 React useEffect vs useLayoutEffect 차이점 알아보기 (0) 2022.12.15 React 디자인패턴 (0) 2022.10.07 React 최신 상태관리 라이브러리 비교하기 (feat. zustand, redux-toolkit, jotai, recoil) (2) 2022.08.16 Styled-Components 테마 적용하기 (0) 2021.07.30