VS Code Beautify插件：如何让LESS文件的//注释保持在单独行

嘿，这个问题我之前也踩过坑！当时用Beautify格式化LESS的时候，行注释老是被挤到上一行，折腾了几下终于找到了解决方案，你可以试试这几个方法：

方法一：通过VSCode可视化设置调整 #

• 打开VSCode的设置面板：按下Ctrl+,（Windows/Linux）或者Cmd+,（Mac）
• 在顶部搜索框输入「Beautify LESS」，筛选出针对LESS的格式化配置
• 找到Preserve Newlines选项并勾选，确保换行被保留；如果能找到Comment Position，直接设置为「Own Line」，强制行注释留在单独一行

方法二：手动编辑settings.json全局配置 #

如果可视化设置里找不到对应的选项，直接改配置文件更直接：

• 按下Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac），输入「Open Settings (JSON)」并打开配置文件
• 在JSON对象中添加以下配置（如果已有beautify.config，直接合并LESS相关的设置即可）：

"beautify.config": {
  "less": {
    "preserve_newlines": true,
    "comment_position": "ownLine",
    "max_preserve_newlines": 1
  }
}

• 保存配置后，重新格式化LESS文件试试，注释应该就能留在单独行了

方法三：项目级配置（推荐） #

如果不想改动全局设置，只针对当前项目生效，可以在项目根目录创建一个.jsbeautifyrc文件：

• 在项目根目录新建文件，命名为.jsbeautifyrc
• 写入以下内容：

{
  "less": {
    "preserve_newlines": true,
    "comment_position": "ownLine",
    "max_preserve_newlines": 1
  }
}

• 保存后，这个项目里的LESS文件格式化时就会遵循这个规则，不会影响其他项目

小测试 #

你可以用这段简单的LESS代码测试效果：

.header {
  // 这是一个测试行注释
  color: #ff0000;
  font-size: 16px;
}

正常格式化后，注释应该会保持在单独一行，不会和上一行或下一行代码合并。

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