ray-x/web-tools.nvim

github github
programming-languages-supportweb-development
stars 132
issues 2
subscribers 3
forks 5
CREATED

2022-01-04

UPDATED

2 months ago


web-tools.nvim

  • Neovim Wrapper for ❤️ browser-sync
  • http/ccs LSP.
  • Hurl/curl web API testing
  • npm/yarn/pnpm/npx/node wrapper

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
  • Run npm/yarn/pnpm/npx/node command and automatically open browser for preview in neovim

web server live view

https://user-images.githubusercontent.com/1681295/187396525-82a387c8-addc-4776-9a03-78da40834d45.mov

Test web API with Hurl

Hurl

Install

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

Install browser sync

npm install -g browser-sync

or withing neovim run :Npm install -g browser-sync

LSP for html & cssls

npm i -g vscode-langservers-extracted

or within neovim run :Npm install -g vscode-langservers-extracted

Instal hurl

install hurl

Other depencies

Not required, but recommended

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
Npm {args} Run npm, e.g. npm -i package-name
Yarn {args} Run yarn, e.g. yarn add package-name
Pnpm {args} Run pnpm, e.g. pnpm add package-name
Npx {args} Run npx, e.g. npx add package-name
Node {args} Run node, e.g. node script.js
JobStop {jobid} Stop job by jobid, stop last unfinished job if jobid is nil

[!Note] {args} can be optional, if not provided, check command help, e.g. 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