Prettier & Beautify

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 价值 200 美元的免费积分!

哇,多么可爱的博客文章标题,对吧?

Prettier 是一个“有主见的代码格式化工具”。我强烈建议您使用它。他们有一份 文档 更深入地介绍了原因,但他们的三个营销要点最能说明问题

  • 您按下保存键,代码就会被格式化
  • 无需在代码审查中讨论样式
  • 节省您的时间和精力

但 Prettier 并非支持所有语言。尤其是 HTML。 它在 JSX 上非常出色,我真的很习惯喜欢它。但是当我切换到 Rails .erb 模板或 WordPress 网站,在那里我正在编辑 .php 文件,甚至是一个普通的 .html 文件时...... 就没有 Prettier 了。

他们有 一个针对它的开发分支,但我还没有尝试过。目前,我不得不尝试一个在野外和经过考验的 HTML 美化工具。VS Code 插件 Beautify 可以做到,并且拥有 650 万次安装,所以这似乎是个不错的选择。

通过使用此插件,这意味着您可以配置它,而不是使用 VS Code 的内部版本,该版本显然不可配置。

问题是......

我第一次尝试这样做时,发现它导致我的 Prettier 停止工作。这对我是不可接受的,因为我希望 Prettier 成为首要的格式化工具。我不确定它是否同时运行两者,或者是在它自己运行 Beautify 的情况下将 Prettier 放到最后,或者到底是什么,但我当时无法弄清楚。

对我的诀窍是告诉它只关心某些文件类型!

在我的 settings.json

{
 ...

  "beautify.language": {
    "html": ["html", "php", "erb"],
    "css": [],
    "js": []
  }
}

现在我可以让 Prettier 处理所有它支持的语言,并对 Prettier 尚未支持的 HTML 内容使用 Beautify。到目前为止一切顺利。