prettier expected ~ 에러 수정

0. 문제 발생 🍉

잘 먹히던 프리티어가 갑자기 에러가 떴다.

가장 흔한 에러 해결 방법은 "format on save" 나 "npm install 새로 하기" 지만, 하나도 먹히지 않았다.

그래서 에러를 띄우는 terminal 창을 자세히 보니, 아주 중요한 정보를 알게 되었다.

일부 file에선 prettier가 정상 작동하지만, 특정 파일에서만 prettier가 작동하지 않고 빨간 에러가 뜬다는 사실이었다. (코드 내부에선 전혀 에러 메세지가 뜨지 않고 terminal에서만 에러 메세지가 보였음.)

즉, 프리티어 자체의 문제보단 내 파일 특정 부분의 문제라는 것!!!!!

 

정상적으로 작동하는 파일에선 ctrl s 하면 프리티어가 잘 작동함.

특정 파일에선 ctrl s 하면 프리티어 에러 발생

---

1. 문제 원인 🍉

terminal의 에러 메세지는 다음과 같다,

["INFO" - 6:05:13 PM] Formatting file:////src/.tsx
["INFO" - 6:05:13 PM] Using config file at 'c:\\.prettierrc'
["INFO" - 6:05:13 PM] PrettierInstance:
{
  "modulePath": "c:\\node_modules\\prettier\\index.cjs",
  "importResolver": {},
  "callMethodResolvers": {},
  "currentCallMethodId": 67,
  "version": "3.2.4"
}
["INFO" - 6:05:13 PM] Using ignore file (if present) at c:\\.prettierignore
["INFO" - 6:05:13 PM] File Info:
{
  "ignored": false,
  "inferredParser": "typescript"
}
["INFO" - 6:05:13 PM] Detected local configuration (i.e. .prettierrc or .editorconfig), VS Code configuration will not be used
["INFO" - 6:05:13 PM] Prettier Options:
{
  "filepath": "c:\\UsersBestCorner.tsx",
  "parser": "typescript",
  "printWidth": 80,
  "tabWidth": 2,
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "quoteProps": "as-needed",
  "bracketSameLine": true,
  "plugins": [
    "c:\\prettier-plugin-classnames\\dist\\index.js"
  ]
}
["ERROR" - 6:05:14 PM] Error formatting document.
["ERROR" - 6:05:14 PM] '}' expected. (57:31)
  55 |                 <div
  56 |                   key={book.productId}
> 57 |                   className={`${ind === 2 || ind === 3 ? `relative top-40` : ''}tablet:static mobile:static`}>
     |                               ^
  58 |                   <TodayBestBook {...book} />
  59 |                 </div>
  60 |               );
  55 |             })
  56 |               }</>
> 57 |         :
     |          ^
  58 |            <div></div>
  59 |          }
  60 |         </div>
SyntaxError: '}' expected. (57:31)
  55 |                 <div
  56 |                   key={book.productId}
> 57 |                   className={`${ind === 2 || ind === 3 ? `relative top-40` : ''}tablet:static mobile:static`}>
     |                               ^
  58 |                   <TodayBestBook {...book} />
  59 |                 </div>
  60 |               );
  55 |             })
  56 |               }</>
> 57 |         :
     |          ^
  58 |            <div></div>
  59 |          }
  60 |         </div>
    at Kq (file:///c:/node_modules/prettier/plugins/typescript.mjs:23:498)
    at xz (file:///c:/node_modules/prettier/plugins/typescript.mjs:25:794)
    at Object.Cz [as parse] (file:///c:/node_modules/prettier/plugins/typescript.mjs:25:1194)
    at parse4 (file:///c://node_modules/prettier/index.mjs:22110:24)
    at async coreFormat (file:///c://node_modules/prettier/index.mjs:22600:7)
    at async formatWithCursor (file:///c:/node_modules/prettier/index.mjs:22802:14)
    at async Module.format2 (file:///c:/node_modules/prettier/index.mjs:24192:25)
    at async Object.parse (c:\\node_modules\prettier-plugin-classnames\dist\index.js:2:1858)
    at async parse4 (file:///c://node_modules/prettier/index.mjs:22110:11)
    at async coreFormat (file:///c://node_modules/prettier/index.mjs:22600:7)
["INFO" - 6:05:14 PM] Formatting completed in 157ms.

 

---

 

2. 풀이 과정 🍉

자꾸 { 토큰이 빠졌다는데 눈씻고 찾아봐도 빠진 부분은 없었다.

그리고 코드 상에서도 딱히 syntax 에러가 뜨지도 않았다.

그래서 파일 명을 더 자세히 읽어봤더니...

  "plugins": [
    "c:\\...\\node_modules\\prettier-plugin-classnames\\dist\\index.js"
  ]

plugins로 어쩌구저쩌구... node_modules 파일 안에 있는 dist 폴더 명이 적혀있는 것이다. 그런데 prettier plugin classnames 는 내가 써본 적 없는 플러그인이었다.

사실 이 프로젝트는 나 혼자 하는 사이드 프로젝트가 아니라 팀원들과 같이 하는 플젝이었다. 팀원분께서 깔아둔 플러그인인갑다.

실제로 .prettierrc 파일에 들어가보니, 언제부턴가 이렇게 plugins 에 classnames 플러그인이 추가되어있었다.

{
	"printWidth": 80,
	"tabWidth": 2,
	"singleQuote": true,
	"semi": true,
	"useTabs": false,
	"quoteProps": "as-needed",
	"bracketSameLine": true,
	"plugins": ["prettier-plugin-classnames"]
}

그래서 이 plugin을 뺐더니...!! 해결이 됐다! 아래처럼 수정하면 된다.

{
	"printWidth": 80,
	"tabWidth": 2,
	"singleQuote": true,
	"semi": true,
	"useTabs": false,
	"quoteProps": "as-needed",
	"bracketSameLine": true,
	"plugins": []
}

 

참고로 이걸 지워도 classNames 속성을 쓰는 파일에 딱히 에러가 생기진 않았다. 내가 이 플러그인을 써본 건 아니라서 자세히 알진 못하지만....

---

3. 결론 🍉

사실 고쳐질 거란 기대도 없이 이것저것 만져보다 고쳐진 오류였다. 이 오류가 왜 발생하는지, 왜 고쳐진 것인지는 좀 더 알아봐야겠다.

그리고 인터넷만 믿지 말고, terminal 창과 output 창을 보는 습관을 들여야겠다... 

(그리고 마지막으로!! classNames plugin 이게 당최 뭔지 따로 공부해봐야겠다.)