Question

我开始讨厌.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等文件，一切都很好。除了.vue

基本上，我正在寻找的是这一行设置能够正常工作： “ vetur.format.defaultFormatter.html”：“ vscode.html-语言功能”

在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的起点。您可以在那里选择格式化程序。但是您不能选择格式化程序中内置的VScode。它只是忽略了该设置。

请问有人可以帮忙解决或避免这个问题，以便我进行自动格式化并保留空的换行符和换行符吗？

Answer 1

仅通过告诉VScode（在右下角），. vue文件应被格式化为HTML，我就可以使格式化完全适合HTML，JS和CSS部分，但是现在我丢失了Vue语法高亮显示

不知道该如何找回。

这是一个问题。 How to tell VScode to format file-type A as file-type B, while preserving syntax highlighting?

在VScode中格式化.vue文件时，如何保留空行？

1 个答案: