如何在HTML script标签内启用JavaScript LSP及Neovim代码检查配置

一、启用JavaScript LSP处理HTML中的script标签 #

大部分主流HTML LSP（如vscode-html-languageserver）默认支持与JavaScript LSP（如tsserver）联动，核心是让HTML LSP将script块的内容转发给JS LSP处理：

• 确保编辑器已同时启用HTML LSP和tsserver
• 配置HTML LSP的settings，开启对JavaScript的支持：
  以通用LSP配置格式为例：

  {
    "html.javascript.suggest.enabled": true,
    "html.javascript.format.enable": true
  }
  

  配置后HTML LSP会自动识别script标签内的JS代码，并调用tsserver提供补全、定义跳转等LSP功能。

二、Neovim下的具体实现方案 #

1. 配置HTML LSP与tsserver联动 #

使用nvim-lspconfig时，在HTML LSP的setup中添加相关配置，确保它能触发tsserver处理script内容：

local capabilities = vim.lsp.protocol.make_client_capabilities()
capabilities.textDocument.completion.completionItem.snippetSupport = true

require('lspconfig').html.setup({
  capabilities = capabilities,
  settings = {
    html = {
      suggest = {
        javascript = true
      },
      javascript = {
        format = {
          enable = true
        }
      }
    }
  }
})

-- 同时确保tsserver正常启用
require('lspconfig').tsserver.setup({
  capabilities = capabilities,
  -- 可选：仅在JS/TS文件及HTML的script块激活tsserver功能，避免全局干扰
  on_attach = function(client, bufnr)
    local ft = vim.api.nvim_buf_get_option(bufnr, 'filetype')
    if ft == 'html' then
      local function check_script_block()
        local query = vim.treesitter.query.parse('html', '(script_element (raw_text) @js)')
        local parser = vim.treesitter.get_parser(bufnr, 'html')
        local tree = parser:parse()[1]
        local cursor = vim.api.nvim_win_get_cursor(0)
        local row = cursor[1] - 1
        for _, node in query:iter_captures(tree:root(), bufnr, row, row+1) do
          local start_row, _, end_row, _ = node:range()
          if row >= start_row and row <= end_row then
            return true
          end
        end
        return false
      end
      -- 光标移动时动态启用/禁用tsserver功能
      vim.api.nvim_create_autocmd('CursorMoved', {
        buffer = bufnr,
        callback = function()
          local in_script = check_script_block()
          client.server_capabilities.completionProvider = in_script
          client.server_capabilities.definitionProvider = in_script
          client.server_capabilities.hoverProvider = in_script
        end
      })
    end
  end
})

2. 用ESLint检查HTML/templ中的script代码 #

• 先安装eslint-plugin-html：

  npm install eslint-plugin-html --save-dev
  

• 在.eslintrc中配置处理器，让ESLint解析HTML文件中的script块：

  {
    "plugins": ["html"],
    "overrides": [
      {
        "files": ["*.html", "*.templ"],
        "processor": "html/html"
      }
    ]
  }
  

• 在Neovim中通过null-ls集成ESLint（也可直接用nvim-lspconfig）：

  local null_ls = require('null-ls')
  null_ls.setup({
    sources = {
      null_ls.builtins.diagnostics.eslint_d.with({
        filetypes = { 'javascript', 'typescript', 'html', 'templ' }
      }),
      null_ls.builtins.formatting.eslint_d.with({
        filetypes = { 'javascript', 'typescript', 'html', 'templ' }
      })
    }
  })
  

3. Templ文件的额外配置 #

如果是Go的templ模板文件，需先安装templ的treesitter解析器，让Neovim识别templ中的script块：

git clone https://github.com/vrischmann/tree-sitter-templ.git ~/.local/share/nvim/site/pack/packer/start/tree-sitter-templ

然后在treesitter配置中启用templ：

require('nvim-treesitter.configs').setup({
  ensure_installed = { 'templ', 'javascript', 'html' },
  highlight = {
    enable = true,
    additional_vim_regex_highlighting = false
  }
})

配置完成后即可用上述HTML的方案处理templ中的script代码。

内容的提问来源于stack exchange，提问作者Fayeure