stylelint 설정하기

stylelint 설치하기

먼저 stylelint를 설치한다.

yarn add stylelint --dev

css-in-js를 위해 postcss 설치

emotion.js를 추가적으로 사용하고 있기 때문에 추가적인 세팅이 필요하다.
emotion.js와 같은 css-in-js를 사용하기 위해서는 postcss postcss-syntax를 설치한다.

yarn add postcss postcss-syntax @stylelint/postcss-css-in-js --dev

stylelint 옵션 설정하기

.stylelintrc.json 작성하기

나는 stylelint를 편리하게 사용하기 위해 몇가지 확장을 설치하였다.

• stylelint-config-standard : stylelint standard 규칙 적용
• stylelint-config-prettier : prettier과 충돌하는 규칙들 제거
• stylelint-config-clean-order : 규칙에 따라 css 정렬

yarn add stylelint-config-standard stylelint-config-prettier stylelint-config-clean-order --dev

.stylelintrc.json

{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-prettier",
    "stylelint-config-clean-order"
  ],
  "overrides": [
    {
      "files": [
        "**/*.tsx"
      ],
      "customSyntax": "@stylelint/postcss-css-in-js"
    }
  ]
}

vscode 자동 수정 기능 활성화하기

vscode에서 stylelint를 간편하게 사용하기 위해서 setting 파일을 작성한다.

.vscode/settings.json

"stylelint.validate": ["css", "scss", "typescriptreact"],
"stylelint.configFile": ".stylelintrc.json",
"stylelint.packageManager": "yarn"

vscode 추천 확장 확인

stylelint 추천 확장 링크 ->

.vscode/extensions.json

{
  "recommendations": ["stylelint.vscode-stylelint"]
}