js-beautify在css规则中包装内联注释答案

【问题标题】：Js-beautify wrap inline comments near css rulesjs-beautify在css规则中包装内联注释
【发布时间】：2023-03-08 19:23:01
【问题描述】：

当我尝试格式化我的 scss 代码库时，js beautify 有一个小问题。

输入

美化前的代码是这样的：

.hero-about {
  background: linear-gradient(rgba(0, 0, 0, .4),
      rgba(0, 0, 0, .6)), url("../../images/backgrounds/team.png") center/cover; /* 1 */
  height: .1rem; /* 2 */
  min-height: 100vh;
}

预期输出

美化后的代码应该是这样的（相同）：

.hero-about {
  background: linear-gradient(rgba(0, 0, 0, .4),
      rgba(0, 0, 0, .6)), url("../../images/backgrounds/team.png") center/cover; /* 1 */
  height: .1rem; /* 2 */
  min-height: 100vh;
}

实际输出

美化后的代码实际上是这样的，你可以注意到beautify包装了内联的cmets，显然我不想要这种丑陋的行为。

.hero-about {
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6)), url("../../images/backgrounds/team.png") center/cover;
  /* 1 */
  height: .1rem;
  /* 2 */
  min-height: 100vh;
}

复制步骤

只需复制css代码，尝试运行js-beautify 无需配置。

环境

操作系统：Windows 10 家庭版 2020 年 6 月 3 日 18363.720

设置

{
   "indent_size": 2, 
"end_with_new_line": true
}

请注意：这种丑陋的行为独立于配置文件，您可以通过任何配置注意到它。

【问题讨论】：

标签： html css js-beautify

【解决方案1】：

好的，我猜到了一个小的解决方法。

我在我的gulpfile.js 中写道（谢谢gulp-replace！）：

.pipe(replace(";\n /* ", "; /* "))

这个，在 SCSS gulp 编译期间，将修复由 js-beautify 引起的问题。它将用“”（空格）替换“\n”（换行符）。

希望对您有所帮助！

【讨论】：