Help with diagnostics for HTML files

I have installed the vscode-language-server using:

npm i -g vscode-langservers-extracted

I then setup my configuration in the lspconfig.lua file I have:

require 'lspconfig'.html.setup {
    -- cmd = { "vscode-html-language-server.cmd", "--stdio" },
    capabilities = capabilities,
    on_attach = function()
        -- Format on Save
        vim.api.nvim_command [[augroup Format]]
        vim.api.nvim_command [[autocmd! * <buffer>]]
        vim.api.nvim_command [[autocmd BufWritePre <buffer> lua vim.lsp.buf.formatting_seq_sync()]]
        vim.api.nvim_command [[augroup END]]
        vim.keymap.set("n", "gr", vim.lsp.buf.references, { buffer = 0 })
        vim.keymap.set("n", "gr", vim.lsp.buf.references, { buffer = 0 })
        local map = vim.api.nvim_buf_set_keymap
        map(0, "n", "K", "<cmd>Lspsaga hover_doc<cr>", { silent = true, noremap = true })
        map(0, "n", " r", "<cmd>Lspsaga rename<cr>", { silent = true, noremap = true })
        map(0, "n", "gx", "<cmd>Lspsaga code_action<cr>", { silent = true, noremap = true })
        map(0, "x", "gx", ":<c-u>Lspsaga range_code_action<cr>", { silent = true, noremap = true })
        map(0, "n", " td", "<cmd>Telescope diagnostics<cr>", { silent = true, noremap = true })
        map(0, "n", " dl", "<cmd>Lspsaga show_line_diagnostics<cr>", { silent = true, noremap = true })
        map(0, "n", " dc", "<cmd>Lspsaga show_cursor_diagnostics<cr>", { silent = true, noremap = true })
        map(0, "n", " dn", "<cmd>Lspsaga diagnostic_jump_next<cr>", { silent = true, noremap = true })
        map(0, "n", " dp", "<cmd>Lspsaga diagnostic_jump_prev<cr>", { silent = true, noremap = true })
        map(0, "n", " lf", "<cmd>Lspsaga lsp_finder<cr>", { silent = true, noremap = true })
        map(0, "n", " ts", "<cmd>Telescope lsp_document_symbols<cr>", { silent = true, noremap = true })
        map(0, "n", " pd", "<cmd>Lspsaga preview_definition <cr>", { silent = true, noremap = true })
        map(0, "n", " gd", "<cmd>lua vim.lsp.buf.definition()<cr>", { silent = true, noremap = true })
        -- these don't seem to work
        -- map(0, "n", "<C-u>", "<cmd>lua require('lspsaga.action').smart_scroll_with_saga(-1, '<c-u>')<cr>", {})
        -- map(0, "n", "<C-d>", "<cmd>lua require('lspsaga.action').smart_scroll_with_saga(1, '<c-d>')<cr>", {})
    end,
}

LspInfo seems to recognize and attaches to it, but the diagnostics do not work. HTML LSP seems to attach without needing package.json/gitconfig but added those files in the project folder anyway just in case, but still no diagnostics:

Html code where I expected some diagnostics on the last couple lines:

<style>
    .alert {

        padding: 15px;
        border: 1px solid #d6e9c6;
        < !-- border-radius: 100px;
        -->color: #3c763d;
        background-color: #dff0d8;
    }

    </style"><
 div class="alert"><strong>Hi there !</strong>You've read an important message.
 </asdfadia'=123
 v>as;
    df

I also added the jsonls server the same way and it works just fine (I copy pasted the above html setup code and renamed html to jsonls and it shows diagnostics when launching a .json file).

Is there something I am missing that I need to add for the html server setup to have it show diagnostics? I read online that the vscode-langservers-extracted doesn’t have diagnostics for html, and that I need to install eslint in each project - I tried that but wasn’t getting results. However, I want to confirm if html server (vscode-langservers-extracted) does do diagnostics before I try to troubleshoot eslint manual installations.

Here is what the lsp.log shows when launching an .html file:

[ERROR][2022-06-01 17:51:36] ...lsp/handlers.lua:454 "Error while validating file:///C:/Users/Sunil%20Khatri/javascriptLearning/index.html: Cannot read properties of null (reading 'validProperties')\nTypeError: Cannot read properties of null (reading 'validProperties')\n at LintConfigurationSettings.getSetting (C:\\ProgramData\\nvm\\v16.15.0\\node_modules\\vscode-langservers-extracted\\node_modules\\vscode-css-languageservice\\lib\\umd\\services\\lintRules.js:82:29)\n at new LintVisitor (C:\\ProgramData\\nvm\\v16.15.0\\node_modules\\vscode-langservers-extracted\\node_modules\\vscode-css-languageservice\\lib\\umd\\services\\lint.js:50:39)\n at Function.LintVisitor.entries (C:\\ProgramData\\nvm\\v16.15.0\\node_modules\\vscode-langservers-extracted\\node_modules\\vscode-css-languageservice\\lib\\umd\\services\\lint.js:63:27)\n at CSSValidation.doValidation (C:\\ProgramData\\nvm\\v16.15.0\\node_modules\\vscode-langservers-extracted\\node_modules\\vscode-css-languageservice\\lib\\umd\\services\\cssValidation.js:35:60)\n at _callee$ (C:\\ProgramData\\nvm\\v16.15.0\\node_modules\\vscode-langservers-extracted\\lib\\html-language-server\\modes\\cssMode.js:53:69)\n at tryCatch (C:\\ProgramData\\nvm\\v16.15.0\\node_modules\\vscode-langservers-extracted\\node_modules\\regenerator-runtime\\runtime.js:63:40)\n at Generator.invoke [as _invoke] (C:\\ProgramData\\nvm\\v16.15.0\\node_modules\\vscode-langservers-extracted\\node_modules\\regenerator-runtime\\runtime.js:294:22)\n at Generator.next (C:\\ProgramData\\nvm\\v16.15.0\\node_modules\\vscode-langservers-extracted\\node_modules\\regenerator-runtime\\runtime.js:119:21)\n at asyncGeneratorStep (C:\\ProgramData\\nvm\\v16.15.0\\node_modules\\vscode-langservers-extracted\\lib\\html-language-server\\modes\\cssMode.js:17:103)\n at _next (C:\\ProgramData\\nvm\\v16.15.0\\node_modules\\vscode-langservers-extracted\\lib\\html-language-server\\modes\\cssMode.js:19:194)"

I do have files in the locations it is stating it is null:

C:\ProgramData\nvm\v16.15.0\node_modules\vscode-langservers-extracted\node_modules\vscode-css-languageservice\lib\umd\services

Any help is appreciated!

The problem seems related to invalid initialization of the LSP. I was able to solve this way:

lspconfig.html.setup {
  on_init = ...
  on_attach = ...
  settings = {
    css = {
      lint = {
        validProperties = {},
      },
    },
  },
}

references:
https://github.com/microsoft/vscode-css-languageservice/issues/223
https://github.com/microsoft/vscode-css-languageservice/blob/045b4764e36648a29cb3970e6733b35a0085600d/src/services/lintRules.ts#L72
1 Like