Help needed - Go / Templ / Tailwind / Emmet Config

[ytsruh]

Hey all,

Loving Zed and its my go to editor now :) Its been working like a dream for Go but recently I've had to add a frontend to an application and my Zed experience fell off a cliff becuase of this.

I have the Zed-templ, HTML & Emmett extensions installed & my config is pasted below as well.

Tailwind auto complete is working as expected. However 'format on save' & emmet 'autocomplete' are not working as expected. Typically I name my files ".templ" but I have tried other variants of templ files, without any luck as well.

Can anybody offer any suggestions?

My config:

// Zed settings
//
// For information on how to configure Zed, see the Zed
// documentation: https://zed.dev/docs/configuring-zed
{
  "assistant": {
    "default_model": {
      "provider": "zed.dev",
      "model": "claude-3-5-sonnet-20240620"
    },
    "version": "2"
  },
  "features": {
    "copilot": false,
    "inline_completion_provider": "supermaven"
  },
  "base_keymap": "VSCode",
  "theme": "VScode Dark Plus",
  "buffer_font_size": 15,
  "buffer_font_family": "Menlo",
  "default_dock_anchor": "bottom",
  "soft_wrap": "prefer_line",
  "formatter": "language_server",
  "terminal": {
    "font_size": 18,
    "font_family": "Zed Plex Mono"
  },
  "inlay_hints": {
    "enabled": true,
    "show_type_hints": true,
    "show_parameter_hints": true,
    "show_other_hints": true
  },
  "languages": {
    "HTML": {
      "language_servers": [
        "tailwindcss-language-server",
        "vscode-html-language-server",
        "emmet-language-server"
      ]
    },
    "Templ": {
      "format_on_save": "on",
      "language_servers": [
        "tailwindcss-language-server",
        "vscode-html-language-server",
        "emmet-language-server"
      ],
      "inlay_hints": {
        "enabled": true
      }
    }
  },
  "lsp": {
    "tailwindcss-language-server": {
      "settings": {
        "includeLanguages": {
          "templ": "html",
          "Templ": "html"
        }
      }
    }
  }
}

[bajrangCoder]

From my experience, Emmet extension doesn't work in languages which aren't specified here

And Where have you specified which formatter should be used?
Check : https://zed.dev/docs/configuring-zed#formatter

[ytsruh]

Hmmm, I was hoping treating templ files as HTML would mean Emmet would work.

Good point on the formatter, I'll give that a try! Thanks for the suggestion!

[Neidz]

@ytsruh did you figure it out? I'm still having problems properly configuring zed to deal with .templ files, so if you have working config I'd love to see it

[ytsruh]

Nope! Still frustrating me. My entire config is posted above and thats the 'best' I've managed to get it - very frustrated by it to be honest.

Zed is absolutely brilliant but it appears this templ edge case is beyond it.

[axzilla]

Any updates on this topic?

[haatos]

"languages": {
  "Templ": {
      "formatter": {
        "external": {
          "command": "templ",
          "arguments": ["fmt", "-stdin-filepath", "{buffer_path}"]
        }
      },
      "format_on_save": "on",
      "language_servers": [
        "tailwindcss-language-server",
        "vscode-html-language-server",
        "emmet-language-server"
      ],
      "inlay_hints": {
        "enabled": true
      }
    }
}

This works to run templ fmt on your current buffer when saving it. Added the "formatter" part within "Templ" language settings.

[zerefel]

Any idea on how to get the html language server to properly work with Templ files? I've had no luck, here's my config:

...
"languages": {
    "Go": {
      "show_inline_completions": true,
      "preferred_line_length": 80,
      "soft_wrap": "bounded"
    },
    "Templ": {
      "formatter": {
        "external": {
          "command": "templ",
          "arguments": ["fmt", "-stdin-filepath", "{buffer_path}"]
        }
      },
      "format_on_save": "on",
      "language_servers": [
        "tailwindcss-language-server",
        "vscode-html-language-server",
        "emmet-language-server"
      ],
      "inlay_hints": {
        "enabled": true
      }
    }
  },
  "lsp": {
    "tailwindcss-language-server": {
      "settings": {
        "includeLanguages": {
          "templ": "html",
          "Templ": "html"
        }
      }
    },
    "vscode-html-language-server": {
      "settings": {
        "html": {
          "suggest": {
            "html5": true,
            "angular1": true,
            "ionic": true
          },
          "validate": {
            "scripts": true,
            "styles": true
          },
          "format": {
            "wrapLineLength": 120,
            "unformatted": "wbr,code,pre"
          },
          "includeLanguages": {
            "templ": "html",
            "Templ": "html"
          }
        }
      }
    }
  }
...