如何在Visual Studio Code中格式化HTML-EEx文件？求设置与扩展推荐

我太懂这种痛点了！用VS Code写Elixir和Phoenix项目时，习惯了Prettier、ElixirLS那种一键格式化的流畅感，偏偏EEx模板找不到顺手的工具，真的很影响开发节奏。下面分享我亲测有效的配置方案，分扩展推荐和VS Code设置两部分：

一、推荐安装的扩展 #

• ElixirLS：作为Elixir开发的核心扩展，它不仅能提供代码补全、语法检查，还能处理EEx文件中的Elixir代码部分，是基础必备。
• Prettier + prettier-plugin-eex：如果你已经习惯Prettier的格式化风格，这个组合适配性极强。Prettier负责统一格式逻辑，prettier-plugin-eex专门处理EEx模板的语法兼容。
• HTML EEx Formatter：一款轻量的专用扩展，无需依赖npm包，安装后就能直接用，适合不想折腾依赖的开发者。

二、具体配置步骤 #

方案1：Prettier + prettier-plugin-eex（推荐给喜欢Prettier风格的同学） #

1. 首先在项目根目录安装依赖包：

npm install --save-dev prettier prettier-plugin-eex

2. 打开VS Code的settings.json（可以通过Ctrl+,打开设置面板，然后点击右上角的打开设置(JSON)按钮），添加以下配置：

{
  // 为html-eex文件指定默认格式化工具
  "[html-eex]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true // 开启保存时自动格式化
  },
  // 让Prettier识别EEx文件类型
  "prettier.documentSelectors": [
    "**/*.eex",
    "**/*.html.eex"
  ]
}

方案2：HTML EEx Formatter（轻量无依赖） #

1. 安装扩展后，同样在settings.json中配置：

{
  "[html-eex]": {
    "editor.defaultFormatter": "vscode-html-eex-formatter.html-eex-formatter",
    "editor.formatOnSave": true
  }
}

2. 你还可以自定义格式化规则，比如调整缩进大小、换行长度：

"html-eex-formatter.indentSize": 2,
"html-eex-formatter.wrapLineLength": 80

额外小贴士 #

ElixirLS主要负责.ex/.exs文件的格式化，而上面的工具专门处理EEx模板中的HTML和混合代码，两者搭配使用，就能覆盖你Phoenix项目里所有文件的格式化需求啦！

内容的提问来源于stack exchange，提问作者user429960