Hey Elixir community,

I’ve been learning Elixir, and working on some side projects. My editor of choice is VSCode, and although I started somewhat seriously working with Elixir like a month ago, only today I finally was able to configure VSCode, so it will help me, rather than me fighting it. There are multiple extensions on VScode Marketplace, and it can be confusing to decide which ones to install. Initally, I went ahead, and installed almost all of them, which of course led to problems with configurations and those extensions fighting with each other. Here, I want to write down, which extensions I use (and which extensions I removed, because they are basically doing same things) and how I configured formatter in templates (biggest pain I had). All of the information provided here I actually found somewhere, usually in this forum, where other users already solved those issues, this post is just a bringing those solutions in one place, so all credit goes to those users and blog posts

I hope, it will be helpful for newcomers like me, when they are just starting, so they don’t have to fight the editor, and start coding instead.

Note: I don’t intend to say that authors of extensions I suggest to not use did bad job, actually most of the current tooling was built on top of those older tools. This is just a guide on latest extensions that are being supported

1. Language Servers and Elixir code

Language Server will do most of the work in your editor, intellisense, formatting, documentation lookup, code completion and more. Actually, if you are working only with elixir, and not with template engines for example, then with this extension you are basically covered.

There are two LS extensions available in the Marketplace:

• ElixirLS: Elixir support and debugger by Jake Becker 77000+ installs
• ElixirLS Fork: Elixir support and debugger by elixir-lsp 5500+ installs

All the common sense states that first options is the right one, right? Well, no, the first option was developed earlier, but original author is no longer working on that repo (latest commit, May 2019), so fork was created from that repo and currently is actively developed. More info can be found here (elixirforum post)

So, you should install ElixirLS Fork: Elixir support and debugger by elixir-lsp. Also, don’t forget to rate it, star it, share it, so it will become the obvious choice (btw, I have no relation to the extension, except I am a grateful user)

From now on, I will refer to ElixirLS Fork as ElixirLS

There is another very popular extension called VSCode Elixir by Mat McLoughlin, with 143,000+ downloads. It has autosuggestions, snippets and syntax highlighting, but most (if not all) of the functionality is also provided by ElixirLS, and this extension was not updated since 2017.

2. Templates - file types and formatting

ElixirLS perfectly handles formatting of .ex and .exs files, but when you are working with Phoenix, chances are that you will be working with templates, HTML files with sprinkled elixir code. They will have .eex and .leex extensions (latter is for LiveView). However, usually editors treat these files as HTML files, and try to format accordingly, but they usually break because of the elixir code. In addition, small things like emmet also won’t work by default. So, here are configurations I added, to make working in Phoenix templates easier.

File Associations

It is possible, that VSCode will not recognize .eex and .leex files as Phoenix templates. ElixirLS adds file type HTML (EEx), which should help VSCode to recognize our templates, but in case it is not working for you, you can add configuration to settings.json file

  "files.associations": {
    "*.eex": "HTML (EEx)",
    "*.leex": "HTML (EEx)"
  },

If you had installed ElixirLS and VSCode Elixir(mentioned above) extensions together, then probably you will have two file types HTML (EEx) and HTML (Eex), and it was always confusing me. Turns out, just like ElixirLS adds HTML (EEx) type, VSCode Elixir adds HTML (Eex). I uninstalled VSCode Elixir, HTML (Eex) was gone and all other features are already provided by ElixirLS, so no problem

Emmet Support

Another very useful tool when working with HTML is Emmet. VSCode comes with emmet preinstalled, but to make it work in HTML (EEx) files, we need to add configuration below

  "emmet.includeLanguages": {
    "HTML (EEx)": "html"
  }

This will allow to use emmet, however, templates still will not have html intellisense provided by VSCode(like autocompletion of html tag attributes, documentation on hover etc). This is most probably because VSCode doesn’t have mixed language support. Other ecosystems like ruby, php seem to have same problem

Code formatting

This is something I struggled most with. I am very used to arranging html, cutting, pasting and then just running format, and have it perfectly aligned. However, it is not possible with HTML EEx files out of the box. Prettier cannot format this file type because of elixir code, and for some reason, HTML EEx cannot use standard vscode html formatter(even if you specify it as default formatter for this file type in the settings). And today, I came across a post in this forum that suggests to use Beautify. Install Beautify extension and add configuration below

  "beautify.language": {
    "js": {
      "type": [
        "javascript",
        "json",
        "jsonc"
      ],
      "filename": [
        ".jshintrc",
        ".jsbeautifyrc"
      ]
    },
    "css": [
      "css",
      "less",
      "scss"
    ],
    "html": [
      "htm",
      "html",
      "HTML (EEx)"
    ]
  }

Actually, most of it is autogenerated, when you type beautify.language in settings.json and hit Enter. You just need to add "HTML (EEx)" bit(or just copy and paste the thing above, that’s easiest). With this, you will be able to format your .eex and .leex files. Of course, it is not perfect, it will only format your HTML code(and not whatever inside <% %>). Also I found that Beautify does not format as good as Prettier does, but it get’s the job done.

If you have any additional tips on how to configure editor, please leave them here, I am sure, I personally will benefit from it, and hopefully other newcomers too.

I would also suggest to look at blog posts from Mark Ericksen

• Elixir in VS Code
• VS Code Broken for Elixir