[GGFE-189] stylelint scss rule 추가

[PHJoon]

📌 개요

• stylelint scss rule 추가

💻 작업사항

• stylelint, stylelint-order 패키지를 설치하여 scss property 순서를 설정하였습니다.
• order 순서는 .stylelintrc.json 파일에서 확인할 수 있습니다.(양이 너무 많아서 여기에 올릴 수가 없습니다)
• 저희는 stylelint-order만 사용할 것이기 때문에 stylelint의 기본 룰 중 저희와 안맞는 많은 rule들은 최대한 null 처리 했습니다.

혹시라도 사용하시다가 order/properties-order(순서 에러), 
shorthand-property-no-redundant-values(축약형으로 쓸 수 있는 경우) 등 
저희가 적용할 만한 rule 이외의 에러가 발생한 경우, 
해당 에러가 필요없는 경우에는 .stylelintrc.json 파일에 null로 추가부탁드립니다.

• eslint와 달리 커밋 시에 적용되는 것이 아니기 때문에 직접 실행해서 사용하셔야 합니다.
• 에러만 확인하려는 경우
  npx stylelint "styles/**/*.scss"
• 수정까지 자동으로 하려는 경우
  npx stylelint "styles/**/*.scss" --fix
• 참고자료
• stylelint docs
• stylelint order

✅ 변경로직

[yoouyeon]

와 규칙을 일일이 다 설정해줘야 하는 것이었네요...??!
규칙 잘 적용되는 것 확인했습니다!!
설정해야 할 내용이 많은데 수고 정말 많으셨어요!! 😆👍

[yoouyeon]

eslint처럼 커밋 시에 자동으로 실행시키려면 이렇게 lint-staged 항목에 추가해두면

"lint-staged": {
    "*.{ts,tsx,scss,md}": "prettier --write",
    "*.{ts,tsx}": "eslint --cache --fix",
    "styles/**/*.{scss}": "stylelint --fix"
  }

husky pre-commit hook에서 lint-staged 실행시키면서 같이 stylelint까지 실행시키게 됩니다!!

[PHJoon]

아 저렇게 해도 안되길래 직접해야되는줄 알았는데 제가 수정한 scss 파일이 없어서 저렇게 해도 실행이 안됐던거네요.. 😭 감사합니다!

[PHJoon]

lint-staged에 추가해놨습니다!

[hyobb109]

와 설정할 것이 엄청 많았네요..!! 적용 잘 되고 lint-staged에 추가된 것도 확인했습니다! 정말 고생 많으셨어요!👍👍