Set Up VSCode for Elixir Dev

Since Elixir and Phoenix appeared prominently in the Stack Overflow Survey Results for 2022, more people have been discovering the joy of Elixir and the power of LiveView. This article introduces developers to getting the popular VS Code editor up and running for productive Elixir development.

Problem

You want to use Microsoft’s VS Code for Elixir development but there are many extension options! Some extensions conflict, some are old, others new, and some require extra config.

How do we setup VS Code for productive Elixir and Phoenix development?

Solution

Let’s assume you already have Elixir and Phoenix installed. We are focused on setting up your development environment using VS Code.

There are many extension options and some have been replaced by newer, official extensions. We’ll start with the “must have” and then cover some great optional ones.

Must have extensions

Let’s start with the 2 absolute must-have extensions!

ElixirLS: Elixir support and debugger - Elixir support with debugger, autocomplete, and more. Powered by ElixirLS.

Refer to the extension information for learning what it can do and troubleshooting steps as well. Just note that it runs a project analysis on first run which can take some time. You may hear laptop fans kick up while that’s going. Wait for that to finish before expecting code completion and formatting to work.

Phoenix Framework - Syntax highlighting support for Phoenix templates. Supports .heex and ~H embedded templates as well.

The extension Github project recommends the following config change in your settings.json file:

"emmet.includeLanguages": {
  "phoenix-heex": "html"
},

Note: If you don’t see the improvements after making the changes, try reloading the window (Command Palette > Developer: Reload Window) or restart VS Code.

Nice to have extensions

With the critical pieces in place, let’s add some frosting!

Elixir Test - An extension with a few commands that helps you with your Elixir tests

Make sure to check out the extension instructions page to see what it can do and especially the keyboard shortcuts for your platform.

Optional extensions

If you use Tailwind CSS for styling your web application, then you’ll want to install the Tailwind CSS IntelliSense extension that gives you helpful code completion and documentation lookups.

This config change lets it work well with Phoenix templates and even inside your embedded ~H function components!

Add the following config to your settings.json file:

"tailwindCSS.includeLanguages": {
    "elixir": "html",
    "phoenix-heex": "html"
},

Discussion

With your development environment setup, you are ready to productively hack on some Elixir code!

If you are new to VS Code, then it may make sense to check out the official learning resources for how to be productive with the tool.