Prettier code formatter не работает

Почему 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 не форматирует код в VSCODE?

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

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

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

11 ответов

Я уже некоторое время использую prettier в vscode, но недавно он перестал работать, и я не уверен, что это ошибка на их стороне или моя неправильная конфигурация. [INFO — 02:54:03] Loaded module ‘prettier@1.19.1’ from ‘/Users/paulrberg/.nvm/versions/node/v10.17.0/lib/node_modules/prettier’ [INFO -.

Честно говоря, я не могу понять документацию или что-то упускаю. Это сводит меня с ума Шаги, которые я сделал: Установлено VSCode Установлен более симпатичный плагин Открыл просто проект с парой файлов (html, css) Установленный stylelint с npm install —save-dev stylelint Установленный.

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

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

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

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

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

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

Вы должны проверить «format on Save» в VSCode: настройка >> пользователь >> текстовый редактор >> форматирование

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

Я не использую 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 , было недостаточно. Мне нужно было выбрать форматирование по умолчанию, используя описанные выше шаги, чтобы это сработало.

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

prettier.disableLanguages (по умолчанию: [«vue»])

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

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

Я хотел бы использовать Prettier для форматирования моего кода ‘on save’, но я изо всех сил пытаюсь настроить его. Вот шаги, которые я предпринял:: установлено красивее в мире, а пакет узлом, используя npm install -g prettier . установлен красивее, как расширение VS Code. В VSCode я зашел в Файл >.

Я создал новое приложение nuxt с помощью npx create-nuxt-app

и решил использовать eslint и prettier. Я открыл каталог проекта с помощью vscode и установил форматер ESLint и Prettier-Code, а также расширения Vetur. Когда я сохраняю файл .vue , vscode форматирует код, но таким.

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

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

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

Включение «format on Save» в VSCode: настройка >> пользователь >> текстовый редактор >> форматирование сработало для меня!

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

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

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

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

Я откатился красивее к 1.7.3 и исправил его

Похожие вопросы:

Я использую eslint с VSCode 1.18.1 и расширением prettier/prettier 0.26.0 для VSCode. В моей конфигурации VSCode у меня есть prettier.eslintIntegration: true, . Моя зависимостей использовали, чтобы.

Какова переменная настройки, чтобы отключить это или если вы знаете, почему Prettier-Javascript форматирует код, но некоторые строки все еще помечены цветом, как здесь У меня есть только.

Иногда, когда я запускаю VSCode и сохраняю файл JS, все портится. пример От: к: сохранить Что я выяснил: Когда я изменяю пользовательскую настройку VSCode (что-то связанное с более красивым плагином.

Я уже некоторое время использую prettier в vscode, но недавно он перестал работать, и я не уверен, что это ошибка на их стороне или моя неправильная конфигурация. [INFO — 02:54:03] Loaded module.

Честно говоря, я не могу понять документацию или что-то упускаю. Это сводит меня с ума Шаги, которые я сделал: Установлено VSCode Установлен более симпатичный плагин Открыл просто проект с парой.

Я хотел бы использовать Prettier для форматирования моего кода ‘on save’, но я изо всех сил пытаюсь настроить его. Вот шаги, которые я предпринял:: установлено красивее в мире, а пакет узлом.

Я создал новое приложение nuxt с помощью npx create-nuxt-app

и решил использовать eslint и prettier. Я открыл каталог проекта с помощью vscode и установил форматер ESLint и.

Настройка: новый vue-cli 3.0 проект w/ Typescript, ESlint Активные плагины в VSCode: Vetur, Prettier Я проверил все настройки, которые смог найти, и экспериментировал взад и вперед, но не смог.

Фон: Я использую расширение Prettier — Code formatter для VSCode для автоматического форматирования моего кода при сохранении. Проблема: Я привык писать однострочные блоки в своих файлах sass (где.

Источник