在VSCode中进行Elixir和Phoenix项目开发-VSCode-PHP中文网

在VSCode中进行Elixir和Phoenix项目开发

P粉986688829

发布： 2025-12-18 17:05:26

原创

426人浏览过

VSCode 是开发 Elixir 和 Phoenix 项目的轻量高效选择，配合 ElixirLS、Phoenix Snippets 等插件及正确环境配置，可实现语法高亮、智能补全、调试、格式化等完整开发体验。

在vscode中进行elixir和phoenix项目开发

VSCode 是开发 Elixir 和 Phoenix 项目的轻量高效选择，配合合适的插件和配置，体验接近专用 IDE，且启动快、资源占用低。

必备插件推荐

安装以下扩展可覆盖语法高亮、代码补全、格式化、调试等核心需求：

ElixirLS（官方推荐）：提供智能补全、跳转定义、实时错误检查、调试支持（需配合 Erlang/OTP 环境）
Phoenix Framework Snippets：内置常用 Phoenix 模板、路由、控制器、视图等代码片段（如 phx.route、phx.controller）
Bracket Pair Colorizer 2（可选但实用）：Elixir 大量使用括号和嵌套结构，彩色配对提升可读性
GitLens（增强 Git 协作）：方便查看 Phoenix 项目中 mix.exs、config/ 下文件的修改历史

环境与项目初始化准备

ElixirLS 依赖本地 Elixir + Erlang 运行时。确保已正确安装并可通过终端调用：

运行 elixir --version 和 erl -version 验证版本（Phoenix 1.7+ 推荐 Elixir 1.14+、Erlang 25+）
在项目根目录下执行 mix deps.get 后，ElixirLS 会自动索引依赖，首次可能需等待几秒到一分钟
若遇到“Could not start language server”错误，检查 VSCode 设置中 elixirLS.erlangPath 是否指向正确的 erl 可执行文件（Windows 用户注意路径含空格需加引号）

高效编码与调试技巧

利用 VSCode 原生能力提升 Phoenix 开发效率：

dmSOBC SHOP网店系统

dmSOBC SHOP网店系统由北京时代胜腾信息技术有限公司（http://www.webzhan.com）历时6个月开发完成，本着简单实用的理念，商城在功能上摒弃了外在装饰的一些辅助功能，尽可能的精简各项模块开发，做到有用的才开发，网店V1.0.0版本开发完成后得到了很多用户的使用并获得了好评，公司立即对网店进行升级，其中包括修正客户提出的一些意见和建议，现对广大用户提供免费试用版本，如您在使用

查看详情

按 Ctrl+Click（macOS 为 Cmd+Click）直接跳转到模块、函数或模板中的 Phoenix 视图/组件定义
在 lib/my_app_web/router.ex 中右键选择 “Go to Symbol in Workspace”，快速查找所有路由别名（如 :show, :index）
启动调试：创建 .vscode/launch.json，配置类型为 mix_task，任务设为 phx.server；添加断点后按 F5 启动，请求到达时自动停靠（需确保应用未被外部进程占用端口）
格式化代码统一用 mix format：在 VSCode 设置中启用 "elixirLS.formattingProvider": "mix_format"，保存即自动格式化

常见问题速查

节省排查时间的小提示：

模板（.eex / .heex）无语法高亮？确认已安装 ElixirLS 并重启窗口；部分旧版插件不支持 HEEx，建议使用最新版 ElixirLS（v0.12+）
LiveView 热重载失效？检查 config/dev.exs 中 live_reload: [patterns: ...] 是否包含 ~r"priv/static/.*" 和 ~r"lib/my_app_web/live/.*"
找不到 MyAppWeb.Endpoint 定义？确认项目结构符合 Phoenix 默认约定（lib/my_app_web.ex 导出 endpoint 模块），且 mix compile 成功无错