VSCode 高效开发 Elixir/Phoenix 的核心是配好工具链与针对性设置:装 ElixirLS 和 Bracket Pair Colorizer;关闭 Dialyzer、启用保存格式化、关联 .eex/.leex 为 HTML;调试直接选 Elixir 启动项;配合快捷键和符号搜索提升效率。

在 VSCode 中高效开发 Elixir 和 Phoenix 项目,关键不是装一堆插件,而是配好核心工具链 + 针对性扩展 + 合理的设置。下面这些配置经实际项目验证,兼顾启动速度、代码提示、调试和终端集成。
Elixir 环境与核心插件
确保系统已安装 Erlang/OTP(≥25)、Elixir(≥1.16)和 mix 可用(终端中运行 elixir -v 和 mix -v 验证)。VSCode 插件只需装两个:
- ElixirLS(官方推荐,提供智能补全、跳转、类型检查、格式化、调试支持)
- Bracket Pair Colorizer(可选但强烈推荐,Elixir 多层嵌套括号时视觉区分明显)
安装 ElixirLS 后,它会自动下载对应版本的 language server(首次打开项目时可能需几秒等待),无需手动编译或配置路径。
Phoenix 项目专属设置
Phoenix 项目依赖 mix phx.server 和前端资产编译(esbuild/webpack),VSCode 可以把它们整合进工作流:
- 在项目根目录创建
.vscode/settings.json,加入:
"elixirLS.dialyzerEnabled": false(Phoenix 项目 Dialyzer 分析慢且常报误报,建议关闭)
"elixirLS.formatOnSave": true(保存即用mix format格式化)
"files.associations": {"*.eex": "html", "*.leex": "html"}(让 .eex/.leex 文件获得 HTML 语法高亮) - 用 VSCode 内置终端(
Ctrl+`)启动服务:mix deps.get && mix setup && mix phx.server
前端资源会自动监听变更,无需额外配置 LiveReload 插件。
调试 Phoenix 应用(断点 + 请求追踪)
ElixirLS 原生支持调试,无需额外适配器。操作步骤如下:
WOC是基于zend framework1.6框架所开发的一款开源简易网站运营管理系统。它允许进行网站管理、主机管理、域名管理、数据库管理、邮箱管理以及用户管理、角色管理、权限管理等一系列功能,适合中小企业进行网站运营管理。目前版本为V1.2,新版本正在开发中,同时欢迎大家参与到开发中来! WOC升级说明: 1.1在1.0的基础上进行了代码规范并增加了配置数据缓存,以提高访问速度 注意:升级时要重
- 在
lib/your_app_web/controllers或lib/your_app中设断点(点击行号左侧空白处) - 按
Ctrl+Shift+D打开调试面板 → 点击“运行和调试” → 选择 Elixir: Start and debug your application - VSCode 会自动读取
.iex.exs或mix.exs,启动带调试支持的mix phx.server - 浏览器访问页面,触发断点;变量、调用栈、Elixir 表达式求值(Debug Console)全部可用
注意:调试模式下 Phoenix 的热重载(LiveReload)仍有效,修改模板后刷新即可看到效果,不影响断点调试流程。
实用小技巧提升效率
几个不显眼但每天省下大量时间的配置项:
- 在
settings.json中启用:
"editor.suggest.snippetsPreventQuickSuggestions": false(允许代码片段触发智能提示) - 为常用命令绑定快捷键(如
Ctrl+Alt+B运行mix test):
在keybindings.json添加:{"key": "ctrl+alt+b", "command": "workbench.action.terminal.sendSequence", "args": {"text": "mix test\u000D"}} - 用
Ctrl+P快速打开文件时,输入@可跳转到函数定义(ElixirLS 支持符号搜索)
基本上就这些。不需要改 Erlang 启动参数,也不用折腾自定义 formatter —— ElixirLS 开箱即用,配合 Phoenix 默认约定,开发体验很顺滑。









