Trong Mã VS, tôi gặp lỗi này, 'Không thể tải mô-đun. Đã cố tải đẹp hơn từ gói.json '

Khi tôi đang sử dụng VS Code và mở một dự án, tôi nhận được thông báo này ở góc dưới bên phải:

Failed to load module. If you have prettier or plugins referenced in package.json, ensure you have runcài đặt npmAttempted to load prettier from package.json.

Source: Prettier Code Format (Extension)

Chạy cài đặt npm không giải quyết điều này. Bất cứ ai cũng có ý tưởng tại sao đó là hoặc những gì tôi có thể làm để khắc phục nó?

Đây là một giải pháp hiệu quả với tôi

1. Cài đặt Prettier toàn cầu qua npm nếu bạn chưa bao giờ cài đặt nó trên toàn cầu

npm i prettier -g

2. Tìm kiếm và sử dụng Prettier PathCài đặt tiện ích mở rộng trong Cài đặt mã VS của bạn

// Bạn có thể điều hướng đến Mã VS Settings > Extensions > Prettiercho tất cả các Cài đặt tiện ích mở rộng đẹp hơn

3. Cập nhật Prettier Pathlên Prettier được cài đặt toàn cầu của bạn.

Ví dụ

/usr/local/lib/node_modules/prettier (Hệ điều hành Mac)

\AppData\Roaming\npm\node_modules\prettier (Các cửa sổ)

Cập nhật

Bây giờ nó hoạt động với tôi với prettier-vscode4.1.1 vàprettier 2.0.4, hãy dùng thử. Tôi có thể sử dụng phiên bản đóng gói hoặc cài đặt cục bộ của prettier.

Những thay đổi đáng chú ý :

• [4.0.0] Cập nhật đẹp hơn lên 2.0
• [4.1.0] Đã thêm tùy chọn cấu hình vớiNodeModules để cho phép xử lý các tệp trong thư mục node_modules [default: false]
• [4.1.0] Hỗ trợ tải Prettier từ node_modules ngay cả khi nó không xuất hiện dưới dạng phụ thuộc trực tiếp trong gói.json

Bài gốc

Tôi gặp phải vấn đề này khi kiểm tra mã nguồn của gói bên ngoài node_modules.

Một cách giải quyết là loại bỏ prettiermục nhập trong package.jsongói này - không prettiercần cài đặt cục bộ / toàn cầu . Ví dụ :

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

Giữ package.jsongiá trị - không có dấu phẩy, không chỉ nhận xét dòng. Lý do tại sao nó hoạt động là:

Tiện ích mở rộng tìm kiếm cây xuống cho đến khi chúng tôi gửi gói.j.j Nếu gói.json chứa đẹp hơn, tiện ích mở rộng sử dụng điều đó, nếu không, nó sẽ quay trở lại sử dụng phiên bản đóng gói đẹp hơn. Liên kết

Tôi đoán là, tiện ích mở rộng muốn sử dụng prettiertừ gói, ngay cả khi đó làdevDependencies .

Không có hại để thả devDependencytừ một gói trong node_modules. Điều này cũng cho phép sử dụng prettierphiên bản đi kèm prettier-vscode(không cần cài đặt).

Tôi vừa chạy vào đây và phát hiện ra tôi có lỗi cú pháp trong tệp pack.json. Có một dấu phẩy trên một dòng, và đó dường như là nguyên nhân gốc rễ đối với tôi.

Tôi nhận thấy điều này bởi vì tôi thấy đầu ra sau đây khi thử chạy một số thử nghiệm 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

Khi thiết lập Prettier, điều quan trọng là phải định cấu hình cho từng dự án. Không phải mọi dự án đều sử dụng cùng một kiểu mã, do đó, điều quan trọng là phải tôn trọng phong cách của bất kỳ dự án nào bạn đang làm việc.

Repo demo bahmutov/prettier-config-examplecó hai thư mục con, mỗi thư mục có kiểu mã riêng biệt, được thi hành bởi Prettier. Trong thực tế, mỗi repos của bạn sẽ có phong cách của nó; Tôi đang sử dụng các thư mục con để giữ cho ví dụ đơn giản.

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

Đã thử tất cả các giải pháp được cung cấp ở đây, không giúp được gì. Cập nhật mã Visual Studio đã khắc phục sự cố này.

Đã khắc phục sự cố này bằng cách thực hiện npm installtrên toàn cầu.

Tôi đã có vấn đề này khi tôi làm sạch node_nodules. Tôi đã eslintcùng với cài đặt đẹp hơn trên toàn cầu. Và khi tôi xóa node_moduleslỗi này, hiển thị.