VSコードでは、「モジュールのロードに失敗しました。package.jsonからprettierをロードしようとしました '

21

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を実行しても、これは解決されません。誰もがそれがなぜであるか、またはそれを修正するために私が何ができるかという考えを持っていますか？

visual-studio-code package.json prettier

— ghostagent151
ソース

同じ問題があります。偶然プロキシの後ろにいますか？

— ブライス

マシン上で一部のパスが壊れているか、何かが欠けているようです。prettierとリンターを実行するスクリプトを含むpackage.jsonがあります。package.jsonファイルからスクリプトを実行してもきれいにはなりませんが、自分でフォーマットした場合（Macではoption + shift + f）機能します。そのため、各ファイルを手動でフォーマットする必要があり、奇妙で面倒です。

— ghostagent151

これは、VS Codeにかなり最近追加されたようです。以前にもきれいに使用しているにもかかわらず、この問題は確認されていません。これが問題になったVS Code以降のバージョンはありません。

— Manfred

数日前から同じ問題が発生しています。プロキシやファイアウォールはありません-最新のVSコードアップデートで何かが壊れています

— Hemal

3

これは関連するgithubの問題です。彼らは、この問題に関する詳細情報（および利用可能な場合は共有できるリポジトリ）を探しています。github.com/prettier/prettier-vscode/issues/1066

— Kasper

16

これは私のために働いたソリューションです

1. Prettierをグローバルにインストールしたことがない場合は、npmを介してグローバルにインストールします。

npm i prettier -g

2.Prettier Path VSコード設定で拡張設定を検索して使用する

// Settings > Extensions > PrettierすべてのPrettier拡張設定のVSコードに移動できます

3.をPrettier PathグローバルにインストールされたPrettierに更新します。

例えば

/usr/local/lib/node_modules/prettier （マックOS）

\AppData\Roaming\npm\node_modules\prettier （ウィンドウズ）

— トゥンジオイエニラン
ソース

Prettierをグローバルにインストールしました。VS Code設定に移動すると、を検索しPrettier Pathます。私はここで2つのオプションを参照してください、Prettier:Config PathとPrettier: Prettier Path。Macを使用しています。/usr/local/lib/node_modules/prettier両方のパスまたは最初のパスに追加する必要がありますか？

— ghostagent151

1

スクリーンショットによると、@ ghostagent151は最後の「Prettier：Prettier Path」だけです。

— donovan

これが私が見ている別の問題です。vstコードできれいな拡張機能をダウンロードすると、保存時に自動的にきれいなコードがコードに適用されるように設定されています。ただし、2つの異なるバージョンのprettierが適用されているようです。npm run prettierたとえば、コマンドラインから実行した場合、二重引用符が付いた文字列を持つ変数は、単一引用符に変換されます。保存して自動フォーマットを適用すると、二重引用符に変換されます。それで何が起こっているのかわからない。

— ghostagent151

1

@ ghostagent151これは別の問題です。がプロジェクトに存在する場合、実行でnpm run prettierはプロジェクトのローカルのprettierが使用されます。プロジェクトでカスタムのフォーマットルールを使用する場合は、VS Codeをオフにすることをお勧めします。フォーマットの上書きを避けるため。node_modulespackage.jsonformatOnSave

— Tunji Oyeniran

1

グローバルにインストールされたモジュールへのパスは、OSだけでなく、npmのインストール方法（nvmなど）によっても異なります。パスを取得する簡単な方法は、実行することですnpm root -g

— BoDeX

2

更新

それが今で私の作品prettier-vscode4.1.1およびprettier2.0.4、それを試してみます。バンドル版またはローカルにインストールされたバージョンのprettierを使用できます。

注目すべき変更：

[4.0.0] prettierを2.0に更新
[4.1.0] node_modulesフォルダー内のファイルの処理を有効にするための構成オプションwithNodeModulesを追加しました[デフォルト：false]
[4.1.0] package.jsonで直接の依存関係として表示されていない場合でも、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が含まれている場合、拡張機能はそれを使用します。それ以外の場合は、バンドルされているprettierのバージョンを使用するようにフォールバックします。リンク

私の推測では、prettierたとえそれがそうであっても、拡張機能はパッケージから使用したいと考えていますdevDependencies。

のdevDependencyパッケージからを削除しても問題はありませんnode_modules。これにより、にprettierバンドルされているバージョンを使用することもできますprettier-vscode（インストールは不要です）。

— ford04
ソース

1

私はこれに遭遇し、package.jsonファイルに構文エラーがあることを発見しました。1行に末尾のカンマがあり、それだけが私にとって根本的な原因のように思われました。

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

— サム・ストーリー
ソース

1

Prettierをセットアップするときは、プロジェクトごとに構成することが重要です。すべてのプロジェクトが同じコードスタイルを使用するわけではないため、現在作業しているプロジェクトのスタイルを尊重することが重要です。

デモリポジトリにbahmutov/prettier-config-exampleは2つのサブフォルダーがあり、それぞれに異なるコードスタイルがあり、Prettierによって強制されています。実際には、それぞれのリポジトリにスタイルがあります。例を簡単にするために、サブフォルダーを使用しています。

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

— シャンワズ・グラーム
ソース

1

ここで提供されているすべてのソリューションを試してみましたが、役に立ちませんでした。Visual Studio Codeを更新すると、この問題が修正されました。

— サイ
ソース

0

npm installグローバルに行うことでこの問題を修正しました。

をクリーニングしたときにこの問題が発生しましたnode_nodules。私はeslintprettierとともにグローバルにインストールしました。そして、私が削除したときに、node_modulesこのエラーが表示されます。

— vikrantnegi007
ソース