How to Set Up Emmet in Neovim

Emmet is a powerful plugin that can significantly improve your HTML and CSS workflow by allowing you to write abbreviations that expand into full-fledged code snippets. Setting up Emmet in Neovim may seem daunting at first, but with the right steps, you can have it up and running in no time.

Prerequisites

Neovim installed on your system
Neovim configuration file (e.g., init.lua or init.vim)

Steps

Create a new file called
```
init.lua
```
(or use your existing one) in the
```
~/.config/nvim/
```
directory.

Add the following code to bootstrap

Lazy.nvim


local lazypath = vim.fn.stdpath("data") .. "/lazy/lazy.nvim"
if not (vim.uv or vim.loop).fs_stat(lazypath) then
  local lazyrepo = "https://github.com/folke/lazy.nvim.git"
  local out = vim.fn.system({ "git", "clone", "--filter=blob:none", "--branch=stable", lazyrepo, lazypath })
  if vim.v.shell_error ~= 0 then
    vim.api.nvim_echo({
      { "Failed to clone lazy.nvim:\n", "ErrorMsg" },
      { out, "WarningMsg" },
      { "\nPress any key to exit..." },
    }, true, {})
    vim.fn.getchar()
    os.exit(1)
  end
end
vim.opt.rtp:prepend(lazypath)

Install the nvim-emmet plugin: Add the following configuration to your init.lua file, inside the require("lazy").setup({ ... }) block:


{
  "olrtg/nvim-emmet",
  config = function()
    vim.keymap.set({ "n", "v" }, "xe", require("nvim-emmet").wrap_with_abbreviation)
  end,
},

Install the emmet-language-server: Add the following configuration to your init.lua file, after the require("lazy").setup({ ... }) block:


vim.api.nvim_create_autocmd({ "FileType" }, {
	  pattern = "css,eruby,html,htmldjango,javascriptreact,less,pug,sass,scss,typescriptreact",
	  callback = function()
	    vim.lsp.start({
	      cmd = { "emmet-language-server", "--stdio" },
	      root_dir = vim.fs.dirname(vim.fs.find({ ".git" }, { upward = true })[1]),
	      init_options = {
		-- Emmet configuration options go here
	      },
	    })
	  end,
	})

Install the emmet-language-server using the Mason plugin manager: Add the following configuration to your init.lua file, inside the require("lazy").setup({ ... }) block:
```
{
  "mason-org/mason.nvim",
  opts = {},
},
								
```
Then, within Neovim, run the command
```
:MasonInstall emmet-language-server
```
to install the server.

Open a file with an HTML, CSS, or other supported file type.
Type an Emmet abbreviation, such as
```
html:5
```
, and press
```
xe
```
(by default,
is set to
```
SPACE
```
on your keyboard).
Emmet should expand the abbreviation into the corresponding code snippet.

That's it! You've now successfully set up Emmet in your Neovim configuration. You can further customize the Emmet settings and keybindings to suit your preferences.