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

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

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

在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设置里做文章。

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

用户设置 (User Settings)：这会影响你所有VSCode项目。
工作区设置 (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”，那格式化器自然不会启动。

AiPPT模板广场

AiPPT模板广场-PPT模板-word文档模板-excel表格模板

147

查看详情

还有，扩展本身可能没有正确激活或存在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的复杂语法，提供令人满意的格式化效果。

以上就是如何在VSCode中格式化Handlebars模板？配置handlebars-formatter的步骤的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

如何卸载32位vscode并重装_vscode32位卸载后重新安装的完整流程精通VSCode扩展管理的依赖解析与冲突解决 vscode怎么使用内置服务器运行HTML_vscode内置服务器运行HTML的配置方法 VSCode扩展推荐：提升开发效率的必备工具 vscode全局替换如何使用双引号匹配_vscode双引号内容全局替换设置技巧