내가 해결한 오류들

prettier 적용 안되는 문제 이걸로 직빵 해결 가능

홍구리당당 2024. 6. 19. 11:17

prettier을 vscode 익스텐션으로 설치도 해보고 npm install도 해봤고 preferences 탭 가서 formattingOnSave 체크도 되어있고 프로젝트 폴더 안에 .prettierrc .eslintrc.json 도 있는데 저장해도 전혀 프리티어랑 린트 적용 안되시는 분들 계시죠?

나도 그래서... 한 5번쯤 똑같은 문제 겪으니 개빡치더라구여 그래서 나도 기억할겸 블로그에다 적어둠.

 

1. vs code키고

2. f1 누르면 vscode 창 위쪽 검색바가 켜짐. 거기다가 settings.json 을 검색하세요

3. 그럼 이렇게 한 3개 정도가 뜸. 한글버전 vscode라면 기본세팅, 작업공간세팅, 세팅 이렇게 3개 뜰 거임.

4. 여기서 우리는 맨 위에 있는 User Settings로 들어가야 함!!!!!! (한글vs 기준으론 기본세팅 작업공간세팅말고 그냥 세팅인가 하여간 기본세팅이랑 작업공간세팅만 거르셈)

5. 여기다가 님 eslint랑 prettier 설정하면 끝납니다. formmatingOnSave랑 editor.defaultFormatter도 여따가 세팅하세요. 그리고 저장하고 vscode 껐다키면 다 됩니다. 

저는 아래처럼 작성했습니다.

```settings.json

{
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
},
"[javascript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascriptreact]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
}

```

이해 안되실까봐 아예 사진으로도 붙여드림. 지금 파일 경로 보면 Code>User>settings.json이라 되어있죠?? 위에 4번에서 말했듯이 user setting으로 들어가야 한단 겁니다. 여기다가 설정하고 저장하셈

 

하... 개발자들 파이팅.