Как заставить VScode отформатировать тип файла A как тип файла B, сохранив подсветку синтаксиса? - PullRequest
Новая
       46

Как заставить VScode отформатировать тип файла A как тип файла B, сохранив подсветку синтаксиса?

4 голосов
/ 31 марта 2020

У меня была такая проблема: Как сохранить пустые строки при форматировании. vue файлы в VScode?

Я решил ее, сказав VScode (нижний правый угол), что a. * Файл 1034 * должен быть отформатирован как файл. html.

Это устранило проблему форматирования, но я потерял подсветку синтаксиса для атрибутов vue в тегах html.

I необходимо получить VScode для форматирования типа файла. vue как. html при сохранении подсветки синтаксиса.

Как это можно сделать?

Подсветка синтаксиса для. vue происходит из расширений.

Я пробовал расширение Vetur и расширение vue -beautify. Они выделили синтаксис, но неправильно отформатировали файл. vue (по крайней мере, для меня)

In попытался добавить следующую строку в глобальные настройки VScode. json

{
    "[vue]": {
        "editor.defaultFormatter": "vscode.html-language-features"
    }
}

Но это не сработало для них обоих.

Vetur просто проигнорировал настройку и отформатировал. vue файл, следуя правилам Преттиер. (который нельзя изменить в настройках Vetur)

Пока с vue -beautify выкинуло, что для файлов. vue не установлен форматер. Хотя я явно указал, что хочу использовать сборку в HTML форматере.

Как заставить VScode использовать встроенный HTML форматер для файлов. vue, при этом все еще используя все остальные из тех функций, которые предоставляют "Vetur" или "vue -beautify"?

ИЛИ

Как я могу сказать "Vetur" или "vue -украсить" модуль расширений "Prettier- html", чтобы сохранить пустые символы новой строки?

ОБНОВЛЕНИЕ: - попытался "unibeautify" .. но не поддерживается функция "preserve-max-newlines" для vue - и "beautify" - вообще не поддерживается vue. - и "pretier" - нет поддержки "preserve-max-newlines" для vue

1 Ответ

3 голосов
/ 13 апреля 2020

Vetur в настоящее время не поддерживает переключение на встроенный форматер HTML, но вы можете запросить это как новую функцию в проблемах Vetur .

, начиная с root Кажется, проблема заключается в разрушении новых строк, я предлагаю различные решения, которые решают только эту проблему:

  • Переключите форматер Vetur HTML на js-beautify-html и настройте его для сохранения новых строк
  • Окружите символы новой строки комментариями игнорирования
  • Отключите HTML форматирование Vetur

Вариант 1: используйте js-beautify-html

В настройках VS Code установите Vetur's HTML от форматера до js-beautify-html:

imagejs-beautify-html">

Затем в settings.json ( Выберите Preferences: Open settings (JSON) из команды palette ), добавьте блок JSON, показанный ниже. Ключ должен установить max_preserve_newlines на большое число, которое позволяет желаемое количество новых строк. 

"vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
        "max_preserve_newlines": 10000, // Maximum number of line breaks to be preserved in one chunk (0 disables)
        "preserve_newlines": true // Whether existing line breaks before elements should be preserved
    }
}

Вариант 2: Используйте ignore-comments

Преимущества ignore-comments:

  • Отключение средства форматирования / подстилки при одновременном документировании преднамеренного пробела, что важно для читателей / сопровождающих
  • Может быть легко включено / отключено для каждого раздела кода

Форматером HTML по умолчанию для Vetur является prettyhtml, который внутренне использует prettier, так что вы можете использовать ignore-comments Преттиера *1050*: 

<div>
<!-- prettier-ignore-start -->



<!-- prettier-ignore-end -->
    <div>foo</div>
    <div>bar</div>
</div>

Если вы переключите форматер HTML js-beautify-html, используйте соответствующие ignore-comments : 

<div>
<!-- beautify ignore:start -->



<!-- beautify ignore:end -->
    <div>foo</div>
    <div>bar</div>
</div>

Вариант 3: Отключите HTML форматирование Vetur

Установите для форматера HTML Vetur значение none в настройках отключит форматер для HTML разделов в *.vue файлах. Хотя это устраняет нежелательное форматирование сворачивающихся строк новой строки, оно имеет очевидный побочный эффект - отключение форматирования all в шаблонах Vue, что может быть приемлемо для вашего использования.

...