VS 코드에서 '모듈을로드하지 못했습니다.'라는 오류가 발생합니다. package.json에서 더 예쁘게로드하려고했습니다.

VS Code를 사용하고 프로젝트를 열면 오른쪽 하단에 다음 알림이 표시됩니다.

Failed to load module. If you have prettier or plugins referenced in package.json, ensure you have runnpm 설치Attempted to load prettier from package.json.

Source: Prettier Code Format (Extension)

npm install을 실행해도 문제가 해결되지 않습니다. 누구나 그것이 왜 또는 그것을 고치기 위해 무엇을 할 수 있는지 알고 있습니까?

이것은 나를 위해 일한 솔루션입니다

1. 전 세계에 설치 한 적이 없다면 npm을 통해 전 세계에 Prettier를 설치하십시오.

npm i prettier -g

2.Prettier Path VS 코드 설정에서 확장 설정 검색 및 사용

// Settings > Extensions > Prettier모든 Prettier Extension 설정에 대해 VS Code 로 이동할 수 있습니다

3.Prettier Path 전 세계적으로 설치된 Prettier로를 업데이트하십시오 .

예를 들어

/usr/local/lib/node_modules/prettier (맥 OS)

\AppData\Roaming\npm\node_modules\prettier (윈도우)

최신 정보

이제 prettier-vscode4.1.1 및 prettier2.0.4에서 작동합니다 . 번들 또는 로컬로 설치된 더 예쁜 버전을 사용할 수 있습니다.

눈에 띄는 변화 :

• [4.0.0] 더 예쁘게 2.0으로 업데이트
• [4.1.0] node_modules 폴더에서 파일을 처리 할 수 ​​있도록 NodeModules와 함께 구성 옵션 추가 [default : false]
• [4.1.0] node_modules에서 Prettier를 패키지에 직접 의존적으로 보이지 않더라도 로딩을 지원합니다.

원본 게시물

에서 외부 패키지의 소스 코드를 검사 할 때이 문제가 발생했습니다 node_modules.

해결 방법은 이 패키지 의 prettier항목 을 제거하는 것입니다 . package.json로컬 / 글로벌 prettier설치가 필요 하지 않습니다 . 예 :

{
  "devDependencies": {
    ...
    "prettier": "^1.19.1", // remove this line completely
  },
}

킵하지 package.json유효 - 후행 쉼표를 그냥 줄을 주석으로하지 않습니다. 그것이 작동하는 이유는 다음과 같습니다.

확장 프로그램은 package.json을 제출할 때까지 트리를 검색합니다. 해당 package.json에 더 예쁘면 확장이이를 사용합니다. 그렇지 않으면 번들 버전의 더 예쁘게 사용됩니다. 링크

내 생각에, 확장 프로그램이 prettier패키지에 있더라도 패키지에서 사용하려고합니다 devDependencies.

devDependency의 패키지 를 떨어 뜨릴 경우 아무런 해가 없어야합니다 node_modules. 또한 prettier번들로 제공되는 버전 을 사용할 수 있습니다 prettier-vscode(설치 필요 없음).

방금 이것에 부딪 쳤고 package.json 파일에 구문 오류가 있음을 발견했습니다. 한 줄에 후행 쉼표가 있었고 그 자체만으로도 근본 원인이 된 것 같습니다.

Angular 테스트를 실행하려고 할 때 다음과 같은 결과를 보았 기 때문에 이것을 알았습니다.

C:\... [feature/migrate-away-from-angular-http +2 ~6 -0 | +0 ~5 -0 !]> ng test
10% building 3/3 modules 0 active20 11 2019 21:11:18.638:WARN [karma]: No captured browser, open http://localhost:9876/
20 11 2019 21:11:19.575:INFO [karma-server]: Karma v4.1.0 server started at http://0.0.0.0:9876/
20 11 2019 21:11:19.576:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
20 11 2019 21:11:19.594:INFO [launcher]: Starting browser Chrome

ERROR in ./src/app/app.component.spec.ts
Module not found: SyntaxError: C:\...\package.json (directory description file): SyntaxError: C:\...\package.json (directory description file): SyntaxError: Unexpected token } in JSON at position 167
 @ ./src/app/app.component.spec.ts 7:31-75
 @ ./src sync \.spec\.ts$
 @ ./src/test.ts
ERROR in ./src/app/app.component.ts

Prettier를 설정할 때 프로젝트별로 구성하는 것이 중요합니다. 모든 프로젝트가 동일한 코드 스타일을 사용하는 것은 아니므로 현재 작업중인 프로젝트의 스타일을 존중하는 것이 중요합니다.

데모 저장소 bahmutov/prettier-config-example에는 각각 고유 한 코드 스타일을 가진 두 개의 하위 폴더가 Prettier에 의해 시행됩니다. 실제로, 각각의 repos는 그 스타일을 가질 것입니다; 예제를 간단하게 유지하기 위해 하위 폴더를 사용하고 있습니다.

npm install --save-dev --save-exact prettier

여기에 제공된 모든 솔루션을 시도했지만 도움이되지 않았습니다. Visual Studio Code를 업데이트하면이 문제가 해결되었습니다.

npm install전 세계적 으로이 문제를 해결했습니다 .

청소할 때이 문제가 발생했습니다 node_nodules. 나는 eslint전 세계적으로 더 예쁘게 설치되었습니다. 그리고 내가 삭제했을 node_modules때이 오류가 표시되었습니다.