Stylelint CSS-in-JS, vscode 환경 적용

[hyesungoh]

1. 아래 패키지 설치

yarn add -D stylelint stylelint-config-standard stylelint-config-prettier postcss postcss-syntax @stylelint/postcss-css-in-js

2. .stylelintrc.json 파일 작성

{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-prettier",
    "stylelint-config-clean-order" # 순서 정렬을 위해 추가, 이용 시 설치 필요
  ],
  "overrides": [
    {
      "files": [
        "**/*.tsx"
      ],
      "customSyntax": "@stylelint/postcss-css-in-js"
    }
  ]
}

3. vscode의 stylelint extension 설치

https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint

4. vscode setting

.vscode/settings.json

{
  "stylelint.validate": ["css", "scss", "typescript", "typescriptreact"], # javascript, javascriptreact 등 필요에 따라 추가
  "stylelint.configFile": ".stylelintrc.json",
  "stylelint.packageManager": "yarn",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true # 저장 시 auto fix
  },
}

[hyesungoh]

https://github.com/stylelint/stylelint/blob/main/docs/migration-guide/to-15.md#removed-processors-configuration-property

@stylelint/postcss-css-in-js가 deprecated

[hyesungoh]

https://github.com/stylelint/stylelint/blob/main/docs/migration-guide/to-15.md#deprecated-stylistic-rules

15버전 위로 stylelint-config-prettier도 필요 없어짐