Styled-Components에 스타일린트(stylelint) 적용하기
Post

Styled-Components에 스타일린트(stylelint) 적용하기

17/03/2022
Da-Bin Jeong
1

들어가기

  • sass는 lint를 사용해서 통일된 스타일 코드를 유지할 수 있는데, Styled-Components에서는 방법이 없나?
  • 라는 생각이 들어서 찾아보던 중 공식 사이트에서 ‘stylelint’를 발견!
  • 그래서 정리합니다. stylelint 적용하기

설치

  1. stylelint 설치하기

    1
2
3
4
5

    (npm install --save-dev \
stylelint \
stylelint-processor-styled-components \
stylelint-config-styled-components \
stylelint-config-recommended)

  2. .stylelintrc 파일을 루트에 추가하기

    1
2
3
4
5
6
7
8
9

     {
     "processors": [
         "stylelint-processor-styled-components"
     ],
     "extends": [
         "stylelint-config-recommended",
         "stylelint-config-styled-components"
     ]
 }

  3. package.json 파일에 stylelint 설정

    1
2
3
4
5

    {
    "scripts": {
        "lint:css":"stylelint './src/**/*.js'"
    }
}

실행

  • npm run lint:css 를 입력해서 실행할 수 있음
  • 또한 VSCode에서 stylelint 익스텐션을 설치하면 VSCode 자체에서 확인해 줌.

Reference

  • https://styled-components.com/docs/tooling#stylelint
  • https://flamingotiger.github.io/style/styled-components-lint/
TIL, Style-Components, Style
lint