목차

• 개요
• CSS를 위한 Stylelint
• SCSS를 위한 Stylelint
• CSS-in-JS를 위한 Stylelint
• stylelint-order
• 완료

개요

웹 개발을 하면, 웹의 스타일을 관리하기 위해 CSS(Cascading Style Sheets)를 사용하게 됩니다. 이번 블로그 포스트에서는 Stylelint를 사용하여 CSS, SCSS 와 CSS-in-JS의 코드 스타일을 검사해 보도록 하겠습니다.

• Stylelint

CSS를 위한 Stylelint

Stylelint을 사용하여 CSS 파일안의 스타일 내용을 검사할 수 있습니다. CSS 파일안의 스타일을 검사하기 위해 다음 명령어를 실행하여 Stylelint를 설치합니다.

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

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

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

Stylelint의 설치와 설정이 끝났다면, 다음 명령어를 실행하여 CSS 파일의 내용을 검사할 수 있습니다.

npx stylelint "**/*.css"

또는 다음과 같이 package.json 파일을 수정하여 Stylelint를 실행하는 명령어를 만들 수 있습니다.

{
  ...
  "scripts": {
    ...
    "lint:css": "stylelint --ignore-path .gitignore '**/*.css'"
  },
  ...
}

이렇게 만든 lint:css 명령어는 다음과 같이 실행할 수 있습니다.

npm run lint:css

SCSS를 위한 Stylelint

Stylelint을 사용하여 SCSS 파일안의 스타일 내용을 검사할 수 있습니다. SCSS 파일안의 스타일을 검사하기 위해 다음 명령어를 실행하여 Stylelint를 설치합니다.

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

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

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

Stylelint의 설치와 설정이 끝났다면, 다음 명령어를 실행하여 SCSS 파일의 내용을 검사할 수 있습니다.

npx stylelint "**/*.scss"

또는 다음과 같이 package.json 파일을 수정하여 Stylelint를 실행하는 명령어를 만들 수 있습니다.

{
  ...
  "scripts": {
    ...
    "lint:css": "stylelint --ignore-path .gitignore '**/*.scss'"
  },
  ...
}

이렇게 만든 lint:css 명령어는 다음과 같이 실행할 수 있습니다.

npm run lint:css

CSS-in-JS를 위한 Stylelint

Stylelint을 사용하여 JS(JavaScript) 파일안의 스타일 내용을 검사할 수 있습니다. JS 파일안의 스타일을 검사하기 위해 다음 명령어를 실행하여 Stylelint를 설치합니다.

npm install --save-dev stylelint stylelint-config-standard postcss-styled-syntax

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

{
  "extends": "stylelint-config-standard",
  "customSyntax": "postcss-styled-syntax",
}

Stylelint의 설치와 설정이 끝났다면, 다음 명령어를 실행하여 JS 파일의 내용을 검사할 수 있습니다.

npx stylelint "**/*.(css|tsx)"

또는 다음과 같이 package.json 파일을 수정하여 Stylelint를 실행하는 명령어를 만들 수 있습니다.

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

이렇게 만든 lint:css 명령어는 다음과 같이 실행할 수 있습니다.

npm run lint:css

stylelint-order

CSS를 작성할 때, 스타일의 속성(Property)의 순서는 작성할 때마다 다른 경우가 많습니다. 이때, stylelint-order를 사용하면 CSS의 속성을 알파벳순으로 정렬할 수 있습니다.

• stylelint-order: https://github.com/hudochenkov/stylelint-order

stylelint-order를 사용하기 위해서는 다음 명령어를 사용하여 stylelint-order를 설치합니다.

npm install stylelint-order --save-dev

그런 다음 .stylelintrc.json 파일을 열고 다음과 같이 수정합니다.

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

이제 다음 명령어를 실행하면 Stylelint가 스타일의 속성이 알파벳순이 아닌 경우 에러를 발생시키는 것을 알 수 있습니다.

npm run lint:css

완료

이것으로 Stylelint를 사용하여 CSS, SCSS 파일의 스타일 내용을 검사하는 방법에 대해서 알아보았습니다. 또한, styled-components, Emotion과 같은 CSS-in-JS 형식의 스타일도 검사하는 방법에 대해서 살펴보았습니다.

Github Sponsor Buy me a coffee

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

앱 홍보

지금 보고 계신 블로그를 작성하는 Deku가 개발한 앱을 한번 사용해보세요.
Deku가 개발한 앱은 Flutter로 개발되었습니다.

관심있으신 분들은 앱을 다운로드하여 사용해 주시면 정말 감사하겠습니다.

어린이용 단어 공부 앱

블라부

세상의 모든 정보를 모아보다

씨로그

JLPT 일본어 단어앱

일단 공부

토익 영어 단어앱

토익 단어앱

중고등 영어 단어앱

중고등 영단어앱

HSK 중국어 단어앱

중국어 단어앱

독일어 단어앱

독일어 단어장

러시아어 단어앱

러시아어 단어장

아랍어 단어앱

아랍어 단어장

인도네시아 단어앱

인도네시아 단어장

프랑스어 단어앱

프랑스어 단어장

스페인어 단어앱

스페인어 단어장

책 홍보

블로그를 운영하면서 좋은 기회가 생겨 책을 출판하게 되었습니다.

아래 링크를 통해 제가 쓴 책을 구매하실 수 있습니다.
많은 분들에게 도움이 되면 좋겠네요.

• 쿠팡: 구매하기
• yes24: 구매하기
• 교보문고: 구매하기
• 알라딘: 구매하기

• 쿠팡: 구매하기
• yes24: 구매하기
• 교보문고: 구매하기
• 알라딘: 구매하기

• 쿠팡: 구매하기
• yes24: 구매하기
• 교보문고: 구매하기
• 알라딘: 구매하기