vscode_config.md

Formatter to phoenix project

LiveView 0.17.8 and later includes Phoenix.LiveView.HTMLFormatter for formatting HEEx templates.

It’s a mix format plugin that’s added to the .formatter.exs file by default when you generate a Phoenix 1.7 app:

[
  plugins: [Phoenix.LiveView.HTMLFormatter],
  inputs: ["*.{heex,ex,exs}", "{config,lib,test}/**/*.{heex,ex,exs}", "priv/*/seeds.exs"]
  # ...
]

Launch.json to execute app from vscode with debug

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "mix_task",
            "name": "mix (Default task)",
            "request": "launch",
            "task": "phx.server",
            "projectDir": "${workspaceRoot}",
            "exitAfterTaskReturns": false
        },
        {
            "type": "mix_task",
            "name": "mix test",
            "request": "launch",
            "task": "test",
            "taskArgs": [
                "--trace"
            ],
            "startApps": true,
            "projectDir": "${workspaceRoot}",
            "requireFiles": [
                "test/**/test_helper.exs",
                "test/**/*_test.exs"
            ]
        }
    ]
}

User config

{
  "files.associations": {
    "*.heex": "phoenix-heex",
  },
  "[elixir]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "JakeBecker.elixir-ls"
  },
  "[phoenix-heex]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "JakeBecker.elixir-ls"
  },
  "files.autoSave": "afterDelay",
  "emmet.includeLanguages": {
    "phoenix-heex": "html",
    "html-eex": "html",
    "elixir": "html",
  },
  "tailwindCSS.includeLanguages": {
    "phoenix-heex": "html",
    "elixir": "html",
  },
  "files.exclude": {
    "**/_build": true,
    "**/.elixir_ls": true
  },
  "editor.fontFamily": "FiraCode-Retina",
  "editor.fontLigatures": true,
  "editor.fontWeight": "450",
  "tailwindCSS.emmetCompletions": true,
  "files.insertFinalNewline": true,
  "editor.formatOnSave": true
}