[React] Stylelint 적용하기

💡 스타일린트(stylelint)를 적용하는 김에 정리도 한 번에 해보자!

목표

• Stylelint가 무엇인지 설명할 수 있다.
• Stylelint를 적용해보고 설정값에 대해 설명할 수 있다.
• Stylelint를 적용할 때, 쉽게 따라할 수 있는 가이드를 제공할 수 있다.

 

보통 코딩 컨벤션으로써 ESLint를 대부분 사용하고 있을 것이다.

스타일을 적용할 때, 항상 그 날의 마음가는 대로 작성하는 것을 최대한 피하고자 Stylelint를 도입해봤다.

 

Stylelint

stylelint는 스타일 작성에 코딩 컨벤션을 적용하도록 도와주는 강력한 도구라고 언급한다.

스타일 작성 시 오류를 방지하고 대중적인 네이밍룰을 따르도록 강제한다.

 

stylelint 스타터 가이드

`npm`을 사용한다는 가정하에 설치 방법을 순차적으로 작성한다.

 

1. 필요한 의존성 설치하기

npm install --save-dev stylelint stylelint-config-standard

 

2. `.stylelintrc` or `.stylelintrc.json` 설정 파일 생성하기

{
  "extends": "stylelint-config-standard"
}

 

3. Prettier와 연동하기

npm install --save-dev stylelint-config-prettier

{
  "extends": ["stylelint-config-standard", "stylelint-config-prettier"]
}

 

4. 실행하기

npx stylelint "**/*.css"

 

stylelint + styled-components

*.css만 인식하면 styled-components를 사용하는 리액트 프로젝트에서는 사실 활용도가 급감하게 된다. 다행히 고수들이 styled-components와 연동하는 것도 만들어두셨다. 우리는 이를 적극 활용하자.

 

• 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

 

2. `.stylelintrc` or `.stylelintrc.json` 설정 변경하기

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

 

 

3. package.json 설정하기

"scripts": {
    //...
    "lint:css": "stylelint './src/**/*.{js,jsx,ts,tsx}'",
    //...
}

 

4. 실행하기

npm run lint:css

 

Interpolation tagging(보간 태킹)

스타일린트와 스타일 컴포넌트 조합은 완벽하진 않다. (e.g. CssSyntaxError)

const something = 'background'

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

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

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

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

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

// same code

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

 

출처

• Stylelint Docs, Stylelint 공식 페이지
• Getting started Stylelint, Stylelint Get-started
• styled-components: Tooling, Stylelint Tooling
• stylelint-processor-styled-components: Lint your styled components with stylelint!, Maximilian Stoiber, © 2017

 

Last Updated. 2022. 08. 25.