1

当我尝试格式化我的 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 no configuration is needed。

环境

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

设置

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

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

4

1 回答 1

0

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

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

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

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

希望对您有所帮助！

于 2020-11-04T08:58:43.950 回答