[React] VSCode Prettier 적용 안됨 5가지 해결 방법

 

 

 

강의에서 말한것 그대로 Prettier를 설치해서 사용하고 있었는데,

어느 순간부터 Prettier를 쓰려고 하면 저렇게 빨간 표시가 뜨면서 적용이 안됐다

 

 

그래서 오늘은 나와 같은 문제를 겪고 계신 분들을 위해

인터넷에 있는 여러가지 방법을 이것저것 다 해보면서 찾아낸

해결방법을 공유하려고 한다

 

 

방법1 

간단하다. 재설치 후 재부팅

Prettier를 삭제 후 재설치하고

Ctrl + Shift + P -> Reload

 

 

 

하지만 이렇게 간단히 해결될 문제였으면 구글링을 할 필요가 없지....!

 

 

방법2

모두가 다 해보라고 하는 설정 확인하는 것

 

[파일] - [기본 설정] - [설정] or Ctrl + , 으로 설정에 들어가서

1. Format On Save가 체크되어있어야 하며(저장할 때 Prettier 적용하는 역할)

2. Default Formatter에서 설정값이 null이 아닌 "Prettier-Code Formatter"로 설정되어있어야 한다

 

 

 

하지만 이렇게 간단히 해결됐으면 블로그 글도 안썼을 것..!

 

 

 

방법3

prettier 설정 파일 생성하기

 

최상위 디렉토리에 .prettierrc.json 파일을 만들고 설정 값을 넣기

{
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 80
}

 

 

 

그 다음 포매팅 명령어 입력

npx prettier --write ./src/App.js

 

이 명령어를 입력하면 .prettierrc.json  파일에 적어놓은 규칙에 맞게 경로에 있는 파일을 포매팅해준다

나는 리액트였기 때문에 App.jsx로 시행했다

 

 

조금 기대했는데 역시 안됨..!

 

 

 

 

방법4

VS Code와 Prettier 연동하기

 

 

참고한 블로그

 

위 블로그를 참고해서 찾아보고 있었는데, 이 방법으로 해결했다하셔서 기대했다

 

 

Ctrl + Shift + P 를 누른 뒤 settings.json (기본 설정 : 설정 열기(JSON)) 에 들어간 뒤

파일 제일 밑 부분에 아래 코드를 입력해주면 된다

"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"
},

 

 

한참 typescript 공부를 했어서 그런지 나도 기본 설정이 typescript로 되어있었다

그래서 누락되어있었던 [javascriptreact] 부분을 추가!

 

 

하지만 이걸로도 작동하지 않았다.....!

 

 

 

방법5

 

결국 지선생님을 다시 찾아갔다

사실 이전에도 계속 지선생님을 괴롭혔지만 답이 안나와서 구글링을 했었던건데,

이번엔 지선생님께 답을 얻을 수 있었다

아무래도 구글링하면서 prettier 설정을 이것저것 보다보니 지선생님 말의 이해도도 상승한 듯?!

 

 

prettier 설치 확인

npm list --depth=0

 

bash에 위 코드 입력해서 prettier 설치를 먼저 확인한다

나는 Extension으로 설치했고, 위의 설정들에서도 모두 prettier가 맞게 설치되어있을거라 생각했는데..!

설치가 안되어있었다

 

!? 왜지!?

 

 

 

 

그래서 설치

npm install prettier --save-dev

 

 

 

 

그 다음 설치 확인

npx prettier --write ./src/App.js

 

나는 리액트라서 "npx prettier --write ./src/App.jsx" 로 확인했다

 

 

 

 

VSCode 설정 확인

위에서 들어갔던 Ctrl + Shift+P -> settings.json 파일에 아래 코드가 있어야한다

 

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "prettier.prettierPath": "./node_modules/prettier"
}

 

 

나는 잘 있네 하고 넘어갔는데... 자세히보니

  "eslint.validate": ["javascript", "typescript", "typescriptreact", "json"],
  "typescript.tsdk": ".yarn/sdks/typescript/lib",
  "eslint.nodePath": ".yarn/sdks",
  "prettier.prettierPath": ".yarn/sdks/prettier",

 

 

코드가 모두 yarn으로 되어있었다..!!!

 

 

 

 

npm에 맞게 수정

  "eslint.validate": ["javascript", "typescript", "typescriptreact", "json"],
  "typescript.tsdk": "./node_modules/typescript/lib",
  "eslint.nodePath": "./node_modules",
  "prettier.prettierPath": "./node_modules/prettier",
  "prettier.printWidth": 120,
  "python.createEnvironment.trigger": "off"

 

위와 같이 모두 npm에 맞춰 수정하니

문제가 해결됐다!

 

 

 

참고

  "eslint.validate": ["javascript", "typescript", "typescriptreact", "json"], // ESLint가 유효성을 검사할 파일 확장자 목록
  "typescript.tsdk": "./node_modules/typescript/lib", // Yarn 경로를 npm 경로로 수정
  "eslint.nodePath": "./node_modules", // ESLint가 node_modules 폴더를 참조
  "prettier.prettierPath": "./node_modules/prettier", // Prettier가 node_modules 폴더를 참조
  "prettier.printWidth": 120, // Prettier 포맷팅 기준 폭 설정
  "python.createEnvironment.trigger": "off" // Python 관련 설정 (유지)

 

이건 지선생님이 써준 친절한 설명

각각 위와 같은 기능을 하는 코드들이다

 

 

결론

인터넷에 있는 수많은 방법들을 해도 안될 땐,

설정이 yarn에 맞춰있는지, npm에 맞춰있는지 확인해보면 해결할 수 있을지도!?

 

 

현재 진행하고 있는 프로젝트는 클론할때마다 재설치하지 않아도 되는 yarn으로 진행하고 있었고,

리액트 공부는 강의 따라서 npm으로 하고 있었는데

그 과정에서 발생한 문제인 것 같다

 

 

아무튼 해결되서 다행!

해결하는데 꽤나 오래 시간을 쏟았다.....

다른 분들도 잘 해결되시기를 :)