kristoff-it/superhtml
HTML Language Server & Templating Language Library
ab5cf5feb936fa3b72c95d3ad0c0c67791937ba1
67d2d89e351048c76fc6d161e0ac09d8a831dc60
fe98e895ca3bd1b39965ab30f0f252f7b7e83ee6
50dbab8945440089384f26ec165d870c29555247
HTML Language Server and Templating Language Library
The SuperHTML CLI Tool offers validation and autoformatting features for HTML files.
The tool can be used either directly (for example by running it on save), or through a LSP client implementation.
$ superhtml
Usage: superhtml COMMAND [OPTIONS]
Commands:
check Check documents for errors.
fmt Format documents.
lsp Start the Language Server.
help Show this menu and exit.
version Print the version and exit.
General Options:
--help, -h Print command specific usage.
--syntax-only Disable HTML element and attribute validation.
WARNING SuperHTML only supports HTML5 (the WHATWG living spec) regardless of what you put in your doctype (a warning will be generated for unsupported doctypes).
SuperHTML validates not only syntax but also element nesting and attribute values. No other language server implements the full HTML spec in its validation code.
The autoformatter has two main ways of interacting with it in order to request for horizontal / vertical alignment.
>
.Before:
<div> <p>Foo</p></div>
After:
<div>
<p>Foo</p>
</div>
Before:
<div><p>Foo</p>
</div>
After:
<div><p>Foo</p></div>
Before:
<div foo="bar" style="verylongstring" hidden>
Foo
</div>
After:
<div foo="bar"
style="verylongstring"
hidden
>
Foo
</div>
Before:
<div foo="bar"
style="verylongstring"
hidden>
Foo
</div>
After:
<div foo="bar" style="verylongstring" hidden>
Foo
</div>
See the Releases section here on GitHub.
Install the Super HTML VSCode extension (doesn't require the CLI tool as it bundles a WASM build of the language server).
Download a prebuilt version of superhtml
from the Releases section (or build it yourself).
Put superhtml
in your PATH
.
Configure superhtml
for your chosen lsp
vim.api.nvim_create_autocmd("Filetype", {
pattern = { "html", "shtml", "htm" },
callback = function()
vim.lsp.start({
name = "superhtml",
cmd = { "superhtml", "lsp" },
root_dir = vim.fs.dirname(vim.fs.find({".git"}, { upward = true })[1])
})
end
})
local lsp = require("lsp-zero")
require('lspconfig.configs').superhtml = {
default_config = {
name = 'superhtml',
cmd = {'superhtml', 'lsp'},
filetypes = {'html', 'shtml', 'htm'},
root_dir = require('lspconfig.util').root_pattern('.git')
}
}
lsp.configure('superhtml', {force_setup = true})
In versions later than 24.07
superhtml
is supported out of the box, simply add executable to your PATH
.
Already defaults to using SuperHTML, just add the executable to your PATH
.
Vim should be able to parse the errors that superhtml check [PATH]
generates.
This means that you can use :make
and the quickfix window to check for syntax
errors.
Set the makeprg
to the following in your .vimrc:
" for any html file, a :make<cr> action will populate the quickfix menu
autocmd filetype html setlocal makeprg=superhtml\ check\ %
" if you want to use gq{motion} to format sections or the whole buffer (with gggqG)
autocmd filetype html setlocal formatprg=superhtml\ fmt\ --stdin
Follow your editor specific instructions on how to define a new Language Server for a given language / file format.
(Also feel free to contribute more specific instructions to this readme / add files under the editors/
subdirectory).
SuperHTML is also a HTML templating language. More on that soon.
SuperHTML tracks the latest Zig release (0.15.1 at the moment of writing).
Contributing to the HTML parser and LSP doesn't require you to be familiar with the templating language, basically limiting the scope of what you have to worry about to:
src/cli.zig
src/cli/
src/html/
In particular, you will care about the source files under src/html
.
You can invoke zig build test
to run all unit tests.
Running zig build
will compile the SuperHTML CLI tool, allowing you to also then test the LSP behavior directly from your favorite editor.
For testing within VSCode:
zig build wasm -p src/editors/vscode/wasm
src/editors/vscode
in VSCodeDebug builds will produce logs in your cache directory so you can tail -f ~/.cache/superhtml.log
.