[FE] refactor: stylelint 도입

[hae-on]

Issue

• close [FE] stylelint 도입  #573

✨ 구현한 기능

stylelint를 도입하였습니다.
현재 우테코 크루들이 가장 많이 쓰고, 다운로드 수가 가장 많은 stylelint 정렬 라이브러리는 transform이 상단으로 이동합니다.
이게 잘못된거라고 생각했는데 원래 이 라이브러리에서는 위로 올라가는게 맞았어요,,,

그게 싫어서 다른 stylelint 라이브러리들을 다 확인해봤습니다.
그 중 1년안에 업데이트를 한 라이브러리로 선택했습니다.
stylelint-semantic-groups

물론 이것도 원래 저희 순서랑 완벽하게 맞지는 않는데 막 거슬리는게 없어서 선택했습니다.
그리고 styled-components에서 사용하려면 이 라이브러리는 postcss를 설치해야 하더라구요?
(설치 안하면 얘는 아예 오류 뜸)
그래서 설치했습니다!

또, 이게 10개월전에 업데이트 된 라이브러리라 현재 공식적인 지원이 우리 프로젝트 typeScript 버전보다 뒤쳐져 있어요.

아직 문제는 없긴한데 나중에 바꿔야할 수도 있을 거 같네염

만약 stylelint 확장 프로그램을 깔지 않으신분들은 설치해주시고
settings.json에서 아래 내용을 추가해주시면 됩니다.

  "editor.codeActionsOnSave": {
  // 아마 "source.fixAll.eslint": true 얘가 있어서 그 밑에 추가하면 될 듯?
    "source.fixAll.stylelint": true,
  },

  "stylelint.enable": true,
  "stylelint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],

현재 script 실행해서 stylelint 적용돼 바뀐 파일도 함께 올립니다.
확인 부탁드려용

📢 논의하고 싶은 내용

x

🎸 기타

x

⏰ 일정

• 추정 시간 : 1시간
• 걸린 시간 : 체감상 12시간

[github-actions]

Unit Test Results

2 tests   2 ✔️  5s ⏱️
1 suites  0 💤
1 files    0 ❌

Results for commit 1dbd61c.

[Leejin-Yang]

최선의 라이브러리를 찾아서 이제 컨벤션 고민없이 코드를 작성할 수 있겠네요 👍
해온 수고했어요! 그리고 찾아본 다른 라이브러리들도 공유 부탁드려요 😊

[xodms0309]

수고했어요 해옹!

[hae-on]

제가 본 라이브러리가 3개인데 하나는 타고타고 들어간거라 못 찾겠어요 ㅠㅠㅠ
크루들이 가장 많이 쓴 라이브러리는 이것입니다!
stylelint-config-clean-order

이름이 바뀐건지 검색하면
https://www.npmjs.com/package/stylelint-config-recess-order
이 사이트로 뜨네요!