Js-beautify 在 css 规则附近包装内联注释

Question

当我尝试格式化我的 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;
}

实际产量

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

.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 家庭版 6/03/2020 18363.720

---

设置

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

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

Answer 1

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

在我的gulpfile.js我写了（谢谢你gulpfile.js -replace ！）：

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

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

希望有帮助！

---