Dalam VS Code, saya mendapatkan kesalahan ini, 'Gagal memuat modul. Mencoba memuat lebih cantik dari package.json '

21

Ketika saya menggunakan VS Code dan membuka proyek, saya mendapatkan notifikasi ini di sudut kanan bawah:

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

Source: Prettier Code Format (Extension)

Menjalankan npm install tidak menyelesaikan ini. Adakah yang tahu mengapa itu atau apa yang dapat saya lakukan untuk memperbaikinya?

visual-studio-code package.json prettier

— ghostagent151
sumber

Memiliki masalah yang sama juga. Apakah Anda di belakang proxy secara kebetulan?

— Bryce

Sepertinya beberapa jalur rusak pada mesin saya atau ada sesuatu yang hilang. Kami memiliki package.json dengan skrip untuk menjalankan lebih cantik dan linter. Menjalankan skrip dari file package.json tidak berlaku lebih cantik, tetapi jika saya memformatnya sendiri (opsi + shift + f pada mac) berfungsi. Jadi aneh dan menjengkelkan karena harus memformat setiap file secara manual.

— ghostagent151

Tampaknya ini merupakan "tambahan" yang cukup baru untuk Kode VS. Meskipun menggunakan lebih cantik di masa lalu juga, kami belum mengamati masalah ini. Saya tidak tahu dari versi mana Kode VS dan seterusnya ini menjadi masalah.

— Manfred

Memiliki masalah yang sama sejak beberapa hari yang lalu. Tidak ada proksi atau firewall - sesuatu yang rusak lebih cantik dalam pembaruan Kode VS terbaru

— Hemal

3

Ini adalah masalah github terkait. Mereka mencari informasi lebih lanjut tentang masalah ini (dan jika tersedia repo yang dapat dibagikan). github.com/prettier/prettier-vscode/issues/1066

— Kasper

16

Ini adalah solusi yang berhasil untuk saya

1. Instal Prettier secara global melalui npm jika Anda belum pernah menginstalnya secara global

npm i prettier -g

2. Cari & Gunakan Prettier PathPengaturan Ekstensi di Pengaturan Kode VS Anda

// Anda dapat menavigasi ke Kode VS Settings > Extensions > Prettieruntuk semua Pengaturan Ekstensi Prettier

3. Perbarui Prettier Pathuntuk Prettier yang terpasang secara global.

Sebagai contoh

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

\AppData\Roaming\npm\node_modules\prettier (Windows)

— Tunji Oyeniran
sumber

Saya telah menginstal Prettier secara global. Ketika saya masuk ke pengaturan VS Code, saya mencari Prettier Path. Saya melihat 2 opsi di sini, Prettier:Config Pathdan Prettier: Prettier Path. Saya menggunakan mac. Haruskah saya menambahkan /usr/local/lib/node_modules/prettierke kedua jalur atau hanya yang pertama?

— ghostagent151

1

@ ghostagent151 hanya yang terakhir "Prettier: Prettier Path" sesuai tangkapan layar.

— donovan

Inilah masalah lain yang saya lihat. Jika saya mengunduh ekstensi yang lebih cantik dalam kode vs., saya memiliki pengaturan yang telah saya atur sehingga saat disimpan secara otomatis berlaku lebih cantik untuk kode saya. Namun, tampaknya ada dua versi berbeda dari aplikasi yang lebih cantik. Jika saya menjalankan npm run prettierdari baris perintah, misalnya, variabel yang memiliki string dengan tanda kutip ganda dikonversi menjadi tanda kutip tunggal. Jika saya menyimpan dan format otomatis diterapkan, mereka dikonversi menjadi tanda kutip ganda. Tidak yakin apa yang terjadi dengan itu.

— ghostagent151

1

@ ghostagent151 Ini adalah masalah yang berbeda. Menjalankan npm run prettiermenggunakan prettier lokal di proyek Anda node_modulesjika package.jsonada di proyek. Saran saya adalah Anda mematikan VS Code formatOnSavejika Anda akan menggunakan aturan pemformatan khusus untuk proyek Anda. Untuk menghindari penimpaan format.

— Tunji Oyeniran

1

Jalur Anda ke modul yang Anda instal secara global akan berbeda, tergantung tidak hanya pada OS tetapi juga cara Anda memasang npm (mis. Nvm, dll.). Cara mudah untuk mendapatkan path adalah menjalankannpm root -g

— BoDeX

2

Memperbarui

Sekarang berfungsi untuk saya dengan prettier-vscode4.1.1 dan prettier2.0.4, cobalah. Saya dapat menggunakan versi yang lebih baik dari bundel atau yang diinstal secara lokal.

Perubahan penting :

[4.0.0] Diperbarui lebih cantik ke 2.0
[4.1.0] Menambahkan opsi konfigurasi denganNodeModules untuk mengaktifkan pemrosesan file di folder node_modules [default: false]
[4.1.0] Mendukung memuat Prettier dari node_modules bahkan jika itu tidak muncul sebagai ketergantungan langsung pada package.json

Pos asli

Saya mengalami masalah ini ketika memeriksa kode sumber paket eksternal di bawah node_modules.

Solusinya adalah untuk menghapus prettierentri package.jsondari paket ini - tidak prettierdiperlukan instalasi lokal / global . Contoh :

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

Pertahankan yang package.jsonvalid - jangan koma di belakang, jangan hanya berkomentar di luar saja. Alasan mengapa ia bekerja adalah:

Ekstensi mencari pohon sampai kita mengajukan package.json. Jika package.json itu berisi lebih cantik, ekstensi akan menggunakannya, jika tidak maka akan kembali menggunakan versi paket yang lebih cantik. Tautan

Dugaan saya adalah, bahwa ekstensi ingin digunakan prettierdari paket, bahkan jika itu devDependencies.

Seharusnya tidak ada salahnya untuk menjatuhkan devDependencypaket node_modules. Ini juga memungkinkan untuk menggunakan prettierversi yang dibundel dengan prettier-vscode(tidak perlu menginstal).

— ford04
sumber

1

Saya baru saja menemukan ini dan menemukan saya memiliki kesalahan sintaksis dalam file package.json saya. Ada koma yang tertinggal di satu baris, dan itu saja tampaknya menjadi penyebab utama bagi saya.

Saya perhatikan ini karena saya melihat output berikut ketika mencoba menjalankan beberapa tes 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

— Sam Storie
sumber

1

Saat mengatur Prettier, penting untuk mengkonfigurasinya per proyek. Tidak setiap proyek menggunakan gaya kode yang sama, oleh karena itu penting untuk menghormati gaya proyek apa pun yang sedang Anda kerjakan.

Demo repo bahmutov/prettier-config-examplememiliki dua subfolder, masing-masing dengan gaya kode yang berbeda, ditegakkan oleh Prettier. Pada kenyataannya, masing-masing repo Anda akan memiliki gayanya; Saya menggunakan subfolder untuk menjaga contoh sederhana.

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

— Shanwaz Ghulam
sumber

1

Mencoba semua solusi yang disediakan di sini, tidak membantu. Memperbarui Visual Studio Code memperbaiki masalah ini.

— Psy
sumber

0

Memperbaiki masalah ini dengan melakukan npm installsecara global.

Saya mengalami masalah ini ketika membersihkan node_nodules. Saya telah eslintbersama dengan lebih cantik terinstal secara global. Dan ketika saya menghapus node_moduleskesalahan ini dinyatakan muncul.

— vikrantnegi007
sumber