В VS Code я получаю эту ошибку: «Не удалось загрузить модуль. Попытка загрузить красивее из package.json '

21

Когда я использую VS Code и открываю проект, я получаю это уведомление в правом нижнем углу:

Failed to load module. If you have prettier or plugins referenced in package.json, ensure you have runустановка npmAttempted to load prettier from package.json.

Source: Prettier Code Format (Extension)

Запуск npm install не решает эту проблему. У кого-нибудь есть идеи, почему это так или что я могу сделать, чтобы это исправить?

ghostagent151
источник
Имея ту же проблему, а также. Ты за прокси случайно?
Брайс
Кажется, на моей машине какой-то путь сломан или что-то отсутствует. У нас есть package.json со скриптом для запуска красивее и линтером. Запуск сценария из файла package.json не применяется более красиво, но если я отформатирую его сам (option + shift + f на mac), это сработает. Так странно и раздражает необходимость вручную форматировать каждый файл.
ghostagent151
Похоже, это довольно недавнее «дополнение» к VS Code. Несмотря на то, что в прошлом мы использовали красивее, мы не наблюдали этой проблемы. Я не знаю, с какой версии VS Code это стало проблемой.
Манфред
Имея ту же проблему, так как несколько дней назад. Нет прокси или брандмауэра - что-то сломалось красивее в последнем обновлении VS Code
Hemal
3
Это связанная проблема GitHub. Они ищут дополнительную информацию по этому вопросу (и, если возможно, репо, которым можно поделиться). github.com/prettier/prettier-vscode/issues/1066
Каспер

Ответы:

16

Это решение, которое сработало для меня

1. Установите Prettier Global через npm, если вы никогда не устанавливали его глобально

npm i prettier -g

2. Найдите и используйте Prettier Pathнастройки расширений в настройках кода VS

введите описание изображения здесь

// Вы можете перейти к VS Code Settings > Extensions > Prettierдля всех настроек расширения Prettier

3. Обновите Prettier Pathсвой глобально установленный Prettier.

Например

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

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

Тунджи Ойениран
источник
Я установил Преттиер во всем мире. Когда я захожу в настройки VS Code, я ищу Prettier Path. Я вижу 2 варианта здесь, Prettier:Config Pathи Prettier: Prettier Path. Я использую Mac. Должен ли я добавить /usr/local/lib/node_modules/prettierк обоим путям или только первый?
ghostagent151
1
@ ghostagent151 только последний "Prettier: Prettier Path" согласно скриншоту.
Донован
Вот еще одна проблема, которую я вижу. Если я загружаю расширение «симпатичнее» в коде, то мои настройки настраиваются так, чтобы при сохранении оно автоматически применялось симпатичнее к моему коду. Тем не менее, кажется, что применяются две разные версии более красивых. npm run prettierНапример, если я запускаю из командной строки, переменные, содержащие строки с двойными кавычками, преобразуются в одинарные кавычки. Если я сохраняю и применяется автоматический формат, они преобразуются в двойные кавычки. Не уверен, что происходит с этим.
ghostagent151
1
@ ghostagent151 Это другая проблема. Запуск npm run prettierиспользует местное красивее в вашем проекте, node_modulesесли package.jsonсуществует в проекте. Я советую вам отключить VS Code, formatOnSaveесли вы будете использовать собственные правила форматирования для вашего проекта. Чтобы избежать перезаписи формата.
Тунджи Ойениран
1
Ваш путь к глобально установленным модулям будет отличаться в зависимости не только от ОС, но и от того, как вы установили npm (т.е. nvm и т. Д.). Самый простой способ найти путь - запуститьnpm root -g
BoDeX
2

Обновить

Теперь он работает для меня с prettier-vscode4.1.1 и prettier2.0.4, попробуйте. Я могу либо использовать в комплекте или локально установленную версию красивее.

Заметные изменения :

  • [4.0.0] Обновлено красивее до 2.0
  • [4.1.0] Добавлена ​​опция конфигурации withNodeModules, чтобы включить обработку файлов в папке node_modules [по умолчанию: false]
  • [4.1.0] Поддержка загрузки Prettier из node_modules, даже если она не отображается как прямая зависимость в package.json

Оригинальный пост

Я столкнулся с этой проблемой при проверке исходного кода внешнего пакета в 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(установка не требуется).

ford04
источник
1

Я только столкнулся с этим и обнаружил, что у меня была синтаксическая ошибка в моем файле 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
Сэм Стори
источник
1

При настройке Prettier важно настроить его для каждого проекта. Не каждый проект использует один и тот же стиль кода, поэтому важно соблюдать стиль любого проекта, в котором вы сейчас работаете.

Демонстрационное репо bahmutov/prettier-config-exampleимеет две подпапки, каждая из которых имеет свой собственный стиль кода, созданный Prettier. В действительности, каждое из ваших репозиториев будет иметь свой стиль; Я использую подпапки, чтобы сделать пример простым.

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

Шанваз Гулам
источник
1

Перепробовал все решения, представленные здесь, не помогло. Обновление кода Visual Studio решило эту проблему.

Psy
источник
0

Исправлена ​​эта проблема, делая npm installглобально.

У меня была эта проблема, когда я почистил node_nodules. У меня было eslintвместе с красивее глобально установлено. И когда я удалил node_modulesэту ошибку, указывалось, обнаруживаясь.

vikrantnegi007
источник