Как сохранить пустые строки при форматировании. vue файлов в VScode? - PullRequest
0 голосов
/ 30 марта 2020

Я начинаю ненавидеть. vue как основу, потому что все форматеры VScode, которые я пробовал, удаляют пустые строки.

Все круто и хорошо со всем, кроме удаления пустых строк.

Вся моя тяжелая работа по разделению блоков кода с пустыми строками просто удаляется каждый раз, когда я автоматически форматирую с помощью Shift + Alt + F.

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

Когда я пишу:

    <div class="ui attached segment">





      <div class="ui grid">

        <div class="row">

          <div class="column eight wide computer sixteen wide tablet">

            <div>
              <div class="badge-wrapper">


                <discount-tag v-bind:item="item">
                </discount-tag>

                <div v-for="badge in item.badges" class="ui labels">

                  <a
                    class="ui label"
                    :style="{ backgroundColor: '#'+badge.color, color: '#fff'}"
                  >{{badge.label}}
                  </a>


                </div>
              </div>




            </div>

            <g-zoom :item="item"></g-zoom>

          </div>





          <div class="column eight wide computer sixteen wide tablet">

            <h1>{{ item.goods_name }}</h1>

            <p>{{ item.description }}</p>

Я ожидаю сохранения разрывов строк и новых строк , но вместо этого он включается в этот машинный код :

    <div class="ui attached segment">
      <div class="ui grid">
        <div class="row">
          <div class="column eight wide computer sixteen wide tablet">
            <div>
              <div class="badge-wrapper">
                <discount-tag v-bind:item="item"></discount-tag>
                <div v-for="badge in item.badges" class="ui labels">
                  <a
                    class="ui label"
                    :style="{ backgroundColor: '#'+badge.color, color: '#fff'}"
                  >{{badge.label}}</a>
                </div>
              </div>
            </div>
            <g-zoom :item="item"></g-zoom>
          </div>
          <div class="column eight wide computer sixteen wide tablet">
            <h1>{{ item.goods_name }}</h1>
            <p>{{ item.description }}</p>

Для .jsx,. js,. html,. php, .env, et c. файлы это все хорошо. За исключением. vue

По сути, я ищу эту строку настройки для работы: "vetur.format.defaultFormatter. html": "vscode. html -language-features"

в пользовательских настройках VScode

{
    "window.zoomLevel": -3,
    "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "vetur.format.defaultFormatter.html": "vscode.html-language-features",
    "[javascript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "[css]": {
        "editor.defaultFormatter": "aeschli.vscode-css-formatter"
    },
    "[html]": {
        "editor.defaultFormatter": "vscode.html-language-features"
    },
    "[vue]": {
        "editor.defaultFormatter": "octref.vetur"
    },
}

Расширения Vetur - это, в основном, вещи, которые знают, где заканчивается html и начинается js / css. И вы можете выбрать свой форматер там. Но вы не можете выбрать VS-коды, встроенные в форматтер. Он просто игнорирует этот параметр.

Может ли кто-нибудь, пожалуйста, помогите исправить или обойти эту проблему, чтобы у меня было автоформатирование и сохранение пустых строк и разрывов строк?

1 Ответ

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

Я получил форматирование для идеальной работы для HTML, JS и CSS, просто сказав VScode (в правом нижнем углу), что файл. vue должен быть отформатирован как HTML, но теперь я потерял подсветку синтаксиса Vue.

Не знаю, как это вернуть.

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

...