W VS Code pojawia się ten błąd: „Nie można załadować modułu. Podjęto próbę załadowania ładniejszego pliku package.json '

21

Kiedy używam VS Code i otwieram projekt, otrzymuję to powiadomienie w prawym dolnym rogu:

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

Source: Prettier Code Format (Extension)

Uruchomienie instalacji npm nie rozwiązuje tego problemu. Czy ktoś ma pojęcie, dlaczego to jest lub co mogę zrobić, aby to naprawić?

ghostagent151
źródło
Również ten sam problem. Czy przypadkiem nie jesteś pełnomocnikiem?
Bryce
Wygląda na to, że niektóre ścieżki są uszkodzone na moim komputerze lub czegoś brakuje. Mamy pakiet.json ze skryptem do ładniejszego działania i linera. Uruchamianie skryptu z pliku package.json nie jest ładniejsze, ale jeśli go sformatuję (opcja + shift + f na komputerze Mac), działa. Dziwna i irytująca konieczność ręcznego formatowania każdego pliku.
ghostagent151
Wydaje się, że jest to całkiem nowy „dodatek” do VS Code. Mimo że w przeszłości korzystaliśmy też z ładniejszej wersji, nie zaobserwowaliśmy tego problemu. Nie wiem, od której wersji VS Code stało się to problemem.
Manfred
Miałem ten sam problem od kilku dni temu. Brak proxy lub zapory ogniowej - coś załamało się ładniej w najnowszej aktualizacji VS Code
Hemal
3
Jest to powiązany problem z githubem. Szukają więcej informacji na ten temat (i jeśli to możliwe, repozytorium, które można udostępnić). github.com/prettier/prettier-vscode/issues/1066
Kasper

Odpowiedzi:

16

To rozwiązanie działało dla mnie

1. Zainstaluj ładniejszy globalnie za pomocą npm, jeśli nigdy nie instalowałeś go globalnie

npm i prettier -g

2. Wyszukaj i użyj Prettier Pathustawień rozszerzeń w ustawieniach kodu VS.

wprowadź opis zdjęcia tutaj

// Możesz przejść do VS Code Settings > Extensions > Prettierdla wszystkich ładniejszych ustawień rozszerzeń

3. Zaktualizuj Prettier Pathdo globalnie zainstalowanego Prettier.

Na przykład

/usr/local/lib/node_modules/prettier (System operacyjny Mac)

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

Tunji Oyeniran
źródło
Zainstalowałem Prettier na całym świecie. Kiedy wchodzę do ustawień VS Code, szukam Prettier Path. Widzę tutaj 2 opcje Prettier:Config Pathi Prettier: Prettier Path. Używam Maca. Czy powinienem dodać /usr/local/lib/node_modules/prettierdo obu ścieżek, czy tylko do pierwszej?
ghostagent151
1
@ ghostagent151 tylko ostatni „Prettier: Prettier Path” jak na zrzucie ekranu.
donovan
Oto kolejny problem, który widzę. Jeśli pobiorę ładniejsze rozszerzenie w kodzie vs, mam skonfigurowane ustawienia, aby po zapisaniu automatycznie zastosowały ładniejszy kod. Wydaje się jednak, że stosowane są dwie różne wersje ładniejszych. Na przykład, jeśli uruchomię npm run prettierz wiersza poleceń, zmienne zawierające ciągi z podwójnymi cudzysłowami są konwertowane na pojedyncze cudzysłowy. Jeśli zapiszę i zastosowany zostanie format automatyczny, zostaną one przekonwertowane na podwójne cudzysłowy. Nie jestem pewien, co się z tym dzieje.
ghostagent151
1
@ ghostagent151 To jest inny problem. Uruchomienie npm run prettierużywa lokalnej ładniejszej wersji w projekcie, node_modulesjeśli package.jsonistnieje w projekcie. Radzę wyłączyć kod VS, formatOnSavejeśli będziesz używać niestandardowych reguł formatowania dla swojego projektu. Aby uniknąć zastąpienia formatu.
Tunji Oyeniran
1
Twoja ścieżka do globalnie zainstalowanych modułów będzie się różnić w zależności nie tylko od systemu operacyjnego, ale także od sposobu zainstalowania npm (np. Nvm itp.). Łatwym sposobem na uzyskanie ścieżki jest uruchomienienpm root -g
BoDeX
2

Aktualizacja

Teraz działa dla mnie z prettier-vscode4.1.1 i prettier2.0.4, spróbuj. Mogę użyć dołączonej lub zainstalowanej lokalnie wersji ładniejszej.

Znaczące zmiany :

  • [4.0.0] Zaktualizowano ładniej do 2.0
  • [4.1.0] Dodano opcję konfiguracji withNodeModules, aby umożliwić przetwarzanie plików w folderze node_modules [domyślnie: false]
  • [4.1.0] Obsługa ładowania ładniejszego z node_modules, nawet jeśli nie pojawia się jako bezpośrednia zależność w pliku package.json

Oryginalny post

Napotkałem ten problem podczas sprawdzania kodu źródłowego pakietu zewnętrznego pod node_modules.

Obejściem tego problemu jest usunięcie prettierwpisu package.jsontego pakietu - nie jest prettierwymagana instalacja lokalna / globalna . Przykład :

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

Zachowaj package.jsonważność - bez przecinka, nie komentuj linii. Powodem tego jest:

Rozszerzenie przeszukuje drzewo aż do momentu złożenia pliku package.json. Jeśli pakiet package.json zawiera ładniejsze, rozszerzenie używa tego, w przeciwnym razie wróci do korzystania z dołączonej wersji ładniejszego. Połączyć

Domyślam się, że rozszerzenie chce korzystać prettierz pakietu, nawet jeśli tak jest devDependencies.

Upuszczenie devDependencyz paczki nie powinno być szkodliwe node_modules. Umożliwia to również korzystanie z prettierwersji dołączonej do pakietu prettier-vscode(instalacja nie jest wymagana).

ford04
źródło
1

Właśnie wpadłem na to i odkryłem, że mam błąd składniowy w moim pliku package.json. W jednej linii znajdował się przecinek końcowy i to właśnie wydawało mi się, że jest to podstawowa przyczyna.

Zauważyłem to, ponieważ podczas próby uruchomienia testów kątowych zobaczyłem następujące dane wyjściowe:

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
źródło
1

Podczas konfigurowania ładniejszego należy skonfigurować go dla każdego projektu. Nie każdy projekt używa tego samego stylu kodu, dlatego ważne jest, aby szanować styl każdego projektu, w którym aktualnie pracujesz.

Repozytorium demonstracyjne bahmutov/prettier-config-examplema dwa podfoldery, każdy z innym stylem kodu, wymuszonym przez Prettier. W rzeczywistości każde twoje repo będzie miało swój styl; Korzystam z podfolderów, aby uprościć przykład.

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

Shanwaz Ghulam
źródło
1

Wypróbowałem wszystkie przedstawione tutaj rozwiązania, nie pomogło. Aktualizacja programu Visual Studio Code rozwiązała ten problem.

Psy
źródło
0

Naprawiono ten problem, robiąc to npm installglobalnie.

Miałem ten problem, kiedy go wyczyściłem node_nodules. Miałem eslintwraz z ładniejszym globalnie zainstalowany. A kiedy usunąłem node_modulesten błąd stwierdził pojawienie się.

vikrantnegi007
źródło