Using Elixir with VS Code

May 15, 2019

I’ve been learning Elixir, and working on some side projects. My editor of choise 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. In elixir(and in surrounding ecosystem) we have several Language servers (well, two), different file types (.ex, .exs, .eex, .leex) and multiple extensions on VScode Marketplace. 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). Of course, there are already a lot of

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.

1. Language Servers and Elixir code

This extension will do most of the work, intelisense, 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 maintained.

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, with 143,000+ downloads. It had autosuggestions, snippets and syntax highlighting, but most (if not all) of the functionality is also provided by ElixirLS Fork, and this extension was not updated since 2017.

This is not to say, that ElixirLS Fork is better than other tools, actually ElixirLS Fork is built on the tools mentioned above.

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 did, to make working in HTML 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). If you uninstal one of these two, you will also have only one file type

Emmet Support

Another very useful tool when working with HTML is (Emmet)[https://emmet.io/]. 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"
  }

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 so easy with HTML EEx files. 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). And today, I came across a (post in this forum)[https://elixirforum.com/t/the-very-basics-auto-formatting-in-eex/19265/3] that suggests to use (Beautify)[https://marketplace.visualstudio.com/items?itemName=HookyQR.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.