Little setup idea for Phoenix Framework

I have been doing a lot of Phoenix Framework these days, but I am struggling with writing heex templates because the elixir_ls was/might not be working well.

So here's how I made it cool. The primary idea of this note is grabbed from this discussion.

VsCode extension to install:

• Phoenix Framework

• ElixirLS

Setup to make:

In your .vscode/settings.json write the following configurations:

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

This will give you emmet abbreviation for phoenix heex templates.

For formatting Phoenix Heex

"[phoenix-heex]": {
        "editor.defaultFormatter": "RoyalMist.vscode-eex-format"
    },

Install, Elixir Templates Formatter, finally for tailwind css suggestions:

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

I am not much of a fan of vscode, due to lack of dedicated Intellij IDE for Elixir, I am using vscode.

You can vote, for Elixir support with LSP.

Thanks!

try this new one:

{
    "elixirLS.suggestSpecs": false,
    "elixirLS.dialyzerEnabled": true,
    "elixirLS.signatureAfterComplete": false,
    "elixirLS.fetchDeps": false,
    "files.associations": {
        "*.heex": "phoenix-heex"
    },
    "[elixir]": {
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "JakeBecker.elixir-ls"
    },
    "[phoenix-heex]": {
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "JakeBecker.elixir-ls"
    },
    "emmet.includeLanguages": {
        "elixir": "html",
        "phoenix-heex": "html",
        "html-eex": "html"
    },
    "emmet.triggerExpansionOnTab": true,
    "[html-eex]": {
        "editor.defaultFormatter":  "JakeBecker.elixir-ls",
    },
    "tailwindCSS.includeLanguages": {
        "phoenix-heex": "html"
    }
}

works well