Не работает format on save vs code

Почему 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

Источник

Formatters are hanging when trying to format on save #105026

Comments

drewgbarnes commented Aug 19, 2020 •

When I go to save any *.jsx, *.js, or *.py file, a notification appears like:

Saving ‘blah.jsx’: Running ‘Prettier — Code formatter’ Formatter (configure).

and never goes away. the file does not save. If I wait long enough, VSCode entirely hangs and I cannot interact with it

VS Code version: Code 1.48.0 (db40434, 2020-08-13T08:03:27.059Z)
OS version: Darwin x64 19.6.0

System Info

Item	Value
CPUs	Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz (12 x 2900)
GPU Status	2d_canvas: enabled flash_3d: enabled flash_stage3d: enabled flash_stage3d_baseline: enabled gpu_compositing: enabled metal: disabled_off multiple_raster_threads: enabled_on oop_rasterization: disabled_off protected_video_decode: unavailable_off rasterization: enabled skia_renderer: disabled_off_ok video_decode: enabled viz_display_compositor: enabled_on viz_hit_test_surface_layer: disabled_off_ok webgl: enabled webgl2: enabled
Load (avg)	9, 14, 24
Memory (System)	32.00GB (1.13GB free)
Process Argv
Screen Reader	no
VM	0%

Extensions (12)

Extension	Author (truncated)	Version
vscode-eslint	dba	2.1.8
gitlens	eam	10.2.2
prettier-vscode	esb	5.1.3
flow-for-vscode	flo	1.5.0
auto-close-tag	for	0.5.8
vscode-github	Kni	0.30.3
vscode-docker	ms-	1.5.0
python	ms-	2020.8.101144
sublime-keybindings	ms-	4.0.7
vscode-extension-auto-import	Nuc	1.4.3
alphabetical-sorter	ue	2.0.1
change-case	wma	1.0.0

The text was updated successfully, but these errors were encountered:

Источник

Форматирование кода с помощью 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 обеспечивает согласованность форматирования кода и позволяет автоматизировать этот процесс.

Источник