如何消除VS Code中调用Bootstrap 3代码片段时生成的多余空行

嘿，我之前也碰到过这个烦人的问题——每次调用BS3的代码片段，都会多出上下空行，看着绿色标记的空白区域特别闹心。别担心，有两种靠谱的解决办法，你可以根据自己的需求选：

方法一：直接修改扩展自带的代码片段文件 #

如果不想折腾自定义片段，直接改扩展的源文件最快：

• 打开VS Code的命令面板（快捷键Ctrl+Shift+P或者Cmd+Shift+P），输入Extensions: Show Installed Extensions，找到你正在用的Bootstrap 3代码片段扩展（比如常见的「Bootstrap 3 Snippets」）。
• 右键点击这个扩展，选择「Open Extension Folder」，进入扩展的安装目录。
• 在目录里找到snippets文件夹，打开对应的HTML代码片段文件（一般是bootstrap3.json或者类似命名的文件）。
• 找到你常用的片段（比如container、row这些），你会看到片段的body数组里开头和结尾多了空字符串""——这些就是生成空行的元凶。把这些多余的空字符串删掉，保存文件就行。
  举个例子，原来的片段可能是这样：

  "Container": {
    "prefix": "container",
    "body": [
      "",
      "<div class=\"container\">",
      "  $0",
      "</div>",
      ""
    ],
    "description": "Bootstrap container"
  }
  

  修改后变成：

  "Container": {
    "prefix": "container",
    "body": [
      "<div class=\"container\">",
      "  $0",
      "</div>"
    ],
    "description": "Bootstrap container"
  }
  

• 重启VS Code，再调用片段的时候，那些讨厌的空行就消失了。不过要注意：如果以后扩展更新，你的修改可能会被覆盖，记得备份一下修改后的文件。

方法二：自定义用户代码片段（推荐，避免更新丢失） #

如果不想动扩展的源文件，自定义用户片段更稳妥，相当于用自己的版本覆盖扩展的片段：

• 打开命令面板，输入Preferences: Configure User Snippets，然后选择html.json（因为BS3片段都是HTML相关的）。
• 在打开的JSON文件里，添加你想要修改的片段，把prefix设置成和扩展一样的关键词，这样输入的时候你的自定义片段会优先显示。比如：

  "Bootstrap 3 Container (Clean)": {
    "prefix": "container",
    "body": [
      "<div class=\"container\">",
      "  $0",
      "</div>"
    ],
    "description": "Bootstrap container without extra empty lines"
  }
  

• 保存文件后，下次输入container，你的自定义片段就会出现在提示列表里，选它就不会生成空行了。如果要处理多个片段，就把每个需要修改的都按这个格式加进去就行。

另外，如果你所有BS3片段都有这个问题，也可以批量替换扩展片段文件里的多余空行——用编辑器的全局替换功能，把, ""（注意前后的逗号和空格）替换掉，就能一次性搞定所有片段。

内容的提问来源于stack exchange，提问作者Huong Nguyen