Code Monkey home page Code Monkey logo

emmet's Introduction

Emmets

Emmet server for neovim completion based on LSP and official emmet library.

See emmet documentation here

emmet-gif

Requirements

  1. nvim-lspconfig Installed
  2. A completion plugin that supports LSP, like:
  3. A Snippet plugin that supports LSP, like:

Install

npm install -g ls_emmet

Configuration

In your neovim config:

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 configs.ls_emmet then
  configs.ls_emmet = {
    default_config = {
      cmd = { 'ls_emmet', '--stdio' };
      filetypes = {
        'html',
        'css',
        'scss',
        'javascriptreact',
        'typescriptreact',
        'haml',
        'xml',
        'xsl',
        'pug',
        'slim',
        'sass',
        'stylus',
        'less',
        'sss',
        'hbs',
        'handlebars',
      };
      root_dir = function(fname)
        return vim.loop.cwd()
      end;
      settings = {};
    };
  }
end

lspconfig.ls_emmet.setup { capabilities = capabilities }

Just type:

table>tr*3>td*2

And it will be expanded to:

<table>
  <tr>
    <td>|</td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

Contribuiting

Bug reports, feature suggestions and especially code contributions are welcome. You open a GitHub issue or pull request. Please read this document before opening an issue.

Supported Languages

Markup StyleSheets
HTML CSS
TSX SCSS
JSX SASS
JS STYLUS
XML SSS
XSL LESS
HAML
PUG
SLIM
HBS

emmet's People

Contributors

baltazore avatar pedro757 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

emmet's Issues

how to see all html tags?

In theory, all the html tags should appear in the autocomplete. in the readme.md for example these tags appear:
image

but in my case nothing appears, only the word that I am putting
image

that's normal? or do I need to add something to my configuration?

My lsp and cmp config:

lsp.vim:

syntax enable

filetype plugin indent on

set completeopt=menuone,noinsert,noselect
set shortmess+=c

lua <<EOF
  -- setup nvim-lsp
  vim.lsp.handlers["textDocument/publishDiagnostics"] =
    vim.lsp.with(vim.lsp.diagnostic.on_publish_diagnostics,
                 {update_in_insert = true})

  -- Hover Config
  function HoverFixed()
    vim.api.nvim_command('set eventignore=CursorHold')
    vim.lsp.buf.hover()
    vim.api.nvim_command('autocmd CursorMoved <buffer> ++once set eventignore=""')
  end

      vim.lsp.handlers['textDocument/implementation'] = require'lsputil.locations'.implementation_handler

EOF

cmp.vim:

lua <<EOF
  -- Setup nvim-cmp.
local has_words_before = function()
  local line, col = unpack(vim.api.nvim_win_get_cursor(0))
  return col ~= 0 and vim.api.nvim_buf_get_lines(0, line - 1, line, true)[1]:sub(col, col):match('%s') == nil
end

local cmp = require('cmp')
local lspkind = require('lspkind')
local lspconfig = require'lspconfig'
local configs = require'lspconfig.configs'

-- icons
local kind_icons = {
  Text = '',
  Method = '',
  Function = '',
  Constructor = '',
  Field = '',
  Variable = '',
  Class = '',
  Interface = '',
  Module = '',
  Property = '',
  Unit = '',
  Value = '',
  Enum = '',
  Keyword = '',
  Snippet = '',
  Color = '',
  File = '',
  Reference = '',
  Folder = '',
  EnumMember = '',
  Constant = '',
  Struct = '',
  Event = '',
  Operator = '',
  TypeParameter = '',}

-- Setup CMP

  cmp.setup({
    formatting = {
      format = function(entry, vim_item)
        -- Kind icons
        vim_item.kind = string.format('%s %s', kind_icons[vim_item.kind], vim_item.kind)
        -- Source
        vim_item.menu = ({
          buffer = "",
          nvim_lsp = "",
          luasnip = "",
          nvim_lua = "",
          latex_symbols = "",
       })[entry.source.name]
        return vim_item
      end
    },
    snippet = {
      expand = function(args)
        -- vim.fn["vsnip#anonymous"](args.body)
        require('luasnip').lsp_expand(args.body)
      end,
    },
    mapping = {
      ['<C-ScrollWheelUp>'] = cmp.mapping(cmp.mapping.scroll_docs(-4), {'i', 'c'}),
      ['<C-ScrollWheelDown>'] = cmp.mapping(cmp.mapping.scroll_docs(4), {'i', 'c'}),
      ['<C-Space>'] = cmp.mapping(cmp.mapping.complete(), { 'i', 'c' }),
      ['<CR>'] = cmp.mapping.confirm({ select = true }),

      ['<Tab>'] = function(fallback)
        if not cmp.select_next_item() then
          fallback()
        end
      end,

      ['<Down>'] = function(fallback)
        if not cmp.select_next_item() then
          fallback()
        end
      end,

      ['<ScrollWheelDown>'] = function(fallback)
        if not cmp.select_next_item() then
          fallback()
        end
      end,

    ['<S-Tab>'] = function(fallback)
      if not cmp.select_prev_item() then
        fallback()
      end
    end,

    ['<ScrollWheelUp>'] = function(fallback)
      if not cmp.select_prev_item() then
        fallback()
      end
    end,

    ['<Up>'] = function(fallback)
      if not cmp.select_prev_item() then
        fallback()
      end
    end,

    ['<ESC>'] = function(fallback)
      if cmp.visible() then
        cmp.close()
      else
        fallback()
      end
    end,

    },
    sources = cmp.config.sources({
      { name = 'nvim_lsp' },
      { name = 'luasnip' },
    }, {
      { name = 'buffer' },
      { name = "crates" },
      { name = 'nvim_lsp_signature_help' },
    })
  })

  -- Use buffer source for `/` (if you enabled `native_menu`, this won't work anymore).
  cmp.setup.cmdline('/', {
    sources = cmp.config.sources({
      { name = 'nvim_lsp_document_symbol' }
    }, {
      { name = 'buffer' }
    })
  })
  -- Use cmdline & path source for ':' (if you enabled `native_menu`, this won't work anymore).
  cmp.setup.cmdline(':', {
    sources = cmp.config.sources({
      { name = 'path' }
    }, {
      { name = 'cmdline' }
    })
  })

  -- Setup lspconfig.
  local capabilities = require('cmp_nvim_lsp').update_capabilities(vim.lsp.protocol.make_client_capabilities())
  -- Rust
  require('lspconfig')['rust_analyzer'].setup {
    capabilities = capabilities
  }
  -- Python
  require('lspconfig')['pyright'].setup {
    capabilities = capabilities
  }
  -- C/C++
  require('lspconfig')['clangd'].setup {
    capabilities = capabilities
  }
  -- Tsserver
  require('lspconfig')['tsserver'].setup {
    cmd = { "typescript-language-server", "--stdio" },
    filetypes = { "javascript", "javascriptreact", "javascript.jsx", "typescript", "typescriptreact", "typescript.tsx" },
    init_options = {
      hostInfo = "neovim"
    },
    single_file_support = true,
    root_dir = require("lspconfig").util.root_pattern("package.json", "tsconfig.json", "jsconfig.json", ".git")
  }
  -- Vue
  require('lspconfig')['vuels'].setup {
    capabilities = capabilities
  }
  -- Html
  require('lspconfig')['html'].setup {
    capabilities = capabilities
  }
  -- Css
  require('lspconfig')['cssls'].setup {
    capabilities = capabilities
  }
  -- Golang
  require('lspconfig')['gopls'].setup {
    cmd = { "gopls" },
    filetypes = { "go", "gomod", "gotmpl" },
    single_file_support = true
  }
  -- CMake
  require('lspconfig')['cmake'].setup {
    capabilities = capabilities
  }
  -- Eslint
  require('lspconfig')['eslint'].setup {
    capabilities = capabilities
  }
  -- Json
  require('lspconfig')['jsonls'].setup {
    capabilities = capabilities
  }
  -- Assembly
  require('lspconfig')['asm_lsp'].setup {
    capabilities = capabilities,
    root_dir = require("lspconfig").util.root_pattern{"*"}
  }
  -- Bash
  require('lspconfig')['bashls'].setup {
    capabilities = capabilities
  }

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

  if not configs.ls_emmet then
    configs.ls_emmet = {
      default_config = {
        cmd = { 'ls_emmet','--inspect', '--stdio' };
        filetypes = {
          'html',
          'css',
          'scss',
          'javascriptreact',
          'typescriptreact',
          'haml',
          'xml',
          'xsl',
          'pug',
          'slim',
          'sass',
          'stylus',
          'less',
          'sss',
          'hbs',
          'handlebars',
        };
        root_dir = function(fname)
          return vim.loop.cwd()
        end;
        settings = {};
      };
    }
  end

  lspconfig.ls_emmet.setup { capabilities = capabilities }
EOF

Question: Disable emmet withing the script tag.

Hi, I don't if this is a bug, but when writing javascript within the script tag, it tries to turn whatever I'm writing into a tag. Is there a way to disable it only within the `script' tag?
It happens with the 'style' tag as well. btw.

I have it configured as a nvim-lsp-installer custom server:

    local lspconfig = require('lspconfig')
    local configs = require('lspconfig.configs')
    local servers = require('nvim-lsp-installer.servers')
    local server = require('nvim-lsp-installer.server')
    local path = require('nvim-lsp-installer.path')
    local npm = require('nvim-lsp-installer.installers.npm')
    
    local server_name = 'ls_emmet'
    
    if not configs.ls_emmet then
      configs.ls_emmet = {
        default_config = {
          filetypes = { 'html', 'css', 'scss', 'sass', 'javascript', 'javascriptreact', 'typescript', 'typescriptreact' },
          root_dir = function()
            return vim.loop.cwd()
          end,
          settings = {},
        },
      }
    end
    
    local root_dir = server.get_server_root_path(server_name)
    
    local installer = npm.packages({ 'ls_emmet' })
    
    local ls_emmet = server.Server:new({
      name = server_name,
      root_dir = root_dir,
      installer = installer,
      default_options = {
        cmd = { path.concat({root_dir, 'node_modules', '.bin', 'ls_emmet'}), '--stdio' },
      },
    })
    
    servers.register(ls_emmet)

Thanks, great language server.

Change between markup and stylesheets emmets based on context

A cool feature will be to change between markup and stylesheets emmets based on cursor context, this is a nice feature, specially in filetypes like jsx tsx wherein both kinds of emmets are used.

For example:

import React from 'react';
import styled from 'styled-components'

const Button = styled.button`
  border: 2px solid;
  margin: 0 1em;
`
//  TYPING p10 DOES NOT WORK 

const Home = () => {
  return (
    <>
      <div>hola</div>
      {/*  TYPING (table>tr*3) WORKS  */}
    </>
  );
};

export default Home;

I don't know how to achieve this, maybe treesitter? Any ideas?

php and js

how can i make php equal to js and html?

php
js
html

Limit Markup for HTML

Hi
Is it possible to limit the markup to HTML elements and attributes and avoiding the behaviour in the image below ( which is an expected behaviour for javascriptreact and jsx . )
2

Use in Liquid Files

I'm trying to setup emment in shopify liquid files but the autocomplete gives this wrong pattern.

E.g: When I type div.name it's suggest div: .name; insted of <div class ='name'>

image

Any idea how to make work html completion inside this format?

Thanks

Not getting completion for all emmet inputs

If I type something like

#hello it will give me an emmet autocomplete which correctly expands to <div id='hello'></div>

But if I type single elements like

div

No expansion options are given at all. As if it doesn't recognize it as an emmet input. This is especially annoying in React where I often want to autocomplete custom tags, which similarly doesn't work CustomTag gives me nothing.

I'm using the config in the readme without any changes, using vsnip. I have lsp-config, vsnip, cmp, vsnip-cmp, vsnip-integ and this plugin installed.

it doesn't work for me with `vsnip`

when I open a file in html or css, when I see the information with LspInfo it appears that it is running, however the autocomplete does not work
image
image

My LSP config:

" LSP

syntax enable

filetype plugin indent on

set completeopt=menuone,noinsert,noselect
set shortmess+=c

lua <<EOF
  -- Setup nvim-cmp.
local has_words_before = function()
  local line, col = unpack(vim.api.nvim_win_get_cursor(0))
  return col ~= 0 and vim.api.nvim_buf_get_lines(0, line - 1, line, true)[1]:sub(col, col):match('%s') == nil
end

local cmp = require('cmp')
local lspkind = require('lspkind')
local lspconfig = require'lspconfig'
local configs = require'lspconfig.configs'

-- icons
local kind_icons = {
  Text = "",
  Method = "",
  Function = "",
  Constructor = "",
  Field = "",
  Variable = "",
  Class = "",
  Interface = "",
  Module = "",
  Property = "",
  Unit = "",
  Value = "",
  Enum = "",
  Keyword = "",
  Snippet = "",
  Color = "",
  File = "",
  Reference = "",
  Folder = "",
  EnumMember = "",
  Constant = "",
  Struct = "",
  Event = "",
  Operator = "",
  TypeParameter = ""
}

-- Setup CMP

  cmp.setup({
    formatting = {
      format = function(entry, vim_item)
        -- Kind icons
        vim_item.kind = string.format('%s %s', kind_icons[vim_item.kind], vim_item.kind)
        -- Source
        vim_item.menu = ({
          buffer = "[Buffer]",
          nvim_lsp = "[LSP]",
          luasnip = "[LuaSnip]",
          nvim_lua = "[Lua]",
          latex_symbols = "[LaTeX]",
       })[entry.source.name]
        return vim_item
      end
    },
    snippet = {
      expand = function(args)
        vim.fn["vsnip#anonymous"](args.body)
      end,
    },
    mapping = {
      ['<C-Space>'] = cmp.mapping(cmp.mapping.complete(), { 'i', 'c' }),
      ['<CR>'] = cmp.mapping.confirm({ select = true }),
      ['<Tab>'] = function(fallback)
      if not cmp.select_next_item() then
        if vim.bo.buftype ~= 'prompt' and has_words_before() then
          cmp.complete()
        else
          fallback()
        end
      end
    end,

    ['<S-Tab>'] = function(fallback)
      if not cmp.select_prev_item() then
        if vim.bo.buftype ~= 'prompt' and has_words_before() then
          cmp.complete()
        else
          fallback()
        end
      end
    end,
    },
    sources = cmp.config.sources({
      { name = 'nvim_lsp' },
      { name = 'vsnip' }, 
    }, {
      { name = 'buffer' },
    })
  })

  -- Use buffer source for `/` (if you enabled `native_menu`, this won't work anymore).
  cmp.setup.cmdline('/', {
    sources = {
      { name = 'buffer' }
    }
  })

  -- Use cmdline & path source for ':' (if you enabled `native_menu`, this won't work anymore).
  cmp.setup.cmdline(':', {
    sources = cmp.config.sources({
      { name = 'path' }
    }, {
      { name = 'cmdline' }
    })
  })

  -- Setup lspconfig.
  local capabilities = require('cmp_nvim_lsp').update_capabilities(vim.lsp.protocol.make_client_capabilities())
  -- Rust
  require('lspconfig')['rust_analyzer'].setup {
    capabilities = capabilities
  }
  -- Python
  require('lspconfig')['pyright'].setup {
    capabilities = capabilities
  }
  -- C/C++
  require('lspconfig')['clangd'].setup {
    capabilities = capabilities
  }
  -- Tsserver
  require('lspconfig')['tsserver'].setup {
    capabilities = capabilities,
    single_file_support = true
  }
  -- Vue
  require('lspconfig')['vuels'].setup {
    capabilities = capabilities
  }
  -- Html
  require('lspconfig')['html'].setup {
    capabilities = capabilities
  }
  -- Css
  require('lspconfig')['cssls'].setup {
    capabilities = capabilities
  }
  -- Golang
  require('lspconfig')['gopls'].setup {
    cmd = { "gopls" },
    filetypes = { "go", "gomod", "gotmpl" },
    root_dir = require("lspconfig").util.root_pattern{"*"},
  }

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

  if not configs.ls_emmet then
    configs.ls_emmet = {
      default_config = {
        cmd = { 'ls_emmet', '--stdio' };
        filetypes = {
          'html',
          'css',
          'scss',
          'javascript',
          'javascriptreact',
          'typescript',
          'typescriptreact',
          'haml',
          'xml',
          'xsl',
          'pug',
          'slim',
          'sass',
          'stylus',
          'less',
          'sss',
          'hbs',
          'handlebars',
        };
        root_dir = function(fname)
          return vim.loop.cwd()
        end;
        settings = {};
      };
    }
  end

  lspconfig.ls_emmet.setup { capabilities = capabilities }
 
EOF

Can't get JSX to work

I installed it globally per the instructions and added the config but when in JSX it does not recognize emmet. Not sure what I am missing.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.