web.nvim

The all-in-one solution to setup a web development environment in neovim.

Important

Still under development but feel free to use and give feedback on anything missing.

Features

• No lspconfig plugin needed, using builtin vim.lsp.start()
• Automatically setup lsp servers based on project (tsserver, eslint, css, html, volar, svelte, astrojs, tailwindcss, WIP: angularls)
• Automatically setup formatters (prettier, WIP: biomejs)
• Format code - :WebLspFormat, additional set the format_on_save option to format on save
• Run code actions on save feature (WIP)
• Refactor code - :WebRefactorAction
• Quickfix code - :WebQuickfixAction
• Source action - :WebSourceAction
• Inlay hints (if using nvim 0.10 and above, opt-out feature)
• Tsserver specific
  • Organize imports - :WebTsserverOrganizeImports
  • Go to source definition, helpful when you do not want d.ts but direct to source file (for example, go to .js file instead of d.ts definition) - :WebTsserverGoToSourceDefinition
• Eslint specific
  • Fix eslint errors - :WebEslintFixAll
• Run package.json scripts via :WebRun
• Debugging: nvim-dap is required (WIP)

Install

vim-plug

Plug 'creativenull/web.nvim'

lazy.nvim

{
  'creativenull/web.nvim',
  config = function()
    -- ...
  end,
}

Setup

-- You can use that exact same on_attach you have already defined for lspconfig
-- or create one like below
local on_attach = function(client, bufnr)
  -- ...
end

local capabilities = vim.lsp.protocol.make_client_capabilities()

require('web').setup({
  on_attach = on_attach,
  capabilities = capabilities,

  -- Format the buffer using formatting tools prettier and biomejs (WIP), if available
  format_on_save = false,

  -- LSP specific settings for your needs
  lsp = {
    css = {}, -- No settings needed for now

    html = {}, -- No settings needed for now

    -- Astrojs LSP settings
    astro = {
      inlay_hints = vim.fn.has("nvim-0.10") == 1 and "minimal" or "",
    },

    -- Volarjs LSP settings
    volar = {
      inlay_hints = vim.fn.has("nvim-0.10") == 1,
    },

    -- Sveltejs LSP settings
    svelte = {
      inlay_hints = vim.fn.has("nvim-0.10") == 1 and "minimal" or "",
    },

    -- TS Server LSP settings
    tsserver = {
      -- Enable the minimal option of inlay hints if runnning on nvim 0.10 or above
      inlay_hints = vim.fn.has("nvim-0.10") == 1 and "minimal" or "",

      -- Code actions to run on save, not implemented yet
      -- Waiting for this PR to be stable/merged (https://github.com/neovim/neovim/pull/22598)
      code_actions_on_save = {
        "source.organizeImports.ts",
        "source.fixAll.ts",
        "source.removeUnused.ts",
        "source.addMissingImports.ts",
        "source.removeUnusedImports.ts",
        "source.sortImports.ts",
      },
    },

    -- Eslint LSP settings
    eslint = {
      workspace = true,
      flat_config = false,
      code_actions_on_save = {
        "source.fixAll.eslint",
      },
    },

    -- TailwindCSS LSP settings
    tailwindcss = {
      additional_filetypes = nil,
    },
  },
})

Capabilities

If using nvim-cmp or similar that provide you with custom capabilities, then you can use that. For example:

local capabilities = require('cmp_nvim_lsp').default_capabilities()

Or if you have a custom completion plugin that doesn't come with that support then use the following:

local capabilities = vim.lsp.protocol.make_client_capabilities()

-- Let LSP server know you support snippets too
capabilities.textDocument.completion.completionItem.snippetSupport = true
capabilities.textDocument.completion.completionItem.preselectSupport = true
capabilities.textDocument.completion.completionItem.insertReplaceSupport = true
capabilities.textDocument.completion.completionItem.resolveSupport = {
  properties = {
    'documentation',
    'detail',
    'additionalTextEdits',
  },
}