-- Create: lua/configs/webdev.lua
local M = {}
M.setup = function()
-- Web development settings
vim.api.nvim_create_autocmd("FileType", {
pattern = { "html", "css", "javascript", "typescript", "json" },
callback = function()
vim.opt_local.tabstop = 2
vim.opt_local.shiftwidth = 2
vim.opt_local.expandtab = true
vim.opt_local.softtabstop = 2
end,
})
-- Quick commands for web development
vim.api.nvim_create_user_command("NodeRun", function()
vim.cmd("!node %")
end, { desc = "Run current JavaScript file with Node.js" })
vim.api.nvim_create_user_command("LiveServer", function()
-- This assumes you have live-server installed globally
-- npm install -g live-server
vim.cmd("!live-server .")
end, { desc = "Start live server in current directory" })
-- HTML5 template insertion
vim.api.nvim_create_user_command("HTMLTemplate", function()
local template = {
"",
"",
"",
" ",
" ",
" Document",
"",
"",
" ",
"",
""
}
vim.api.nvim_put(template, "l", true, true)
end, { desc = "Insert HTML5 template" })
-- React component template
vim.api.nvim_create_user_command("ReactComponent", function()
local filename = vim.fn.expand("%:t:r")
local component_name = filename:gsub("^%l", string.upper)
local template = {
"import React from 'react';",
"",
"const " .. component_name .. " = () => {",
" return (",
" ",
"
" .. component_name .. "
",
" ",
" );",
"};",
"",
"export default " .. component_name .. ";"
}
vim.api.nvim_put(template, "l", true, true)
end, { desc = "Insert React component template" })
-- Package.json quick commands
vim.api.nvim_create_user_command("NpmInit", function()
vim.cmd("!npm init -y")
end, { desc = "Initialize package.json" })
vim.api.nvim_create_user_command("NpmInstall", function()
vim.cmd("!npm install")
end, { desc = "Install npm dependencies" })
vim.api.nvim_create_user_command("NpmDev", function()
vim.cmd("!npm run dev")
end, { desc = "Run npm dev script" })
vim.api.nvim_create_user_command("NpmBuild", function()
vim.cmd("!npm run build")
end, { desc = "Run npm build script" })
-- Set up some useful keymaps for web development
vim.api.nvim_create_autocmd("FileType", {
pattern = { "html", "css", "javascript", "typescript", "javascriptreact", "typescriptreact" },
callback = function()
local opts = { noremap = true, silent = true, buffer = true }
-- Console.log snippet for JS/TS files
if vim.bo.filetype == "javascript" or vim.bo.filetype == "typescript" then
vim.keymap.set("n", "cl", "oconsole.log();hi", opts)
vim.keymap.set("i", "clog", "console.log();hi", opts)
end
-- Quick tag closing for HTML
if vim.bo.filetype == "html" then
vim.keymap.set("i", ">>", ">", opts)
end
end,
})
end
return M