style

styled-components lint 적용하기

css, css in js, lint, styled, styled-components
Views: 302

시작하기

styled-components를 사용시에 작성오류를 찾거나 교정을 해줄수 있도록 lint를 추가해보도록 하겠습니다.

설치하기

  • styledlint (duh)
  • stylelint-processor-styled-components ( 스타일 추출 )
  • stylelint-config-styled-components ( 구성 요소와 충돌하는 stylelint 규칙을 사용하지 않도록 하는 stylelint-config-styled-구성 요소 )
  • 좋아하는 스타일린트 설치 ( 예를들면 stylelint-config-recommended 가 있습니다 )
1
npm install --save-dev styledlint stylelint-config-recommended stylelint-config-styled-components stylelint-processor-styled-components

적용하기

lint를 적용해보도록 하겠습니다.
루트에서 .stylelintrc파일을 생성해줍니다.

.stylelintrc
1
2
3
4
5
6
7
{
  "processors": ["stylelint-processor-styled-components"],
  "extends": [
    "stylelint-config-recommended",
    "stylelint-config-styled-components"
  ]
}

lint를 설정해주도록 합니다.

package.json
1
2
3
4
"scripts": {
    //...
    "lint:css": "stylelint './src/**/*.{js,jsx}'",
}

스크립트에 린트를 넣어주도록 합니다.
타입스크립트의 경우에는 {js|jsx} 이 부분을 {ts|tsx}로 변경해주면 됩니다.

1
npm run lint:css

로 실행을 하면 린트를 사용할 수 있습니다.
참고 --fix는 옵션을 사용할 수 없습니다.

Interpolation tagging (보간 태깅)

스타일린트는 가끔 실수를 할 수 있습니다. (e.g. CssSyntaxError)

1
2
3
4
5
const something = 'background'

const Button = styled.div`
  ${something}: papayawhip;
`

스타일에 보간법을 가지고 있을 때, 프로세서는 그것들이 무엇인지 알 수 없기에 추측을 합니다.
보간 태깅은 프로세서에게 보간법이 잘못 추측 될 경우 보간법을 알려줄 수 있게 해줍니다.
보간법을 태그에 기초한 구문적으로 정확한 값으로 대체할 수 있습다.

1
2
3
4
5
6
const something = 'background'

const Button = styled.div`
  // Tell the processor that "something" is a property
  ${/* sc-prop */ something}: papayawhip;
`

지원하는 태그

  • sc-block
  • sc-selector
  • sc-declaration
  • sc-property
  • sc-value
1
2
3
4
5
6
7
8
9
10
11
12
13
const Wrapper = styled.div`
  ${/* sc-selector */ Button} {
    color: red;
  }
`

// same code

const Wrapper = styled.div`
  ${/* sc-sel */ Button} {
    color: red;
  }
`

코드를 단순하게 조금 더 단순하게 작성할 수 있습니다.

자세한 사항은 공식문서를 참고해주세요

웹스톰에 플러그인 추가하기

플러그인 사이트
플러그인을 설치하려면 IDE 기본 설정 | 플러그인 혹은 Preferences | Plugins을 선택한 다음 styled-components 를 검색하여 가장 다운로드 횟수가 많은 플로그인을 설치해줍니다.
이후 IDE를 재시작하면 적용이 되어있습니다.

Share