Это проблема не самого Prettier, а prettier-vscode, расширения VSCode. Согласно его документация, форматирование Vue по умолчанию отключено:

prettier.disableLanguages (default: ["vue"])

A list of languages IDs to disable this extension on. Restart required. Note: Disabling a language enabled in a parent folder will prevent formatting instead of letting any other formatter to run

В этом случае для включения следует установить "prettier.disableLanguages": []. И поскольку это конфигурация расширения, вы должны сделать это в файле настроек VSCode, а не в .prettierrc.

Иногда prettier перестает работать, когда в коде есть синтаксические ошибки. Вы можете просмотреть ошибки, нажав кнопку Икс в правом нижнем углу рядом с Красивее.

вы можете попробовать добавить этот раздел в свой файл VS Code settings.json?

"[javascript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
},

Иногда при автоматическом обновлении плагинов необходимые файлы, используемые Prettier, могут отсутствовать.

Отметьте этот путь, если здесь есть файлы или папка пуста

C: \ Users \ ИМЯ ВАШЕГО ПОЛЬЗОВАТЕЛЯ \ .vscode \ extensions \ esbenp.prettier-vscode-2.2.2 \ out

Если отсутствует удалить и переустановить красивее

1. Использование другого расширения prettier не работает для меня, я просто использую другое расширение VSCODE с именем PrettierNow, я думаю, это поможет, сделано для меня.

2. Из последних обновлений prettier вам необходимо добавить файл .prettierrc в корень вашего проекта, если вы хотите придерживаться prettier. Пример .prettierrc:

{
  "tabWidth": 4,
  "singleQuote": true,
  "semi": false
}

Prettier также может форматировать ваши файлы при сохранении.

Однако установка и включение не приводят к работе.

Вы должны проверить "форматировать при сохранении" в VSCode: Настройка >> Пользователь >> Текстовый редактор >> Форматирование

Как я разобрался после огромного разочарования из-за того, что Prettier перестал работать в VSCode.

1. Выберите VS Code -> View -> Command Palette и введите: Format Document With
2. Затем Configure Default Formatter..., а затем выберите Prettier - Code formatter.

Это волшебным образом решило мою проблему.

В зависимости от вашего случая это может вам помочь ...

Откатился красивее на 1.7.3 и поправил

Включение "Форматировать при сохранении" в VSCode: Настройка >> Пользователь >> Текстовый редактор >> Форматирование у меня сработало! ?

Распечатать

Я не использую Vue, но возникла та же проблема.

У меня уже были настройки

• Editor: default formatter красивее
• Editor: Format on Save в true
• У меня уже были файлы .eslintrc.js и .prettierrc Но ничего не вышло.

Решение моей проблемы заключалось в том, что я все настроил правильно, за исключением того, что мне нужно было:

• Command + Shift + p
• тип format document with
• выберите Configure Default Formatter...
• выберите Prettier по умолчанию.

Я не знаю, почему Editor: Format on Save, установленного на true, было недостаточно. Мне нужно было выбрать модуль форматирования по умолчанию, используя описанные выше шаги, чтобы он работал.

Для меня это было связано с ESlint, который также работает с Prettier. Eslint не работал (локальная установка против глобального конфликта установки), что сломало Prettier.

Если выполнение того, что упомянул @Simin Maleki, не решит эту проблему для вас, есть вероятность, что ваш модуль форматирования по умолчанию не установлен:

File > Preferences > Settings > Search for "default formatter" 

Убедитесь, что в вашем поле Editor: Default Formatter указано не null, а скорее esbenp.prettier-vscode, и что все указанные ниже языки отмечены галочками. Это устранило мою проблему.

ПОШАГОВАЯ ПРОГУЛКА

Также убедитесь, что ваш формат при сохранении включен:

Не забудьте включить "editor.defaultFormatter" в настройках VSCode. В моем случае он был нулевым, и, следовательно, даже "editor.formatOnSave", похоже, не решал проблему.

Я столкнулся с этой проблемой, и эти три шага решили мою проблему:

Если ни один из других ответов не работает, убедитесь, что в вашем рабочем каталоге не существует конфликтующей более красивой конфигурации .prettierrc, или проверьте наличие .prettierignore, чтобы убедиться, что файлы / папки не игнорируются.

В Windows:

Мы можем открыть файл ниже, используя:

Start > Run 

Путь файла:

%AppData%\Code\User\settings.json

Изменять Из:

"[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
},

К:

"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},

Примечание:

• Если вышеуказанного нет, добавьте его вместо изменения.
• Вы должны были уже установить «Prettier - code formatter», чтобы увидеть эффект от вышеуказанного изменения.

Недавно у меня возникла та же проблема, что Prettier не форматирует код автоматически при сохранении. Проверяя Prettier, я увидел ошибку: Неверное значение "arrowParens". Ожидал «всегда» или «избегать», но получил true.

Когда я щелкнул по этой ссылке, появилось сообщение об ошибке:

Оказалось, что у меня тоже установлен Prettier Now. В моем файле конфигурации это логическое значение. После удаления Prettier Now все работает нормально.

Перейдите в Управлять (находится в левом нижнем углу) -> Настройки -> вкладка Пользователи -> Текстовый редактор -> Форматирование -> проверьте формат при сохранении

если не работает, закройте и снова откройте редактор vscode

Для меня проблема заключалась в файлах HTML, форматирование которых однажды перестало работать. У меня был настроен Форматировать при сохранении, который работал во всех файлах, кроме HTML.

Затем я понял, что экспериментально установил Форматировать в режиме сохранения на modification вместо file и забыл об этом. Это привело к тому, что в файлах HTML ничего не отформатировалось, что удивительно даже с моими изменениями. Установка обратно на file решила проблему.

у вас могут быть проблемы, несмотря на все эти настройки. В этом случае, как указывалось в предыдущем ответе, было бы неплохо проверить более красивое уведомление в нижней строке состояния в VSCode.

При нажатии на этот статус панель вывода должна сообщить о проблеме в файле HTML. Для меня проблема заключалась в том, что у меня был div внутри тега p, против которого, как я полагаю, выступают соглашения prettier / VSCode. Когда я удалил его (и в сочетании со всеми вышеперечисленными настройками, а именно средство форматирования по умолчанию и форматировать при сохранении), я стал красивее работать.

.prettierrc не требуется, если вы не хотите переопределить настройки VSCode.

Проверьте, есть ли файл .vscode / settings.json в каталоге вашего проекта (рабочая область). В моем случае кто-то проверил этот файл:

{
  "editor.formatOnSave": false
}

Решение: удалите файл (удалите его также из системы управления версиями) и добавьте .vscode/ в .gitignore (если вы используете git).

В моем случае мне пришлось сделать следующее:

1. Установить prettier из командной строки (npm install --save-dev --save-exact prettier prettier-plugin-custom)
2. Перезагрузить VSCode

и вуаля, все заработало.

КОНЧИК: Чтобы убедиться, что установка прошла успешно, я проверил версию:

npx prettier --version

Я попытался включить «Форматирование при сохранении» и установить «Задержку автосохранения» на 0. Это сработало, так что я думаю, вы тоже можете попробовать это.

Обновлено: вы можете увидеть их, выполнив следующие действия.

1. Manage(The gear Icon bottom left)

2. Settings(Inside the manage dropdown list)

3. Search for Format On Save and enable it(check the box)

4. Scroll down and look for Auto Save Delay and set it to 0

Проверьте requirePragma в .prettierrc, он говорит, что вам нужно добавить комментарий верхнего уровня для этого файла, который будет отформатирован

удалите это правило, и оно должно работать

Если Prettier автоматически форматирует все остальные файлы, кроме файлов HTML, при сохранении:

Нажмите Cmd + P или Ctrl + P, чтобы открыть палитру команд, и введите в нее следующий текст:

> open settings

Щелкните Preferences: Open Settings (JSON) в раскрывающемся списке предложений. Внутри файла settings.json проверьте, существует ли ключ "[html]". Если ключ существует и его значение указывает на использование другого расширения форматирования, установленного в Visual Studio Code, вам следует сбросить его, чтобы использовать Красивее.

"[html]": {
    "esbenp.prettier-vscode"
}

Например, иногда значение ключа "[html]" может быть "remimarsal.prettier-now", если у вас установлено расширение Prettier Now.

Если у вас не установлено другое расширение форматирования, кроме Prettier, вы также можете полностью удалить ключ "[html]" из файла settings.json.

Есть несколько синтаксисов, которые prettier не может разобрать. ?? - один из них. После удаления символа моя красотка сработала как шарм. Вам следует взглянуть на вывод расширения Prettier в vscode. Это должно указывать на строку и синтаксис, которые вызывают проблемы при правильном форматировании.

В некоторых случаях, когда prettier предоставляется в качестве зависимости, вам может потребоваться установить его до того, как prettier vscode распознает его с помощью одной из следующих команд, в зависимости от используемого вами диспетчера пакетов npm i или yarn

отключить и включить расширение prettier решает мою проблему

Это то, что сработало для меня (мой форматировщик по умолчанию уже был настроен на Prettier)

1. Измените форматтер по умолчанию на default
2. Перезапустить vscode
3. Измените форматтер по умолчанию обратно на Prettier.

Если вы установили все, что можно сделать в разделе «Настройки», а Prettier не работает. Попробуйте установить через эту командную строку. npm install --save-dev prettier

Как отформатировать код через плагин VScode ESlint

Хорошо, вместо того, чтобы давать руководство по использованию Расширение VScode Prettier, я лучше объясню, как полагаться на ESlint и иметь оба мира: проверка правильности вашего кода (ESlint), а затем его форматирование (Prettier).

В чем преимущества этого?

• не заставляя ваш вся команда использовать VScode с расширением Prettier, возможно, некоторые предпочитают Vim, IntelliJ Webstorm, Emacs и т.д.
• Я думаю, что линтинг вашего кода более важен, чем его форматирование, но если у вас одновременно работают оба расширения, у вас могут быть конфликты между форматированием и линтингом.
• ваше оборудование будет меньше бороться, если у вас работает меньше расширений (в основном потому, что это может остановить конфликты)
• использование комбинации ESlint + Prettier избавит от необходимости иметь определенную личную конфигурацию, помимо кодовой базы (не отслеживается). Вы также выиграете от наличия специальных правил ESlint для Vue / Nuxt и более простой / универсальной конфигурации.
• конфигурацию ESlint можно настроить для запуска перед фиксацией, в CI / CD или где-нибудь еще.

Как добиться такой настройки?

Начнем сначала с установки Расширение ESlint и только его, НЕ НАДО установим Prettier.

Еще не установлен Ветур?

Я настоятельно рекомендую его для приложений Vue2 (то, что Nuxt работает на сегодняшний день), вы можете найти его ниже. Это позволит быстро и просто ESlint (+ Prettier) любые файлы .vue.

Когда это будет сделано, войдите в Command Palette с помощью ctrl + shift + p (Windows / Linux) или cmd + shift + p (Mac) и введите Preferences: Open Default Settings (JSON).

Там у вас должно получиться что-то вроде этого

{
  "workbench.colorTheme": "Solarized Dark", // example of some of your own configuration

  "editor.codeActionsOnSave": {
    "source.fixAll": true,
  },
  "eslint.options": {
    "extensions": [
      ".html",
      ".js",
      ".vue",
      ".jsx",
    ]
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "html",
    "vue",
  ],
}

Как убедиться, что ваша конфигурация теперь работает?

Чтобы проверить, работает ли мое решение, загрузите этот Репозиторий Github, получите последнюю стабильную версию Node (например, 14) и запустите yarn, чтобы она заработала. В противном случае просто откройте VScode.
Это репо также можно использовать для двойной проверки правильности настройки вашего репозитория, просмотрев там мои файлы!

Затем вы можете получить доступ к любому файлу .js или .vue и увидеть там проблемы (палитра команд: Problems: Focus on Problems View). nuxt.config.js и /pages/index.vue - хорошие примеры, вот файл index.vue.

Вы можете видеть, что у нас есть несколько вещей, которые можно исправить с помощью Prettier, но у нас также есть ошибка eslint(vue/require-v-for-key). Решение доступно в виде комментария чуть ниже, кстати.

PS: если вы хотите иметь встроенные предупреждения / ошибки ESlint, как на скриншоте, вы можете установить Линза ошибки, это потрясающее расширение, если вы хотите избавиться от ошибок.

Сохраните этот файл, и вы должны увидеть, что все автоматически исправляемые вещи сделаны за вас. Обычно это в основном проблемы с Prettier, но иногда это также может быть ESlint. Поскольку у нас есть правила ESlint от Nuxt, вы также получите несколько хороших практик прямо из коробки!

Тада, работает! Если нет, прочтите раздел в конце моего ответа.

Если вы хотите создать новый проект

Вы можете запустить npx create-nuxt-app my-super-awesome-project и выбрать там несколько вещей, наиболее важным из которых, конечно же, является Linting tools: Eslint + Prettier (нажмите пробел, чтобы выбрать одну из них).

Предупреждение: на сегодняшний день необходимо сделать дополнительный шаг, чтобы ESlint + Prettier работал правильно, как показано в этом Проблема с Github. Исправление должно быть выпущено довольно скоро, тогда приведенная ниже конфигурация больше не понадобится!

Чтобы исправить это, запустите yarn add -D eslint-plugin-prettier и дважды проверьте, что ваш файл .eslintrc.js выглядит следующим образом

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  parserOptions: {
    parser: '@babel/eslint-parser',
    requireConfigFile: false
  },
  extends: [
    '@nuxtjs',
    'plugin:prettier/recommended', // this line was updated
    'prettier'
  ],
  plugins: [
  ],
  // add your custom rules here
  rules: {}
}

Затем вы можете заставить его работать нормально, как указано выше. Сохраните файл, и он должен запустить ESlint, а затем Prettier один за другим!

Если у вас все еще есть проблемы

• попробуйте снова использовать Command Palette и ESLINT: restart ESLint Server или даже Developer: Reload Window
• не стесняйтесь оставлять комментарий или свяжитесь со мной, если вам нужна помощь