HTML autocomplete not working inside .html.erb files

[MatUrbanski]

Check for existing issues

• [X] Completed

Describe the bug / provide steps to reproduce it

Hello,

I’m using Zed for Ruby on Rails development and have installed the html extension. However, autocomplete for HTML tags like <p> inside .html.erb files isn’t working. Is there a way to enable this through the settings?

Thanks in advance!

[kjvdven]

It works for me, maybe my settings help.

// Zed settings
//
// For information on how to configure Zed, see the Zed
// documentation: https://zed.dev/docs/configuring-zed
//
// To see all of Zed's default settings without changing your
// custom settings, run the `open default settings` command
// from the command palette or from `Zed` application menu.
{
  // APPLICATION
  "hour_format": "hour24",
  "theme": "Rosé Pine Moon",

  // Interface
  "tab_bar": {
    "show": false
  },
  "project_panel": {
    "dock": "right"
  },
  "toolbar": {
    "quick_actions": false
  },
  "scrollbar": {
    "show": "never"
  },

  // Telemetry
  "telemetry": {
    "diagnostics": false,
    "metrics": false
  },

  // BUFFER
  // font settings
  "buffer_font_family": "MonoLisa",
  "buffer_font_fallbacks": ["MonoLisa Nerd Font"],
  "buffer_font_size": 13,
  "buffer_font_features": {
    "ss01": true,
    "ss03": true,
    "ss06": true,
    "ss11": true,
    "ss13": true
  },

  // code presentation
  "buffer_line_height": {
    "custom": 2.25
  },
  "preferred_line_length": 100,
  "relative_line_numbers": true,
  "soft_wrap": "preferred_line_length",
  "tab_size": 2,

  // Vim
  "vim_mode": true,

  // AI Assistant
  "assistant": {
    "default_model": {
      "provider": "copilot_chat",
      "model": "gpt-4o"
    },
    "version": "2"
  },
  "features": {
    "copilot": true
  },

  // Terminal
  "terminal": {
    "font_family": "MonoLisa",
    "font_features": {
      "ss01": true,
      "ss03": true,
      "ss06": true,
      "ss11": true,
      "ss13": true
    },
    "font_fallbacks": ["MonoLisa Nerd Font"],
    "font_size": 12.6,
    "line_height": {
      "custom": 1.875
    }
  },

  // LANGUAGE
  // File types
  "file_types": {
    "Blade": ["*.blade.php"],
    "ERB": ["*.html.erb"]
  },

  // Language specific settings
  "languages": {
    "Blade": {
      "prettier": {
        "allowed": true
      }
    },
    "ERB": {
      "prettier": {
        "allowed": true
      },
      "formatter": [
        {
          "external": {
            "command": "htmlbeautifier",
            "arguments": []
          }
        }
      ]
    },
    "HTML": {
      "preferred_line_length": 100
    },
    "PHP": {},
    "Ruby": {
      "language_servers": ["ruby-lsp", "rubocop", "!solargraph", "..."]
    }
  },

  // Language server protocols
  "lsp": {
    "biome": {
      "settings": {
        "require_config_file": true
      }
    },
    "tailwindcss-language-server": {
      "settings": {
        "includeLanguages": {
          "blade": "html",
          "erb": "html",
          "ruby": "html"
        },
        "experimental": {
          "classRegex": ["\\bclass:\\s*['\"]([^'\"]*)['\"]"]
        }
      }
    },
    "rubocop": {
      "initialization_options": {
        "safeAutocorrect": false
      }
    },
    "ruby-lsp": {
      "initialization_options": {
        "enabledFeatures": {
          // This disables diagnostics
          "diagnostics": false
        }
      }
    }
  }
}

[MatUrbanski]

I installed emmet and this solves my problem. Thanks

[MatUrbanski]

@kjvdven @notpeter Still not working for me without emmet. Here are my settings:

// Zed settings
//
// For information on how to configure Zed, see the Zed
// documentation: https://zed.dev/docs/configuring-zed
//
// To see all of Zed's default settings without changing your
// custom settings, run `zed: open default settings` from the
// command palette (cmd-shift-p / ctrl-shift-p)
{
  "outline_panel": {
    "dock": "left"
  },
  "tab_size": 2,
  "features": {
    "copilot": false,
    "inline_completion_provider": "none"
  },

  "collaboration_panel": {
    "button": false
  },

  "chat_panel": {
    "button": false,
    "enabled": false
  },

  "assistant": {
    "enabled": false,
    "version": "2",
    "button": false
  },

  "assistant_v2": {
    "enabled": false
  },

  "gutter": {
    // Whether to show line numbers in the gutter.
    "line_numbers": true,
    // Whether to show code action buttons in the gutter.
    "code_actions": true,
    // Whether to show runnables buttons in the gutter.
    "runnables": true,
    // Whether to show fold buttons in the gutter.
    "folds": true
  },

  "ui_font_size": 15,
  "buffer_font_size": 15,
  "theme": {
    "mode": "system",
    "light": "Ayu Dark",
    "dark": "One Dark"
  },

  "telemetry": {
    "diagnostics": false,
    "metrics": false
  },

  "languages": {
    "Ruby": {
      "language_servers": ["ruby-lsp", "rubocop", "!solargraph", "..."]
    }
  },

  "file_types": {
    "Shell Script": [".env*"],
    "ERB": ["*.html.erb"]
  },

  "lsp": {
    "rubocop": {
      "initialization_options": {
        "safeAutocorrect": true
      }
    },

    "ruby-lsp": {
      "initialization_options": {
        "diagnostics": true,
        "formatting": true
      }
    }
  }
}

https://github.com/user-attachments/assets/cdef749a-9670-4425-b3b6-2f2dc9be0f91

[notpeter]

I'm not super familiar with this @MatUrbanski, but perhaps you could you try altering the language server settings for ERB to ensure html-language-server is running for ERB files? Something like this maybe (untested):

  "languages": {
    "ERB": {
      "language_servers": ["html-language-server", "..."]
    }
  },

Edit: It might be html, vscode-html-language-server or html-languager-server I'm not sure.

Related:

• https://github.com/zed-industries/zed/issues/20245

[MatUrbanski]

Thank you @notpeter for your answer but unfortunately it still doesnt work :(