[project] Stylelint 설정 #12

eonseok-jeon · 2023-12-28T00:51:19Z

🔥 Related Issues

Resolved: [project] Stylelint 설정 #1

💜 작업 내용

Stylelint 초기 세팅
order 정리
자동 수정 기능
rules 추가

✅ PR Point

꼭 테스트 해주세요 🫵🏻 💪🏻

const Text = styled.p`
  font-size: 2rem;
  height: 100%;
  width: 100%;
  border: 1rem;
  border-radius: 2rem;
  &:hover {
  width: 1010px;
  }
`

App.tsx에 위와 같이 작성을 하면

이런 에러가 떠야 합니다. (error lens extension 설치 했을 때)
error lens 설치 하지 않았다면 terminal에

yarn run stylelint

입력했을 때,

이런 식으로 오류들이 떠야 합니다.

✅ CheckList

에러 메세지가 잘 뜨는지
ctrl + s 눌렀을 시 단위와 관련된 에러 제외하고 수정이 자동적으로 진행 되는지

ctrl + s 혹은 yarn run stylelint 했을 시 위와 같은 화면이 되어야 합니다.
혹여나 ctrl + s 했을 때 자동 수정이 안 되는 사람은
맥북 기준 cmd + shift + p 누르고 Preferences: Open User Settings(JSON) 파일에 들어가신 뒤,

{
...

  // stylelint를 위한 코드 추가
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": "explicit",
    "source.fixAll.eslint": "explicit"
  },
  "stylelint.enable": true,
  "stylelint.config": null,
  "stylelint.packageManager": "yarn",
}

위의 코드가 있는지 없는지 확인해주세요
없으면 추가해주세요 :)

rem -> px로 변경 시 에러가 사라지는지

📚 Reference

참고자료

related to: #1

Jun-min2 · 2023-12-28T13:44:36Z

고생하셨어용! 아침부터 보고 있는데 실시간으로 pr 올라가는거보고 잠을 안잔게 아닌가 하는 의구심이 들정도로 열심히 해가지구 덩달아 더 열심히 하게 되는거 같아용! 오늘 바다 재밌게 놀고 오시고 또 열심히 해보자구용!

Jun-min2 · 2023-12-28T13:52:48Z

package.json

+    "stylelint": "^16.1.0",
+    "stylelint-config-prettier": "^9.0.5",


여기서 저는 혹시 yarn add --dev stylelint를 했을때
warning " > stylelint-config-prettier@9.0.5" has incorrect peer dependency "stylelint@>= 11.x < 15".
이런 문구가 뜨는데, 처음에 진행 하실때 괜찮으셨을까요?

stylelint-config-prettier가 stylelint 15미만 버전까지만 의존성 충돌이 안나는거 같은데.. 혹시 제가 잘못 찾아봤을수도 있고, 찾아보셨는데 괜찮아서 놔두셨을수도 있어서 알고 계시다면 설명해주시면 감사하겠습니다!

해결 방법으로는 package.json에서 extends에 stylelint-config-prettier를 지우라고 합니다!

전) stylelint-config-prettier 안지웠을때

후)

제가 구글링해서 위의 얘기를 하게 된 출처입니다!

찾아보니 stylelint 15이상부터는
충돌되는 스타일 속성이 모두 제거 되어,
stylelint-config-prettier가 더 이상 필요 없다고 하는것 같네요! 의존성 제거해줘도 좋을것 같습니다

https://www.npmjs.com/package/stylelint-config-prettier

헉스 몰랐네용~ 감사해요 ◡̈

SooY2

테스트 완료!! 잘 됩니당 수고해따 !!!
++ pr point 작성도 너무 잘하는 언짱,,

SooY2 · 2023-12-28T18:14:42Z

.stylelintrc.json

@@ -0,0 +1,99 @@
+{


json확장자 붙여준거는 json형식이라는걸 명시해주기 위해선가요?! 단순궁금!!

.stylelintrc file in JSON or YAML format We recommend adding an extension (e.g., .json) to help your editor provide syntax checking and highlighting

공식문서에 json을 붙이는 것을 추천한다 하더라고용?

참고자료

Yeonseo-Jo

확인했습니다!
너무나 야무지게 잘 적용시켰네용 수고 많았습니당🔥

요 브랜치 feat/init 아니고 main에서 분기한거죠 ?!
그래서 수연이 커밋이랑 섞인것 같은데 (나으 실수. . . 진작 만들었어야 했는데 쩝)
수연이 emotion 세팅 브랜치 먼저 머지 되면 머지 부탁드립니당
앞으로는 브랜치 분기 더 신경쓰겠습니다!

Yeonseo-Jo · 2023-12-28T17:43:15Z

.stylelintrc.json

@@ -0,0 +1,99 @@
+{
+  "extends": [
+    "stylelint-config-standard"


저는 기본적으로 속성 순서를 정해주는 stylelint-config-clean-order만 사용해봤는데 standard를 사용하면 그룹을 지정할수 있어 좋은것 같네용 굿굿

Yeonseo-Jo · 2023-12-28T17:43:31Z

.stylelintrc.json

+      "/^border/": [
+        "px"


디테일 장인이십니다

Yeonseo-Jo · 2023-12-28T18:24:40Z

src/App.tsx

-    </>
+    <ThemeProvider theme={theme}>
+      <GlobalStyles />
+      <Text>Go MoonShot!</Text>


테스트 완료!
추후 허스키 등 적용하면 feat/init 브랜치에서 오류 날수도 있을것 같아서
리뷰 후 머지 시킬 때 테스트 코드는 빼고 머지시켜도 좋을것 같습니다 :)

넵! 빼고 머지할게요~

Yeonseo-Jo · 2023-12-28T18:28:10Z

package.json

+    "stylelint": "^16.1.0",
+    "stylelint-config-prettier": "^9.0.5",


찾아보니 stylelint 15이상부터는
충돌되는 스타일 속성이 모두 제거 되어,
stylelint-config-prettier가 더 이상 필요 없다고 하는것 같네요! 의존성 제거해줘도 좋을것 같습니다

https://www.npmjs.com/package/stylelint-config-prettier

related to: #1

SooY2 and others added 11 commits December 27, 2023 14:16

init: emotion 초기세팅

4ed8b48

pull init/#4/meteData

76e2d13

Merge branch 'feat/init' into init/#5/emotion

0eb303d

init: theme추가

c17480c

init: theme interface 정의

43f8162

fix: swap파일 삭제

9ae4ab6

merge: feat/init merge

3e8a935

init: stylelint 설정

4295591

related to: #1

chore: 단위 제한 설정 추가

300c4a6

related to: #1

chore: script 추가

e0ae2fa

related to: #1

fix: stylelint error 수정

dabe3ae

related to: #1

eonseok-jeon added the ⚙ Setting 개발 환경 세팅 label Dec 28, 2023

eonseok-jeon added this to the Init milestone Dec 28, 2023

eonseok-jeon requested review from Yeonseo-Jo, SooY2 and Jun-min2 December 28, 2023 00:51

eonseok-jeon self-assigned this Dec 28, 2023

Jun-min2 approved these changes Dec 28, 2023

View reviewed changes

SooY2 approved these changes Dec 28, 2023

View reviewed changes

Yeonseo-Jo reviewed Dec 28, 2023

View reviewed changes

Yeonseo-Jo self-requested a review December 28, 2023 18:29

Yeonseo-Jo approved these changes Dec 28, 2023

View reviewed changes

eonseok-jeon changed the title ~~[Project] Stylelint 설정~~ [project] Stylelint 설정 Dec 30, 2023

eonseok-jeon added 4 commits December 31, 2023 03:51

chore: 안쓰는 의존성 제거

cca5509

related to: #1

chore: 테스트 코드 제거

74d7e87

related to: #1

Merge branch 'feat/init' into init/#1/stylelint

5b02ea1

related to: #1

fix: import 에러 해결

70f74de

related to: #1

eonseok-jeon merged commit 188d111 into feat/init Dec 30, 2023

eonseok-jeon deleted the init/#1/stylelint branch December 30, 2023 19:28

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[project] Stylelint 설정 #12

[project] Stylelint 설정 #12

eonseok-jeon commented Dec 28, 2023 •

edited

Jun-min2 commented Dec 28, 2023

Jun-min2 Dec 28, 2023

Yeonseo-Jo Dec 28, 2023

eonseok-jeon Dec 30, 2023

SooY2 left a comment •

edited

SooY2 Dec 28, 2023

eonseok-jeon Dec 30, 2023 •

edited

Yeonseo-Jo left a comment

Yeonseo-Jo Dec 28, 2023

Yeonseo-Jo Dec 28, 2023

Yeonseo-Jo Dec 28, 2023

eonseok-jeon Dec 30, 2023

Yeonseo-Jo Dec 28, 2023

		"stylelint": "^16.1.0",
		"stylelint-config-prettier": "^9.0.5",

[project] Stylelint 설정 #12

[project] Stylelint 설정 #12

Conversation

eonseok-jeon commented Dec 28, 2023 • edited

🔥 Related Issues

💜 작업 내용

✅ PR Point

✅ CheckList

📚 Reference

Jun-min2 commented Dec 28, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SooY2 left a comment • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

eonseok-jeon Dec 30, 2023 • edited

Choose a reason for hiding this comment

Yeonseo-Jo left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

eonseok-jeon commented Dec 28, 2023 •

edited

SooY2 left a comment •

edited

eonseok-jeon Dec 30, 2023 •

edited