adelarsq / web-tools.nvim

Neovim plugin for web developers

web-tools.nvim

• Neovim Wrapper for ❤️ browser-sync
• http/ccs LSP.
• Hurl/curl web API testing

Fetures

• View your html/css files with a live web server locally
• HTML & CSS tag rename, repeat rename action
• Test your web API with Hurl/curl

web server live view

webtools.mov

Test web API with Hurl

Install

• require
  • neovim 0.7+
  • browser-sync
  • optional: lspconfig & vscode-langservers-extracted

Install browser sync

npm install -g browser-sync

LSP for html & cssls

npm i -g vscode-langservers-extracted

Instal hurl

install hurl

Other depencies

Not required, but recommended

• prettier for html/css format
• jq for json format
• Treesitter for json5 better json support

Plug

Plug 'ray-x/web-tools.nvim'

Setup

require'web-tools'.setup({
  keymaps = {
    rename = nil,  -- by default use same setup of lspconfig
    repeat_rename = '.', -- . to repeat
  },
  hurl = {  -- hurl default
    show_headers = false, -- do not show http headers
    floating = false,   -- use floating windows (need guihua.lua)
    json5 = false,      -- use json5 parser require json5 treesitter
    formatters = {  -- format the result by filetype
      json = { 'jq' },
      html = { 'prettier', '--parser', 'html' },
    },
  },
})

Commands

command	Description
BrowserSync {args}	run browser-sync server with args
BrowserOpen {args}	open browser-sync, if browser-sync is not start, start it with args
BrowserPreview {-f --port 3000}	preview current file with browser sync
BrowserRestart	restart browser sync
Browserstop	stop browser sync
TagRename {newname}	rename html tag
HurlRun {args}	Run Hurl, when in Visual mode, run selected snippets

Note: {args} is optional, if not provided, check browser-sync for all args options --port: specify port to open, if BrowserPreview port is different from BrowserSync port, open without check browser-sync server