[scss] styleLint 설치

1. npm 설치

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

• stylelint : stylint 사용을 위해 설치해야할 기본 패키지
• stylelint-config-standard  : stylint에서 표준으로 제공하는 규칙에 대한 패키지
• stylelint-config-prettier  prettier : prettier와 충돌되는 stylelint규칙을 비활성화하는 패키지 (prettier를 사용 중이니 설치해줄 것)

2. .stylelintrc.json 파일 생성

root 위치에 .stylelintrc.json를 생성하고 설치한 패키지를 extends에 추가한다.

{
  "extends": ["stylelint-config-standard-scss", "stylelint-config-prettier-scss"],
  "overrides": [
    {
      "files": ["**/*.scss"],
      "customSyntax": "postcss-scss"
    }
  ],
  "rules": {
    "scss/at-rule-no-unknown": true,
    "scss/at-import-no-partial-leading-underscore": true,
    "scss/comment-no-empty": true,
    "no-empty-source": null //비어있는 scss 경고창제외
  }
}

3. 모든 scss 파일에서 Stylelint를 실행

npx stylelint "**/*.scss"

package.json에 script 명령어를 추가하면 npm lint:scss로 간단히 실행할 수 있다.

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

💡 -quiet 옵션

"lint:scss": "stylelint --ignore-path .gitignore \"./**/*.scss\" --quiet" 로

• 기본적으로 Stylelint는 모든 SCSS 파일을 검사하고, 오류가 있든 없든 결과를 출력한다.
• -quiet 옵션을 추가하면 오류가 있는 파일만 출력됨. (→ 현재 오류가 있는 파일만 출력되도록 수정함)

참고 : https://mong-blog.tistory.com/entry/Stylelint-%EC%84%A4%EC%A0%95%ED%95%98%EB%8A%94-%EB%B2%95feat-node-vue

---

💡 Prettier와 Stylelint를 함께 사용할 때는 prettier --write를 먼저 실행하는 것이 중요하다.
📌 package.json에서 Prettier를 먼저 실행하도록 스크립트 추가

{
  "scripts": {
    "format:scss": "prettier --write \"./**/*.scss\" && npm run lint:scss",
    "lint:scss": "stylelint --ignore-path .gitignore \"./**/*.scss\" --quiet --fix"
  }
}

npm run format:scss 실행 시 Prettier가 먼저 코드 포맷을 적용!
이후 Stylelint가 남은 스타일 오류만 검사하도록 동작.