Stylelint를 이용해 css 정리하기 (feat. Styled-Components)

(이 글은 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

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의 장점에 푹 빠지실 거라고 생각합니다.

 

만약 이외에도 더 좋은 방법을 알고 있으신 분이 있다면 공유해주시면 감사하겠습니다 :)