Visual studio code prettier не работает

Почему Prettier не форматирует код в VSCODE?

В моем приложении Nuxt, где установлены и включены ESlint и Prettier,я переключился на редактор кода Visual Studio.

Когда я открываю файл .vue, нажимаю CMD + Shift + P и выбираю формат документа, мой файл вообще не форматируется.

Мой .prettierrc параметры:

У меня так много строк исходного кода, что я не могу отформатировать их вручную. Что я делаю не так?

Ответы — Почему Prettier не форматирует код в VSCODE? / Why Prettier does not format code in VSCODE?

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

красивее.disableLanguages (по умолчанию: [«Вью»])

Список идентификаторов языков, на которых можно отключить это расширение. Требуется перезагрузка. Примечание: отключение языка, включенного в родительской папке, предотвратит форматирование вместо запуска любого другого средства форматирования

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

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

можете ли вы попробовать добавить этот раздел в файл настроек пользователя?

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

Проверьте этот путь, если здесь присутствуют файлы или папка пуста

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

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

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

Красивее может также формат файлов при сохранении.

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

Вы должны проверить «формат сохранить» в 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.
• по умолчанию выберите Editor: Format on Save 0.

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

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

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

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

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

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

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

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

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

Сообщение об ошибке было замечено, когда я нажал на эту кнопку:

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

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

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

Источник

Форматирование кода с помощью Prettier в Visual Studio Code

Published on November 2, 2020

Введение

Согласованное форматирование кода — сложная задача, но современные инструменты разработчиков позволяют автоматически обеспечивать согласованность базы кода вашей команды.

В этой статье мы настроим Prettier для автоматического форматирования кода в Visual Studio Code или VS Code.

Для демонстрации мы будем форматировать следующий код:

Если вы знакомы с форматированием кода, вы можете заметить некоторые упущения:

• Смесь одинарных и двойных кавычек.
• Первое свойство объекта person должно находиться в отдельной строке.
• Выражение консоли внутри функции должно быть выделено отступами.
• Вам могут понравиться или не понравиться необязательные скобки, в которые заключен параметр функции arrow.

Предварительные требования

Для прохождения этого учебного модуля вам нужно будет загрузить и установить Visual Studio Code.

Чтобы работать с Prettier в Visual Studio Code, вам потребуется установить расширение. Для этого выполните поиск инструмента Prettier — Code Formatter в панели расширений VS Code. Если вы устанавливаете его в первый раз, вы увидите кнопку install вместо кнопки uninstall, как показано здесь:

Шаг 1 — Использование команды форматирования документа

После установки расширения Prettier вы можете использовать его для форматирования вашего кода. Для начала выполним обзор, используя команду Format Document. Эта команда сделает ваш код более согласованным с отформатированными пробелами, переносами строк и кавычками.

Чтобы открыть палитру команд, вы можете использовать COMMAND + SHIFT + P в macOS или CTRL + SHIFT + P в Windows.

Выполните в палитре команд поиск по ключевому слову format и выберите Format Document.

Возможно, вам будет предложено выбрать формат для использования. Для этого нажмите кнопку Configure:

Затем выберите Prettier — Code Formatter.

Примечание. Если вы не видите диалога выбора формата по умолчанию, вы можете вручную изменить его в разделе «Настройки». Установите для Editor: Default Formatter значение ebsenp.prettier-vscode .

Теперь ваш код отформатирован с пробелами, переносами строк и единообразными кавычками:

Это работает и для файлов CSS. Вы можете превращать код с несогласованными отступами, скобками, разрывами строк и точками с запятой в хорошо отформатированный код. Например:

Будет переформатирован как:

Мы изучили эту команду, и теперь посмотрим, как можно реализовать ее автоматическое выполнение.

Шаг 2 — Форматирование кода при сохранении

До сих пор вам нужно было вручную запускать команды для форматирования кода. Чтобы автоматизировать этот процесс, вы можете выбрать в VS Code настройку, чтобы ваши файлы автоматически форматировались при сохранении. Это также гарантирует, что неформатированный код не попадет в систему контроля версий.

Чтобы изменить эту настройку, нажмите COMMAND + в macOS или CTRL + в Windows, чтобы открыть меню Settings (Настройки). Выполните в меню поиск Editor: Format On Save и убедитесь, что эта опция включена:

Теперь вы можете писать код как обычно, и он будет автоматически форматироваться при сохранении файла.

Шаг 3 — Изменение параметров конфигурации Prettier

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

Откройте меню Settings (Настройки). Выполните поиск Prettier. Вы увидите список всех параметров, которые вы можете изменить:

Вот несколько наиболее распространенных параметров:

• Single Quote — выберите, нужно ли использовать одинарные или двойные кавычки.
• Semi — выберите, нужно ли добавлять точку с запятой в конце строк.
• Tab Width — укажите, сколько пробелов должно вставляться при табуляции.

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

Шаг 4 — Создание файла конфигурации Prettier

Если вы измените настройки VS Code, у другого разработчика может оказаться совершенно иная конфигурация. Вы можете обеспечить единство форматирования в своей команде, создав файл конфигурации для вашего проекта.

Создайте новый файл .prettierrc. extension с одним из следующих расширений:

Вот пример простого файла конфигурации в формате JSON:

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

Заключение

Иметь согласованный код — очень хорошая практика. Это особенно полезно при работе над проектом с несколькими участниками. Согласование конфигурации делает код более удобочитаемым и понятным. Это позволяет уделить больше времени решению технических проблем, а не тратить время на исправление отступов.

Prettier обеспечивает согласованность форматирования кода и позволяет автоматизировать этот процесс.

Источник

Prettier not formatting HTML files in VS Code

Prettier extension on my VS code is unable to format HTML.

On load of VS code I am getting this error in my console —

On trying to format, I see this message in the bottom —

Note — TS files and SCSS files are being formatted properly. It is breaking only for HTML files.

Below is my HTML language based settings —

These are the extensions installed and enabled —

Prettier version — 2.2.2

VS Code version (from About VS code section) :

Please let me know how to get this issue fixed. Please leave a comment if any more info is needed. Thanks.

16 Answers 16

Same for me. I managed to solve it as follow:

This allowed me to use prettier globally and use built in html formatter for html. Also allowed the formatting to happen on save and while typing.

The part responsible for Prettier formatting html

I got the same issue, the cause can be updating the VS Code. fixed it by setting the Default Formatter of Text Editor

Go to Settings (Cntr+, for windows), search for ‘Default Formatter’

Set the formatter in dropdown (esbenp.prettier-vscode) for prettier. this can change if you are using any other formatter.

Firstly, you may want to solve the compilation error you have in regards to Vue.js. You may need to grab some extensions for VS-code as detailed here.

I have heard that Prettier has some issues formatting HTML at times, and VS Code itself already has HTML formatting support. You can stop prettier from formatting HTML specifically using the following command:

You could also change this line in your configs to enable VS code html language support instead.

Hope that helps!

For me i found that prettier was refusing to format files, however there was no errors in the output window in vs code. usually this happens when the html is not valid: missing tags, or tags closed twice, or tags that are not closed.

To see the errors, i ran prettier from the command line, and for each file it refused to format, it showed an error of what was wrong, like in the image below:

Short Answer:

1. open Prettier from the button on right bottom corner
2. scroll up to see error list.
3. fix the wrong semantic you wrote. ex: photo for error example

Long Answer: Most of the times the reason why Prettier doesn’t work is that you have a markup error.

ex: you haven’t close the angle braces or you close the tag more that one time to know the error and fix it : look at short answer.

If the formatting fails, see if there are any errors in the Prettier console. If not, use the following settings:

Once the file has been formatted, put back the original settings:

And try formatting again. This time Prettier will have better input to work with.

The requirePragma option should be false (it is by default) in .prettierrc or VS code prettier settings (dotfile overrides VS).

This is what worked for me.

In the settings.json, capitalize the h in [html] :

I had a lot of problems with getting Prettier to format on save. It turned out to be an issue with the default timeout settings in VSCode. Using these settings finally worked for me:

For reference, here are all my settings concerning linting and formatting:

I use the following extensions (again limited to linting/formatting):

• ESLint (dbaeumer.vscode-eslint)
• Prettier (esbenp.prettier-vscode)
• stylelint-plus (hex-ci.stylelint-plus)
• HTMLHint (mkaufman.htmlhint)

You might want to make sure that all the npm packages needed by your extensions are installed. Locally if possible.

I sincerely hope this helps. Setting up linters and formatters is still a science in its own right.

Источник