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

Posted 2023-02-22

【中文标题】在 VScode 中格式化 .vue 文件时如何保留空行？

【英文标题】：How to preserve empty lines when formatting .vue files in VScode?

【发布时间】：2020-07-10 19:23:50

【问题描述】：

我开始讨厌 .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-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 的开始位置。你可以在那里选择你的格式化程序。但是您不能选择内置格式化程序的 VScode。它只是忽略了该设置。

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

【问题讨论】：

那种意大利面条式机器代码的恐怖看起来非常地道和不错的 IMO，而大多数人会认为你过多的空格是罪犯。我认为你的方向错了，为什么不适应你可能随处可见的代码风格呢？这不是 Vue 的错。

没有没有。这不是任何人的错。我知道，这是故意这样做的。只是让我花更多的时间来理解我在看什么。我喜欢将我的代码按功能划分为整齐的代码块。 （无论如何，webpack 和 babel 都将其全部编译在一条线上以用于生产。这仅用于开发部分）。非常感谢任何帮助。

尝试将 VS 代码的设置 formatOnSave 设置为 false。它会告诉你更改是由 VS 代码还是由 vue-cli/eslint 进行的。

我刚刚意识到同样的事情。谢谢！我意识到我正在寻找的是让它工作：“vetur.format.defaultFormatter.html”：“vscode.html-language-features”但是Vetur，只是忽略了这个设置。你有没有成功地让它发挥作用？

Vetur 基本上是一个扩展，它知道 vue 文件中 html 的结束位置和 js/css 的开始位置。对于每个部分，您都可以选择一个格式化程序。但它不允许选择默认的 vs 代码格式化程序。是否有另一种 html 格式化程序，其工作方式与内置的 vs 代码完全一样，您可以在这些 Vetur 设置中选择？

【参考方案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?