Как переформатировать компонент Vue.js в vscode?

Question

Я использую код Visual Studio для кодирования компонента Vue.js и мне нужно переформатировать код этого компонента.

Я не нашел никакого встроенного, и первый выбор для плагина был vue-buetify который сообщает после установки, что

В расширении много ошибок, пожалуйста, не используйте его, лучший выбор - vetur

Затем я попробовал Vetur, установив его, но нет места, где я вижу возможность украсить код, находящийся в данный момент в редакторе. Команда Shift + Alt + F не действует.

Как на самом деле украсить (переформатировать) код для компонента Vue?

Answer 1

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

Используйте расширения vetur и красивее (в частности, esbenp.prettier-vscode Красивее - кодировщик форматирования). (Вы получаете эти предустановленные Vue.js Extension Pack esbenp.prettier-vscodeи другие.)

Vetur является (текущим) обязательным инструментом по умолчанию для vue. Не принимайте замены.

Prettier не поддерживает файлы.vue как таковые, поэтому тип файла по умолчанию отключен: https://github.com/prettier/prettier-vscode/issues/338.

Но Vetur понимает его ограничения и вместо этого делегирует форматирование отдельных разделов файла.vue потенциально другому форматеру. По умолчанию, однако, он делегирует все, кроме разделов HTML, Prettier. https://vuejs.github.io/vetur/formatting.html. Отключает форматирование для разделов HTML.

Разработчики Vetur не работают с js-beautify-html, хотя он все еще работает: https://vuejs.github.io/vetur/formatting.html. И они не дают альтернативных рекомендаций в настоящее время.

Более красивая поддержка HTML, которая была бы очевидным выбором, если бы она существовала, - длинная и грустная история. В настоящее время (май 2018 года) более симпатично форматирует HTML как JSX. Упоминаются многие тонкости, но одна проблема, которую я понял, заключается в том, что JSX преобразует начальные / пустые / конечные теги в пустые теги, например, в. Судя по всему React и (я полагаю) Vue, это не нравится, поэтому vetur отключает Prettier для HTML.

Поэтому я собираюсь включить js-beautify-html в настройках vetur, надеясь на лучшее и не отрывая глаз. Но я настолько поверхностный кодер, что никогда не опрокину его известные проблемы.

Answer 2

если вы установили расширение Vetur на vscode,

1. Перейдите в область расширения vsCode.
2. Найдите Vetur и выберите значок шестеренки, чтобы войти в настройки Vture.
3. Прокрутите вниз, пока не найдете

       Vetur › Format › Default Formatter: JS
Default formatter for <script> region

4. Выбирать pretter-eslintиз раскрывающегося меню.(если вы не видите эту опцию, вы можете ввести pretter расширение.
5. теперь вы можете видеть, как он автоматически форматирует ваш код всякий раз, когда вы сохраняете.

Answer 3

В 2022 году ситуация с форматированием файлов Vue, упомянутых в другом ответе, значительно улучшилась.

Vetur по-прежнему является де-факто решением для управления .vueфайлы в VS Code, но с тех пор, как был задан этот вопрос, Prettier добавил для них полную поддержку (и собственно HTML). Это означает, что вы можете отформатировать их с помощью Prettier без Vetur, если хотите.

Обратите внимание, что Vetur не поддерживает функцию «Выбор формата» VS Code, хотя Prettier поддерживает (для небольшого набора языков ):

Vetur имеет только «программу форматирования всего документа» и не может форматировать произвольные диапазоны. В результате Format Documentдоступна только команда. Команда Format Selectionне работает.

Если вы решите использовать Vetur, вам не понадобятся никакие другие расширения для работы форматирования, так как расширение поставляется в комплекте со всеми доступными модулями форматирования . Пока у вас установлено и включено расширение, форматирование с помощью команды «Форматировать документ» или Shift+ Alt+ Fдолжно работать «из коробки».

Настройки Vetur позволяют пользователю настроить, какие из его доступных средств форматирования используются для каждого поддерживаемого языка (Prettier используется по умолчанию для всех, кроме Sass и Stylus). Средства форматирования также можно отключить для каждого языка или полностью, если вместо этого вы предпочитаете использовать какое-либо другое решение для форматирования.