Wallel

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

추가하자.

Install

npm install stylelint stylelint-config-standard stylelint-scss stylelint-order stylelint-config-idiomatic-order stylelint-config-recommended-scss

.stylelintrc.json

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

{
  "$schema": "http://json.schemastore.org/stylelintrc.json",
  "extends": [
    "stylelint-config-idiomatic-order",
    "stylelint-config-recommended-scss"
  ],
  "overrides": [
    {
      "files": ["**/*.jsx"],
      "customSyntax": "@stylelint/postcss-css-in-js"
    }
  ],
  "plugins": ["stylelint-scss"],
  "rules": {
    "block-opening-brace-space-before": "always",
    "declaration-colon-space-after": "always-single-line",
    "declaration-colon-space-before": "never",
    "indentation": 2,
    "no-descending-specificity": null,
    "no-empty-source": null,
    "scss/operator-no-unspaced": true
  }
}

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

변경기록

1. 2023-06-17
   • css-in-js를 위한 postcss, postcss-syntax, @stylelint/postcss-css-in-js 패키지 설치 명령어 추가
   • .stylelint.json 파일에 “stylelint-config-standard”, 옵션 추가