Files
neovim_conf/lua/configs/webdev.lua
2025-10-05 16:58:08 +03:00

104 lines
3.5 KiB
Lua

-- 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 = {
"<!DOCTYPE html>",
"<html lang=\"en\">",
"<head>",
" <meta charset=\"UTF-8\">",
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
" <title>Document</title>",
"</head>",
"<body>",
" ",
"</body>",
"</html>"
}
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 (",
" <div>",
" <h1>" .. component_name .. "</h1>",
" </div>",
" );",
"};",
"",
"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", "<leader>cl", "oconsole.log();<Esc>hi", opts)
vim.keymap.set("i", "clog", "console.log();<Esc>hi", opts)
end
-- Quick tag closing for HTML
if vim.bo.filetype == "html" then
vim.keymap.set("i", ">>", "></<C-x><C-o>", opts)
end
end,
})
end
return M