如何在VSCode中格式化Handlebars模板？配置handlebars-formatter的步骤

安装handlebars-formatter扩展并配置vscode设置，可实现Handlebars模板自动格式化，关键步骤包括设置默认格式化器、关联文件类型及启用保存时格式化。

在VSCode里格式化Handlebars模板，核心其实就两步：安装一个能理解Handlebars语法的格式化扩展，然后告诉VSCode默认用它来处理你的

.hbs

或

.handlebars

文件。具体到

handlebars-formatter

，它就是那个扩展，你得把它装上，再稍微调整一下VSCode的设置。

解决方案

说实话，每次我遇到一个新语言或者模板引擎，第一件事就是找它的格式化工具。代码整洁度直接影响心情和效率，尤其是团队协作的时候。对于Handlebars，

handlebars-formatter

确实是一个不错的选择，它的配置过程也挺直接的。

首先，你得把这个扩展请进你的VSCode。打开VSCode，按下

Ctrl+Shift+X

（或者点击左侧的Extensions图标），在搜索框里输入

handlebars-formatter

，找到它，然后点击“Install”。这步很简单，就像给VSCode装了个新功能模块。

安装完扩展，下一步就是告诉VSCode，当你打开

.hbs

或者

.handlebars

文件时，请用这个新装的

handlebars-formatter

来处理。这通常需要在你的VSCode设置里做文章。

你可以通过两种方式来修改设置：

1. 用户设置 (User Settings)：这会影响你所有VSCode项目。
2. 工作区设置 (Workspace Settings)：这只会影响当前项目，更推荐，因为不同项目可能有不同的格式化偏好。在项目根目录下的

   .vscode

   文件夹里，创建一个

   settings.JSon

   文件（如果还没有的话）。

在

settings.json

中，你需要添加或修改以下内容：

{     // 设置默认的格式化器为 handlebars-formatter     "editor.defaultFormatter": "Glavin001.vscode-handlebars-formatter",      // 明确告诉VSCode，对于Handlebars文件，使用这个格式化器     // 这里的"handlebars"是语言ID，确保它能被正确识别     "[handlebars]": {         "editor.defaultFormatter": "Glavin001.vscode-handlebars-formatter"     },      // 这一行也很关键，确保在保存文件时自动格式化     "editor.formatOnSave": true,      // 如果你有自定义的文件关联，比如你的Handlebars文件后缀是.tpl     // 可以这样添加，但通常.hbs或.handlebars就够了     "files.associations": {         "*.hbs": "handlebars",         "*.handlebars": "handlebars"         // "*.tpl": "handlebars" // 示例，如果你的模板是.tpl     } }

这些配置做了几件事：

• "editor.defaultFormatter": "Glavin001.vscode-handlebars-formatter"

  ：全局设置默认格式化器。

• "[handlebars]": { "editor.defaultFormatter": "Glavin001.vscode-handlebars-formatter" }

  ：更具体地为Handlebars语言模式指定格式化器，这能避免与其他语言的冲突。

• "editor.formatOnSave": true

  ：这是我个人觉得最方便的设置，每次保存文件，它就自动帮你格式化了，省去了手动操作的麻烦。

• "files.associations"

  ：确保VSCode能把

  .hbs

  和

  .handlebars

  文件识别为Handlebars语言模式。有时候，如果VSCode不清楚某个文件是什么类型，格式化器就无从下手。

配置完成后，打开一个

.hbs

文件，随便改动一下，然后保存。如果一切顺利，你会看到代码自动变得整齐划一。如果没自动格式化，你可以尝试手动触发：在

.hbs

文件中，右键选择“Format Document”，或者按下

Shift+Alt+F

（windows/linux）/

Shift+Option+F

（macOS）。

为什么我的Handlebars格式化没有生效？

这问题问得好，也是我经常遇到的。安装了扩展，配置了设置，结果发现代码还是乱七八糟，那种挫败感你懂的。通常有几个常见的原因导致

handlebars-formatter

不工作：

一个很常见的坑是默认格式化器冲突。你可能安装了多个格式化html或类似语法的扩展，VSCode不知道该听谁的。尽管你在

settings.json

里指定了

Glavin001.vscode-handlebars-formatter

，但有时候VSCode的优先级判断会有点“迷”。你可以尝试明确禁用其他可能与Handlebars文件类型相关的格式化扩展，或者通过VSCode的命令面板（

Ctrl+Shift+P

）搜索“Format Document With…”，然后手动选择

Handlebars Formatter

来测试。如果手动选择有效，那问题多半出在默认设置上。

另一个原因可能是文件关联不正确。VSCode需要知道

.hbs

或

.handlebars

文件应该被视为“handlebars”语言模式。虽然我在上面的配置里已经加了

"files.associations"

，但有时候项目里可能有更具体的配置覆盖了它，或者你的文件后缀名比较特殊。检查一下你文件的后缀名是否被正确识别为Handlebars。你可以点击VSCode右下角的状态栏，那里通常会显示当前文件的语言模式（比如“Handlebars”）。如果显示的是“HTML”或者“Plain Text”，那格式化器自然不会启动。

还有，扩展本身可能没有正确激活或存在bug。虽然这种情况比较少见，但也不是没有。你可以尝试重启VSCode，或者卸载重装

handlebars-formatter

扩展。检查VSCode的“Output”面板（

Ctrl+Shift+U

），选择“Extensions”或者“Log (Extension Host)”看看有没有相关的错误信息。有时候，一些依赖问题或者VSCode版本不兼容也可能导致扩展无法正常工作。

最后，别忘了检查

"editor.formatOnSave": true

这个设置。如果它被设为

false

，或者在工作区设置中被覆盖为

false

，那么保存时当然不会自动格式化。我曾经因为在某个项目的

settings.json

里把这个设成了

false

，导致怎么保存都不生效，找了半天才发现是自己挖的坑。

如何自定义Handlebars的格式化规则？

自定义格式化规则是提升开发体验的关键一环，毕竟每个人对“整洁”的定义可能都不太一样。

handlebars-formatter

这个扩展本身，它在底层其实是依赖于

prettier

的。所以，如果你想自定义格式化规则，通常是通过配置

prettier

来实现的。

这意味着，你可以在项目的根目录创建一个

.prettierrc

文件（或者

.prettierrc.json

,

.prettierrc.js

等，具体看Prettier的官方文档），然后在里面定义你的格式化偏好。

handlebars-formatter

在运行时会读取这些配置。

一些常见的

prettier

配置项，你可能会想调整：

• "tabWidth"

  : 定义缩进的空格数。我个人偏爱2个空格，感觉代码更紧凑。

• "printWidth"

  : 每行代码的最大长度。超过这个长度，Prettier会尝试换行。我通常设为80或100，避免出现超长行。

• "singleQuote"

  : 是否使用单引号代替双引号。我习惯用单引号，所以会设为

  true

  。

• "trailingComma"

  : 在多行对象或数组中，是否在最后一个元素后面添加逗号。设为

  "es5"

  或

  "all"

  可以减少git diff时的改动。

• "bracketSpacing"

  : 在对象字面量中，是否在括号内侧添加空格。

• "htmlWhitespaceSensitivity"

  : 这个对Handlebars尤其重要，因为它涉及到HTML结构。可以设为

  "css"

  、

  "strict"

  或

  "ignore"

  。通常

  "css"

  或

  "strict"

  会给你更一致的HTML格式。

举个例子，你的

.prettierrc

文件可能长这样：

{     "tabWidth": 2,     "printWidth": 100,     "singleQuote": true,     "trailingComma": "es5",     "bracketSpacing": true,     "htmlWhitespaceSensitivity": "css",     "parser": "glimmer" // 这一行很重要，告诉Prettier使用Glimmer parser来处理Handlebars }

注意

"parser": "glimmer"

这一行，这是因为Handlebars模板在底层与Ember.js的Glimmer模板引擎有相似之处，

prettier

的

glimmer

插件能够很好地解析Handlebars语法。你需要确保你的项目安装了

prettier

和

@prettier/plugin-glimmer

这两个包：

npm install --save-dev prettier @prettier/plugin-glimmer # 或者 yarn add --dev prettier @prettier/plugin-glimmer

安装了这些包，并且配置了

.prettierrc

后，

handlebars-formatter

就会利用这些设置来格式化你的Handlebars文件。如果你的VSCode设置里也启用了

editor.formatOnSave

，那么每次保存时，你的Handlebars模板就会按照你定义的规则自动调整，这感觉简直太棒了。

有没有其他VSCode扩展可以格式化Handlebars模板？

当然有，不过说实话，针对Handlebars这种特定模板语言，能做到像

handlebars-formatter

这样专门且效果好的扩展并不多。大多数时候，你可能会遇到以下几种情况：

1. 通用HTML格式化器： 很多VSCode扩展是为HTML设计的，比如

Prettier - Code formatter

本身（虽然它需要插件来支持Handlebars），或者一些更通用的HTML格式化工具。它们在处理纯HTML部分时可能表现不错，但一旦遇到Handlebars的逻辑语法，比如

{{#if condition}}...{{/if}}

或者

{{variable}}

，它们就可能“懵圈”了。结果就是，HTML结构被格式化得很好，但Handlebars表达式内部或者周围的空白、缩进可能会变得一团糟，甚至可能破坏语法。所以，如果你想获得对Handlebars语法的智能识别和格式化，通用HTML格式化器通常不是最佳选择。

2. 语言服务器或框架特定扩展： 某些大型框架，比如Ember.js，可能会有自己的VSCode扩展，其中包含了对Handlebars模板的语言服务支持和格式化功能。这些扩展通常与框架生态系统紧密集成，能提供更深度的语法检查、自动补全和格式化。例如，

Ember CLI VSCode

这个扩展就为Ember项目提供了很多便利，包括对Handlebars的初步支持。但如果你只是纯粹使用Handlebars，而不是在特定的框架中，那么安装一个庞大的框架特定扩展可能有点“杀鸡用牛刀”了。

3. Prettier插件： 前面提到了，

handlebars-formatter

底层依赖

prettier

，并且通过

@prettier/plugin-glimmer

来处理Handlebars。所以，从某种意义上说，直接安装

Prettier - Code formatter

扩展，然后配合

@prettier/plugin-glimmer

插件，你也可以达到格式化Handlebars的目的。这种方式的优点是，Prettier是一个非常流行的代码格式化工具，支持多种语言，你可以在一个工具下管理所有语言的格式化。缺点嘛，就是你需要手动安装和配置Prettier及其插件，相比

handlebars-formatter

这种“开箱即用”的Handlebars专用扩展，多了一点点配置成本。

所以，总结一下，虽然有其他方式可以尝试，但对于大多数使用VSCode和Handlebars的开发者来说，

handlebars-formatter

仍然是一个非常直接且高效的选择。它专门为Handlebars设计，配置起来相对简单，并且能够很好地处理Handlebars的复杂语法，提供令人满意的格式化效果。