aca/emmet-ls

Emmet support based on LSP.

emmet-ls's Issues

Support for template engines (blade, vue, heex, etc)

Hey, this is great, I like it very much.

Have issue though, here's the thing: You can add filetype in your lsp configuration and that will work, but then this LS defaults to css snippets.
So if I add blade or php to nvim lsp file types language server is running but it gives snippets for css.

Maybe it would be better to add configuration option for lsp and allow to add file types separately for css and html snippet functionality.

Many languages use different templates for html so maybe it would be better to default on html rather than css.
I didn't dig too much into the code, but would it be possible to get both work on same file as 2 separate completion items?
Html / Vue can mix html and css in one file, so that would be nice to have as well, maybe as an option.

There is somehow related PR #16 that is adding blade support, but there are many more different template engines that I would like to have support for.

I can do PR myself if you are accepting the concept of additional configuration, or enabling both html / css in one file?

Support for htmldjango files

The language server gets confused in htmldjango files and expands snippets as if they are css files. Would be great to use emmet-ls in htmldjango files as well.

lspconfig: Autostart for emmet_ls failed: matching root directory not detected

After a recent update, “emmet_ls” just stopped working completely and prompted the following error message whenever an html or css file is opened:

The following is my config file:

-- Setup lspconfig.
  local capabilities = vim.lsp.protocol.make_client_capabilities()
  capabilities.textDocument.completion.completionItem.snippetSupport = true  
  
-- Emmet 
  require'lspconfig/configs'.emmet_ls = {
    default_config = {
      cmd = { 'emmet-ls', '--stdio' };
      filetypes = { 'html', 'css', 'scss', 'xml', 'pug', 'sass'};
      root_dir = function(fname)
        return vim.loop.cwd()
      end;
      settings = {};
    };
  }

-- Language Servers:
  local langservers = {
    'cssls',
    'html',
    'emmet_ls',
    'pylsp',
    'tsserver',
  } 

  for _, server in ipairs(langservers) do
    require'lspconfig'[server].setup {
      capabilities = capabilities
    }
  end

To troubleshoot this, I did clear out my config file and pasted in only the suggested configuration code below from GitHub but the same error message still pop-up indicating “root directory not detected”

local lspconfig = require'lspconfig'
local configs = require'lspconfig/configs'    

local capabilities = vim.lsp.protocol.make_client_capabilities()
capabilities.textDocument.completion.completionItem.snippetSupport = true

if not lspconfig.emmet_ls then    
  configs.emmet_ls = {    
    default_config = {    
      cmd = {'emmet-ls', '--stdio'};
      filetypes = {'html', 'css', 'blade'};
      root_dir = function(fname)    
        return vim.loop.cwd()
      end;    
      settings = {};    
    };    
  }    
end    
lspconfig.emmet_ls.setup{ capabilities = capabilities; }

All the other language servers are working properly except “emmet_ls.” Any reply would be great appreciated, million thanks in advance.

emmet-ls ignoring options in tsx/jsx file

lua/custom/configs/lspconfig.lua:

...
lspconfig.emmet_ls.setup {
  on_attach = on_attach,
  capabilities = capabilities,
  filetypes = {
    "css",
    "eruby",
    "html",
    "javascript",
    "javascriptreact",
    "less",
    "sass",
    "scss",
    "svelte",
    "pug",
    "typescriptreact",
    "vue",
  },
  init_options = {
    html = {
      options = {
        -- For possible options, see: https://github.com/emmetio/emmet/blob/master/src/config.ts#L79-L267
        ["output.selfClosingStyle"] = "xhtml",
      },
    },
  },
}

index.tsx

input /// clicking enter in completion list -----> <input type="text">

i was expecting to get <input type="text" /> notice the closing slash, that didn't work i even tried to change html to typescriptreact. and nothing.

is that bug or am i stupid guys : ).

SolidJS JSX support

SolidJS uses class instead of className.

Support for jsx

thx for the lsp, works great.
Is there any support for jsx or future plans.
here is my config for reference

local capabilities = vim.lsp.protocol.make_client_capabilities()

capabilities.textDocument.completion.completionItem.snippetSupport = true

require "lspconfig/configs".emmet_ls = {
  default_config = {
    cmd = {"emmet-ls", "--stdio"},
    filetypes = {"html", "css", "javascript", "javascriptreact", "javascript.jsx"},
    root_dir = require "lspconfig".util.root_pattern(".git", vim.fn.getcwd())
  }
}

require "lspconfig".emmet_ls.setup {
  on_attach = require "nvim-lsp".common_on_attach
}

Enable Logging

Is there a way to enable some form of logging so I can maybe get an understanding of why this is not working for me with Neovim?

Incorrect expand

It should expand to a div tag containing a p tag:

but does this:

PHP treated as stylesheet

Hello guys. I'm currently facing an issue that I don't know if there is something that I'm missing to set up. Basically, every time that I try to use emmet, it will show me the snippets for stylesheets instead of showing snippets for html. For example, the ! sign on the php file results in !important instead of the html scaffold. I'm I missing some configuration?

Thanks in advance...

[Question] Self closing tag

Is there a way to have a self closing tag like in emmet-vim (div/ -> <div />)?

Cursor position after completion.

Can be supported with the help of vim-vsnip.

Not working with nvim completion.

I tried to get this to work but there isn't much documentation on getting it setup. I followed the instructions on the README but the completions dont get triggered.. Any suggestions?

Usage via `omnifunc`

Hey!
Thank you for writing this plugin. I would like to use it with Neovim without any additional autocomplete plugins.

I've copied the configuration from the readme but I can't this plugin work with built-in autocomplete. I have a following on_attach function that connects omnifunc with lsp.omnifunc for the buffer:

local on_attach = function(client, bufnr)
    local map = vim.api.nvim_buf_set_keymap
    local ion = vim.api.nvim_buf_set_option
    local opts = { noremap = true }

    ion(bufnr, 'omnifunc', 'v:lua.vim.lsp.omnifunc')
    ion(bufnr, 'formatexpr', 'v:lua.vim.lsp.formatexpr()')

    -- Configure keybindings for LSP
    map(bufnr, 'n', 'C-y', '<Cmd>lua vim.lsp.buf.code_action()<CR>', opts)
    map(bufnr, 'n', 'g0', '<Cmd>lua vim.lsp.buf.document_symbol()<CR>', opts)
    map(bufnr, 'n', 'gf', '<Cmd>lua vim.lsp.buf.definition()<CR>', opts)
    map(bufnr, 'n', 'gi', '<Cmd>lua vim.lsp.buf.implementation()<CR>', opts)
    map(bufnr, 'n', 'gt', '<Cmd>lua vim.lsp.buf.type_definition()<CR>', opts)
    map(bufnr, 'n', 'gr', '<Cmd>lua vim.lsp.buf.references()<CR>', opts)
    map(bufnr, 'n', 'K', '<Cmd>lua vim.lsp.buf.hover()<CR>', opts)
end

Now, if I type valid emmet syntax in the HTML file (e.g. h1.center), and hit CTRL+x, CTRL+o, I see a following message in status line:

^X mode (^]^D^E^F^O^K^L^N^O^Ps^U^V^Y) Pattern not found

In the :LspLog I also see a following line (not sure if this is related):

[WARN][2023-11-25 18:55:55] ...lsp/handlers.lua:137	"The language server emmet_ls triggers a registerCapability handler despite dynamicRegistration set to false. Report upstream, this warning is harmless"

How can I force emmet to convert snippet to a proper HTML structure?

emmet-ls not expanding snippets

I am currently running NVIM v0.7.0. I was running into the same problem in NVIM v0.6.x.

I am using nvim-cmp and luasnip.

My nvim-cmp config is as follows:

local cmp = require "cmp"

-- Luasnip setup
require("luasnip.loaders.from_snipmate").load()

cmp.setup(
    {
        snippet = {
            expand = function(args)
                require "luasnip".lsp_expand(args.body) -- For `luasnip` users.
            end
        },
        mapping = {
             ["<C-n>"] = cmp.mapping(cmp.mapping.select_next_item()),
            ["<C-p>"] = cmp.mapping(cmp.mapping.select_prev_item()),
            ["<C-Space>"] = cmp.mapping( -- EXPAND SNIPPETS
                function(fallback)
                    if require "luasnip".expandable() then
                        require "luasnip".expand()
                    else
                        fallback()
                    end
                end,
                {"i"}
            ),
            ["<Tab>"] = cmp.mapping( -- jump forward
                function(fallback)
                    if require "luasnip".jumpable(1) then
                        require "luasnip".jump(1)
                    else
                        fallback()
                    end
                end,
                {"i", "s"}
            ),
            ["<S-Tab>"] = cmp.mapping(  -- jump backwards
                function(fallback)
                    if require "luasnip".jumpable(-1) then
                        require "luasnip".jump(-1)
                    else
                        fallback()
                    end
                end,
                {"i", "s"}
            )
        },
        sources = cmp.config.sources(
            {
                {name = "nvim_lsp"},
                {name = "luasnip"},
                {name = "path"},
                {name = "buffer"}
            }
        )
    }
)

-- Setup lspconfig.
local capabilities = require("cmp_nvim_lsp").update_capabilities(vim.lsp.protocol.make_client_capabilities())
local servers = {
    "bashls", --npm i -g bash-language-server
    "clangd", --brew install llvm & added to path
    "cssls", --npm i -g vscode-langservers-extracted
    "emmet_ls", --npm i -g emmet-ls
    "html", --npm i -g vscode-langservers-extracted & added npm to path
    "jsonls", --npm install -g vscode-langservers-extracted & added npm to path
    "quick_lint_js", --npm install -g quick-lint-js & added npm to path
    "r_language_server", -- in R: install.packages("languageserver")
    "texlab", --brew install texlab
    "vimls" --npm install -g vim-language-server & added npm to path
}
for _, lsp in ipairs(servers) do
    require("lspconfig")[lsp].setup {capabilities = capabilities}
end

And my luasnip config is as follows:

local ls = require("luasnip")
local types = require("luasnip.util.types")
-- If you're reading this file for the first time, best skip to around line 190
-- where the actual snippet-definitions start.

-- Every unspecified option will be set to the default.
ls.config.set_config(
    {
        history = true,
        updateevents = "TextChanged,TextChangedI",
        delete_check_events = "TextChanged",
        ext_opts = {
            [types.choiceNode] = {
                active = {
                    virt_text = {{"●", "TSTag"}}
                }
            }
        },
        ext_base_prio = 200,
        ext_prio_increase = 1,
        enable_autosnippets = false,
        store_selection_keys = "s",
        ft_func = function()
            return vim.split(vim.bo.filetype, ".", true)
        end
    }
)

require("luasnip.loaders.from_vscode").load({paths = {"~/.config/nvim/vsnips"}}) -- Load snippets from my-snippets folder

My problem is that whenever I try to expand any emmet snippet. It does not work.

For example, in a test.html file, when i run :LspInfo. Everything seems good, it tells me that the emmet server is active. But if I try to expand div.test, nothing happens...

emmet_ls is not working with html files

weird error with curly braces

.

Original text remains when expanding `ul>li.item$*5.` with nvim-compe

Probably issue with nvim-compe.

Is there a way to omit the colon.

d:f works.

But the colon requires two keys, Shift+;

So is there a way to omit the colon

Before calling LspRestart, the init_options will not take effect.

This is my emmet-ls configuration, and I want to output html in xhtml format. However, I found that the configuration did not take effect when I entered neovim. Strangely, after I continued to call :LspRestart in neovim, the configuration became effective.

lspconfig.emmet_ls.setup({
  -- ...
  init_options = {
    html = {
      options = {
        ["output.selfClosingStyle"] = "xhtml",
      },
    },
  },
})

For example: I open an HTML file with Neovim, type img, and it expands to

<img src="" alt="">

Then, I run :LspRestart, type img again, and it expands to

<img src="" alt="" /> <!-- This is where the options will appear. -->

Video:

2023-03-31.03.09.46.mov

automate release

Can't get it to work with AstroNvim

I've installed the plugin (I can see it in Mason) but doesn't seem to work; I don't get emmet expansions in autocomplete. Please advise!

Typing LspInfo I can't see it running:

 Language client log: /Users/arca.artem/.local/state/nvim/lsp.log
 Detected filetype:   html
 
 0 client(s) attached to this buffer: 
 
 Configured servers list: 

How to add `.gohtml` files to the list of available files

So I've been trying for hours to get this to work myself and here I am.

I added this line to my config

filetypes = { 'gohtml', 'html', 'css' },

But that doesn't actually allow me to use emmet with gohtml filetypes.

Emmet works with html and css.

What am I doing wrong?

emmet in PHP files won't close suggestion popup

Using the emmet-ls lsp paired with the intelephense lsp results in a buggy autocomplete experience. You can check it out in this video https://storage.siblanco.dev/emmetls.mp4 , where I keep pressing Enter (10 seconds). No problems if no php LSP is attached.

My emmet_ls config is the default one, just added php to filetypes:
return { filetypes = {'html', 'typescriptreact', 'javascriptreact', 'css', 'sass', 'scss', 'less', 'php'} }

Any idea what I could do?

"!" Character Trigger is missing from the `emmet-ls` npm package `v0.4.2`

Since Mason uses npm to install the language server, it tries to use the latest v0.4.2 of the NPM package.

I'm not sure how the process of releasing/pushing into NPM works in this repository, but it seem that the changes that was added in #63 is not present in the v0.4.2 of the NPM package.

The code looks like this in the code tab in NPM.

const triggerCharacters = [
        ">",
        ")",
        "]",
        "}",

        "@",
        "*",
        "$",
        "+",
        // and so on ...

Obviously this can be fixed by manually adding the ! character in the emmet-ls in your $HOME/home/lr/.local/share/nvim/mason/bin/emmet-ls file.

But still would be nice if the NPM package was updated to the latest master commit.

snippet text still alive after hit enter

Question: when do you plan to publish Release v0.4.1 on npm?

I can't find the latest release...

Adding scss

Is it possible for emmet-ls to work in scss? As for now it only works on css and html (for me)

django template support

The index.html file is a django template and that's why emmet doesn't work as expected, the abc.html file is normal html and if it works, it would be great to have emmet work in django templates as well.

django.html.mp4

add selected elements of a list inside of tags

if I have a list of elements. is there a way of adding them to an ordered list, such that each element is inside its own tag?

Support `html` tagged-template-literals

Please consider adding support for html-tagged template literals, such as you'd find with lit, FAST, htm, and others.

Current Behaviour

// example.js
html`
  div>button{hi}+input[pattern="[0-9]{3}"]
`
//                                       ^ cursor on ] here

No snippet suggested

Requested Behaviour

Snippet suggested:

hrsh7th/nvim-compe support request.

hrsh7th/nvim-compe support request.

Latest release missing bin file

The release on npm with version 0.4.1 doesn't seem to have been built properly (there's not out/ directory).

'class' being suggested instead of 'className' in a .js file

I'm having an issue where using div.rhs_cls keeps suggesting <div class="rhs_cls"></div> instead of <div className="rhs_cls"></div>

It works perfectly on jsx files, but not js files

Am I missing something or are js files not supported ?

I have the following lsp config:

lspconfig.emmet_ls.setup({
  on_attach = on_attach,
  capabilities = vim.lsp.protocol.make_client_capabilities(),
  ['capabilities.textDocument.completion.completionItem.snippetSupport'] = true,
  filetypes = { 'css', 'sass', 'scss', 'less', 'javascript' },

  init_options = {
    javascript = {
      options = {
        ["markup.attributes"] = { class = "className" },
      }
    },
    jsx = {
      options = {
        ["markup.attributes"] = { class = "className" },
      }
    },
    javascriptreact = {
      options = {
        ["markup.attributes"] = { class = "className" },
      }
    }
  }
})

Some HTML abbrevations not showing

A lot of HTML abbreviations does not show up in the completion list until you type the full abbreviation.

For example, link:favicon and !!! requires you to type the entire thing before being able to complete/expand it. I suspect that this might be an issue with nvim-cmp, because they contain special characters, but I'm not completely sure.

Text is not deleted after snippet

Input text to start the snippet is not deleted after completion:

I'm using neovim lsp-config, cmp and vim-vsnip for snippet completion. Other snippets work fine.

emmet-ls completes with a space between the elements and cursor position

Let me explain a bit more what I mean by this.

Essentially what I expected was this:

<section>
  <h1>${1}</h1>
</section>

instead I get this:

<section>
  <h1> ${1} </h1>
</section>

is there any way for me to edit that space for the completion so I can get as close to the expected result as possible?

Here is a screenshot of what I mean.

Is it possible to disable completions just for emmet_ls provided by nvim-cmp?

I've noticed on my typescriptreact project that, if you start typing anything, the cmp completions are triggered for both emmet_ls and tsserver. Is it possible to use both emmet_ls and tsserver without completions for emmet_ls appearing? The image below describes my problem.

Issue with multiple servers

If we enable this with other lsps for example into react project.

emmet-ls do not allow others show completion items and g:completion_trigger_character do not generate the code.

class not expanding to className .js files

emmetio/emmet has config option for this purpose

Style tag snippet bug

Wrap in abbreviation

Given

<dl>
  <dt>Term</dt>
  <super-duper>Definition</super-duper>
<!--   ☝️ cursor here -->
</dl>

I'd like to perform a text action, e.g. gwat ("Go wrap a tag") which would prompt for an emmet abbreviation then wrap the text object (the tag) in an abbreviation.
So in that example, if I performed: gwat dd.super <cr>, then I would get the following:

<dl>
  <dt>Term</dt>
  <dd class="super">
    <super-duper>Definition</super-duper>
  </dd>
</dl>

If then, I visually selected the dt and dd tags, and performed gw div <cr>, I'd get:

<dl>
  <div>
    <dt>Term</dt>
    <dd class="super">
      <super-duper>Definition</super-duper>
    </dd>
  </div>
</dl>

Doesn't work with nvim-cmp

Look's like the client doesn't attach. But after execute :LspStart emmet_ls still the same.

CONFIG:

local lspconfig = require'lspconfig'
local configs = require'lspconfig/configs'  

local capabilities = require('cmp_nvim_lsp').update_capabilities(vim.lsp.protocol.make_client_capabilities())
capabilities.textDocument.completion.completionItem.snippetSupport = true
capabilities.textDocument.completion.completionItem.resolveSupport = {
  properties = {
    'documentation',
    'detail',
    'additionalTextEdits',
  }
}

if not lspconfig.emmet_ls then
  configs.emmet_ls = {
    default_config = {
      cmd = {'emmet-ls', '--stdio'};
      filetypes = {'html', 'css', 'scss'};
      root_dir = function(fname)
        return vim.loop.cwd()
      end;
      settings = {};
    };
  }
end
lspconfig.emmet_ls.setup{ capabilities = capabilities; }

I dont understand how "markup.valuePrefix" works in jsx

I was reading through the configurations and I saw "markup.valuePrefix" and an explanation and it be really nice to set up. If I understand the concept, it can make className=value to className={styles.value}. What is confusing me is that I see that he default configuration uses this for JSX, yet I cant trigger it.

I tried testing the trigger with something like div[classtest=value], but it didn't prefix the values with the word "styles". Even though its seems like its in the default settings.

I'm just read this configure today and I don't understand why this is happening. Could someone help me figure out what I am missing?
Also I could use help on figuring out how to pass in custom options as all my attempts has failed.

cant use emmet

[lspconfig] Autostart for emmet_ls failed: matching root directory not detected.
[lspconfig] Autostart for emmet_ls failed: matching root directory not detected.

da error is this. i cant even understand what the heck it is saying

Handlebars file should get html completion, but they are getting css

I handlebar file which is currently detected as filetype 'html.handlebars' within my neovim uses css completions. I would expect to html emmet completion instead.

I've managed to fix that by adding 'html.handlebars' to the htmlLanguages list. Another possibility will be to have html as default when the filetype doesn't match any of the default ones.

Also it'll be ideal if this htmlLanguages list could be configurable.

Disable arbitrary tag names

Right now asdf expands into <asdf></asdf>.
Is there a way to disable that and only expand valid HTML tags?

Unable to get css snippets

With nvim's builtin LSP server and completion.nvim, with configuration such as:

local capabilities = vim.lsp.protocol.make_client_capabilities()
capabilities.textDocument.completion.completionItem.snippetSupport = true

local configs = require "lspconfig/configs"

configs.emmet_ls = {
  default_config = {
    cmd = {"emmet-ls", "--stdio"},
    filetypes = {"html", "css", "vue", "scss"},
    root_dir = function()
      return vim.loop.cwd()
    end,
    settings = {}
  }
}

lspconfig.emmet_ls.setup {
  on_attach = on_attach,
  capabilities = capabilities
}

I am not getting any snippet completions candidates for emmet in css, vue and scss files. Should it work at all or am I misconfiguring something?

Thanks.

Weird behaviour with neovim builtin lsp and completion-nvim

When expanding the emmet abbreviation is not replaced and newlines and indentation doesnt work.
Example
div>h.
Converts to
div>h.<div> <h class=""></h> </div>

Any way for this package to support styled-components css rules?

I installed and configured this package, it works fine in css files, however it doesn't complete css rules as expected in styled-components (however, it attaches typescriptreact files thus I assumed it should?).

Attaching 2 examples of completion in .css and .tsx file:

Expands with tab indentation instead of spaces

Hi, there. I am enjoying the progress being made on this super useful tool, but I have one small issue with it at the moment.

I am using you language server in conjunction with nvim-compe, and I am finding that expanding any >1 line snippet results in a tab indented output.

For example:

Expanding div>ul>li*3 will output the following:

<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

...Which seems to work fine, but...

Looking at the screenshot below you can see that it is indented using tabs (screenshot is using :set list to make the tabs visible:

My stack is set to use spaces (2) as indentation by default:

vim.o.smartindent = true
vim.o.expandtab = true
vim.o.shiftround = true
vim.o.softtabstop = 2
vim.o.tabstop = 2
vim.o.shiftwidth = 2

The language server is setup with the following config (Neovim built-in LSP):

local lspconfig = require "lspconfig"
local configs = require "lspconfig/configs"
local capabilities = vim.lsp.protocol.make_client_capabilities()

capabilities.textDocument.completion.completionItem.snippetSupport = true

configs.emmet_ls = {
  default_config = {
    cmd = {"emmet-ls", "--stdio"},
    filetypes = {"html", "css"},
    root_dir = function()
      return vim.loop.cwd()
    end,
    settings = {}
  }
}

lspconfig.emmet_ls.setup {
  on_attach = on_attach
}

And nvim-compe is setup like so:

require "compe".setup {
  autocomplete = true,
  min_length = 1,
  preselect = "enable",
  documentation = true,
  source = {
    ultisnips = true,
    nvim_lsp = true,
    buffer = true,
    path = true
  }
}
set_keymap("i", "<CR>", "compe#confirm('<CR>')", {expr = true, noremap = true})

I was wondering if this is a bug with emmet-ls or something else?

You can see my entire Neovim setup in my Dotfiles