Wallel

스타일린트는 설정만 잘해두면 무지성으로 스타일을 입력해도 여러모로 알아서 맞춰줘서 매우 편리하다.
여러 명이 하나의 프로젝트를 작업할 때 매우 좋다.

추가하자.

*아래 환경은 주로 React + TypeScript + SCSS or Styled-Component 조합 때 사용한다.

Install

npm install --save-dev stylelint stylelint-config-standard stylelint-scss stylelint-order stylelint-config-idiomatic-order stylelint-config-recommended-scss postcss postcss-syntax @stylelint/postcss-css-in-js

.stylelintrc.json

프로젝트 루트에 스타일린트 설정 파일(.stylelintrc.json)을 생성하고 아래 코드를 넣자.

{
  "$schema": "http://json.schemastore.org/stylelintrc.json",
  "extends": ["stylelint-config-idiomatic-order", "stylelint-config-recommended-scss"],
  "overrides": [
    {
      "files": ["**/*.ts", "**/*.tsx", "**/*.jsx"],
      "customSyntax": "@stylelint/postcss-css-in-js"
    }
  ],
  "plugins": ["stylelint-scss"],
  "rules": {
    "no-descending-specificity": null,
    "no-empty-source": null,
    "scss/operator-no-unspaced": true,
    "color-hex-length": "short"
  },
  "ignoreFiles": ["**/dist/**/*.txt", "**/dist/**/*.css", "**/dist/**/*.html"],
}

상세한 스타일린트 설정이 궁금하다면 공식 홈페이지를 놀러가자. 🏃🏻

변경기록

1. 2025-08-20
   • ignoreFiles 추가
     dist 폴더 내 파일은 스타일 린트 예외처리
     path는 각 프로젝트에 맞게 변경 필요
   • "color-hex-length": "short" 기본 추가
2. 2025-05-30
   • ---save-dev 추가
3. 2024-12-16
   • 더이상 사용 되지 않는 옵션 제거
     "block-opening-brace-space-before": "always",
     "declaration-colon-space-after": "always-single-line",
     "declaration-colon-space-before": "never",
     "indentation": 2,
4. 2023-06-17
   • css-in-js를 위한 postcss, postcss-syntax, @stylelint/postcss-css-in-js 패키지 설치 명령어 추가
   • .stylelint.json 파일에 "stylelint-config-standard", 옵션 추가

css 규칙lintstylelint스타일린트코드 품질 향상