[Vite] TypeScript 기반 React 프로젝트에 Stylelin(CSS-in-JS) 추가하기

개요

이번 블로그 포스트에서는 Vite를 사용하여 생성한 TypeScript 기반 React 프로젝트에 CSS-in-JS 환경에서 스타일(CSS)을 검사하기 위해 Stylelint를 추가하는 방법에 대해서 알아보도록 하겠습니다.

Stylelint: https://stylelint.io/

블로그 시리즈

이 블로그 포스트는 시리즈로 제작되었습니다. 다음은 Vite의 시리즈 리스트입니다.

[Vite] TypeScript 기반 React 프로젝트 시작하기
[Vite] TypeScript 기반 React 프로젝트에 테스트 환경 구성하기
[Vite] TypeScript 기반 React 프로젝트에 Prettier 추가하기
[Vite] TypeScript 기반 React 프로젝트에 Stylelin(CSS-in-JS) 추가하기

Stylelint 설치

다음 명령어를 실행하여 Stylelint를 사용하기 위해 필요한 라이브러리를 설치합니다.

npm i -D stylelint stylelint-config-standard postcss-styled-syntax stylelint-order
# yarn add -D stylelint stylelint-config-standard postcss-styled-syntax stylelint-order

stylelint: stylelint를 설치합니다.
stylelint-config-standard: Stylelint에서 제공하는 표준 설정입니다.
postcss-styled-syntax: CSS-in-JS 환경에서 스타일(CSS)를 검사하기 위한 라이브러리입니다.
stylelint-order: 스타일(CSS) 속성의 순서를 검사하기 위한 라이브러리입니다.

Stylelint 설정

Stylelint를 사용하기 위해서는 Stylelint를 설정할 필요가 있습니다. Stylelint를 설정하기 위해 .stylelintrc.json 파일을 생성하고 다음과 같이 수정합니다

{
  "extends": ["stylelint-config-standard"],
  "customSyntax": "postcss-styled-syntax",
  "plugins": ["stylelint-order"],
  "rules": {
    "order/properties-alphabetical-order": true
  }
}

Stylelint 실행

Stylelint를 사용하기 위해서는 Stylelint를 실행하는 명령어를 실행할 필요가 있습니다. 다음 명령어를 실행하면 Stylelint를 실행할 수 있습니다.

npx stylelint --ignore-path .gitignore '**/*.(css|tsx)

이 명령어는 Stylelint가 제공하는 기본 룰(Rule)을 지키고 있는지 검사합니다. 만약 해당 룰을 사용하여 자동으로 수정하고 싶다면 다음 명령어를 실행합니다.

npx stylelint --ignore-path .gitignore '**/*.(css|tsx)' --fix

이 명령어를 실행하면 Stylelint가 자동으로 수정이 가능한 문제를 수정하는 것을 확인할 수 있습니다.

이 명령어들을 간단하게 사용하기 위해 package.json 파일을 열고 다음과 같이 수정합니다.

...
"scripts": {
  ...
  "lint:css": "stylelint --ignore-path .gitignore '**/*.(css|tsx)'",
  "lint:css:fix": "stylelint --ignore-path .gitignore '**/*.(css|tsx)' --fix"
},
...

이제 다음 명령어를 실행하여 Stylelint를 실행할 수 있습니다.

npm run lint:css
npm run lint:css:fix
# yarn lint:css
# yarn lint:css:fix

완료

이것으로 Vite를 사용하여 생성한 TypeScript 기반 React 프로젝트에 CSS-in-JS 환경에서 스타일(CSS)을 검사하기 위해 Stylelint를 설정하고 실행하는 방법에 대해서 알아보았습니다. 여러분도 Stylelint로 스타일(CSS)을 검사하여 더 나은 코드를 작성해 보시기 바랍니다.

Github Sponsor

Buy me a coffee

제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다!