neoclide / coc-emmet Goto Github PK

View Code? Open in Web Editor NEW

175.0 4.0 9.0 524 KB

Emmet extension for coc.nvim

TypeScript 98.12% JavaScript 1.88%

emmet coc vim

coc-emmet's Introduction

coc-emmet

Emmet completion support for coc.nvim

Fork of emmet extension from VSCode with only completion support.

Note: this. extension does completion support for emmet only, you should use https://github.com/mattn/emmet-vim

Install

In your vim/neovim, run command:

:CocInstall coc-emmet

Usage

<C-n> and <C-p> to choose a completion option
<C-y> to paste a picked completion

Options

You can set these properties on your coc-settings.json file to customize behavior.

Property	Description	Default value
`emmet.showExpandedAbbreviation`	Shows expanded Emmet abbreviations as suggestions.	`"always"`
`emmet.showAbbreviationSuggestions`	Shows possible Emmet abbreviations as suggestions. Not applicable in stylesheets or when `emmet.showExpandedAbbreviation` is `"never"`.	`true`
`emmet.includeLanguages`	Enable Emmet abbreviations in languages that are not supported by default. Add a mapping here between the language and Emmet supported language. E.g.: `{"vue-html": "html", "javascript": "javascriptreact"}`	`{}`
`emmet.variables`	Variables to be used in Emmet snippets	`{}`
`emmet.syntaxProfiles`	Define profile for specified syntax or use your own profile with specific rules.	`{}`
`emmet.excludeLanguages`	An array of languages where Emmet abbreviations should not be expanded.	`["markdown"]`
`emmet.extensionsPath`	Path to a folder containing Emmet profiles and snippets.	`null`
`emmet.showSuggestionsAsSnippets`	Show Emmet completion items as snippet kind.	`true`
`emmet.optimizeStylesheetParsing`	When set to `false`, the whole file is parsed to determine if current position is valid for expanding Emmet abbreviations. When set to `true`, only the content around the current position in CSS/SCSS/Less files is parsed.	`true`
`emmet.priority`	Priority of Emmet completion source, change to `100` for higher priority than languageserver.	`3`
`emmet.preferences`	Preferences used to modify behavior of some actions and resolvers of Emmet.	`{}`

LICENSE

MIT

coc-emmet's People

Contributors

Stargazers

Watchers

Forkers

naartjie weirongxu lukas-reineke iamcco csp-stu dmshvetsov mirsella kzwkt oxfist

coc-emmet's Issues

Use with Styled Components Library

How do I set up this plugin to work with styled-components?

I want CSS rules to work inside a styled component on a jsx/tsx file.

Html and JSX Attributes not working

In both HTML and JSX files, I can't use ".container" to get

/className="container" respectively.

It occasionally will appear in a new document, but then will not work afterwards.

coc-emmet doesn't work on html.erb files (Ruby on Rails)

"emmet.includeLanguages ": {
    "vue-html": "html",
    "javascript": "javascriptreact",
    "javascript": "javascript",
    "erb": "html",
    "html.erb": "html",
    "ruby": "html"
  }

I have tried the following settings in the coc-settings.json, but none of them make the language server work on these types of files.

Sibling: '+' operator in css file is weird ? emmet completion triggerd occasionally.

just as @onlurking mentiond in #3 , I can't trigger the completion with nested Abbreviations in css file,

but whatever you nested ahead, you add something like m10p, p4 which has numeric value as ending, emmet completion always succeed.

Not only in coc-emmet, I try this in vscode and it's the same , coc has a extra bug that it can't complete '!' as the '!important'.
Anyway, without nested , single abbr in css is enough for me. This is my emmet settings:

  // emmet
  "emmet.showExpandedAbbreviation": "always",
  "emmet.priority": 99,

nvim version :0.4.3

Inside of tag instead of in between tags

Hi,
I when I insert li I get autocompletion and can select <li></li> from emmet snippets.

However, when I accept the selection my cursor _ is in this position: <l_i></li> . (Inside the first tag element between l and i.

What could be the issue here?

Go to next/previous edit points

I would like to know if it's currently possible to go to next/previous edit points? One example would be: <source src="" type=""> and you want to go from one to another edit point (""). I've been trying to find if any keybinding for that exist but without success.

Thanks in advance!

How can I use emmet

Hello everyone, I know you're tired seeing my issues, but I'm trying hard to use emmet in vue, but no way. I know that question looks like a silly question, but you'll make my day if you answer that. I'll send my coc-settings.json

补全

请问默认的补全触发键是什么？

emmet.includeLanguages multiple languages

Hi, I would like to use includeLanguages to include two languages for my js files (which are really jsx files)

Is it possible to add it to the plugin?\

Example:

{
  "emmet.includeLanguages": {
  "javascript": ["css", "javascriptreact]
}

about indent

I am stuck coming up with a way to enter a new line indented and have the closing tag on the line below automatically placed.

As follows (| being the cursor):

<body>|</body>

... hit <CR>...

<body>
    |
</body>

but i have 
<body>
|</body>

Dont `coc-emmet` has `emmet.extensionsPath` ?

Please delete this issue, my fault

Seeking information on emmet.priority setting

Hi. First of all thanks for the really good job on Coc and all the plugins.

I am looking information on emmet.priority setting to understand better how if works or if it works at all. Yesterday I had an issue with htmldjango and emmet.includeLanguages: {"htmldjango": "html'} solved the issue for me. But I came across emmet.priority setting thinking it could be useful too but I don't really understand its behaviour and package.json does not have description for such setting. Could anyone explain ? thanks in advance.

Support for multi type Vue file

Is it possible to make coc-emmet work for template (for httpabbreviations) and style (for css abbreviations) sections of Vue files (and no abbreviations for script section at all)?

At the moment I can get following setups:

with "emmet.includeLanguages": { "vue-html": "html" } there is no expansion happening in Vue file (vue filetype) at all
with "emmet.includeLanguages": { "vue": "html" } I get html only expansions working in all three sections (template, script, style). No css expansions in style section though, only html expansions.

Several CSS expansions at once

In Sublime and VS Code i write the following emmet shorthand for CSS:

aic+df+fxdc+jcc

which turns into:

  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;

Using + to write several expansions doesn't work in coc-emmet.

doesn't trigger snippet

test.js

div>li   // can't work
div>li*3  // can work

record: https://asciinema.org/a/4MOWvNTG9dCBLH7R0ZrOfc11K

First tag not showing up in preview

When I type div and then tab for auto complete, coc-emmet doesn't show anything:

Include on demand for current buffer

Hi, first of all thank you for the extension! It's great.

Is there a way to enable the coc-emmet for the current buffer only, maybe using a command?

Example: I'm working on a full-stack application and I'd like emmet to complete on the typescript files that are related to the view but not in the ones for the backend. Using the config, it's always enabled for typescript and it's a little bit noisy.

snippets.json

Is there a way to define a snippets.json file?. And if yes, how/where do I do that?

"emmet.includeLanguages": {"markdown": "html"} does not work?

Here is my coc-settings.json:

{
    "suggest.timeout":  5000,
    "diagnostic.checkCurrentLine": true,
    "emmet.includeLanguages": {"markdown": "html", "c": "html"},
    "list.normalMappings": {
        "<C-c>": "do:exit"
    },
    "list.insertMappings": {
        "<C-c>": "do:exit"
    },
    "languageserver": {
        "ccls": {
            "command": "ccls",
            "filetypes": ["c", "cpp", "objc", "objcpp"],
            "rootPatterns": [".ccls", "compile_commands.json", ".vim/", ".git/", ".hg/"],
            "initializationOptions": {
                "cache": {
                    "directory": "/tmp/ccls"
                }
            }
        }
    }
}

Strangely, emmet works in *.c but not *.md. The filetype for *.md is markdown.

Custom snippets not available in autocomplete

Custom snippets don't show up in the suggestions when following the README at mattn/emmet-vim to add them to emmet-vim.

let g:user_emmet_settings = webapi#json#decode(join(readfile(expand('~/.snippets_custom.json')), "\n"))

They'll work fine with the emmet keystrokes, but not Coc. Is this intended?

Double property.

In original (and vs code) emmet css shorthand properties expand like this:

m0-5 > margin: 0 5px;

In coc-emmet work only m5:10. You can add this feature to coc-emmet?

triggerExpansionOnTab option

It's possible triggerExpansionOnTab.

like vscode.

https://code.visualstudio.com/docs/editor/emmet#_using-tab-for-emmet-expansions

How to enable for php and laravel?

Here what I tried.
"emmet.includeLanguages": {
"vue-html": "html",
"javascript": "javascriptreact",
"php": "php"
},

Emmet abbreviation unreadable

When trying to autocomplete the suggestions from coc-emmet, the text in the dropdown has the same color as its background. I've switched themes, but it does the same thing.

Emmet is showing recommendations but not completing!

I just installed emmet using :CocInstall coc-emmet and I was having some trouble using it. When using the shortcuts, the options show up alright, as shown in this picture:
https://imgur.com/a/Fowlc46
The problem is, there is no way to actually use the option. Pressing tab simply cycles through the options, while Space or Enter just makes a Space/Enter instead of creating the ul>li shown. Is there some configuration in :CocConfig I'm missing, or what's going on?
I'm happy to give any additional info.

如何设置在filetype在.tsx, .jsx, .js 中也生效

"emmet.includeLanguages": {
"vue-html": "html",
"cubec": "html",
"template": "html",
"handlebars": "html",
"mustache": "html",
"javascript": "javascriptreact",
"typescript": "typescriptreact",
"javascript.jsx": "javascriptreact",
"typescript.tsx": "typescriptreact"
}

这样配置有问题么？或者说怎样设置

Popap does not open when specifying the number of elements

You have to delete the number and re-write and only then appears

NVIM v0.8.1
echo &filetype --> vue

Works great with html

No Support for jsx custom attributes

Just found out that there is no support for custom attributes in jsx
for instance .container[style={{display:'grid'}}]
should generate <div className="container" style={{display:'grid'}}></div>

But it generates attributes in string format like regular HTML

Emmet not triggering in SCSS files

Feel like I may be being a bit dumb here, but I've tried:
"emmet.includeLanguages": {"scss": "css", "sass": "css"}
and it doesn't seem to help. Works fine in CSS files

Pug not supported by default?

Hi! First of all, thank you for developing the extension!

I've noticed something strange. Even though it's a fork from the vscode-emmet, the
emmet.includeLanguages seems to not work properly when I'm working with .pug files.

I have to map pug filetypes to jade for it to work. I don't know if this is the way it should be.
I thought pug files were supported by default. Maybe I'm doing something wrong...

This doesn't work.

This is how I'm using it.

Setting the filetype doesn't work either.

emmet snippet clobbers TSC completions

When I am writing code using tsserver (managed by coc-tsserver extension) and emmet (coc-emmet), if the emmet extension is enabled, it tends to overpower tsserver output. I'd like to understand if this is expected behavior or a bug.

For example, I have in the context a variable named p. If I type p. in the buffer, I am usually hoping to see a list of semantic completions for props on the type of p. However, for whatever reason the p. emmet completion snippet (<p className="">|</p>) is the only option provided to me.

If I manually switch the emmet extension off using cocList, the TSC behavior is correct and desired. Curiously, using this method to re-enable emmet appears to not work, I have to restart nvim to get it to start producing emmet completions again. This one must be a bug, but I'm hoping to find a resolution so that this bug won't be an issue.

This is not just an edge case, by the way. Due to emmet's terse nature, many code-like prefixes will trigger emmet when undesired.

If I type groups[0]., also hoping to get a list of TSC completion suggestions, which it would deliver if emmet was disabled, I get this snippet suggestion: <group 0="|" className="">|</group>. Such a desperate suggestion, emmet. I get that it's just doing its job though.

I really like emmet's functionality for when I'm writing HTML and I never want to use it when I'm not writing HTML. So, I have to get to the bottom of why it is clobbering other extensions' suggestions, otherwise I'll have to fully disable it, which is a shame, because implementing emmet with snippets is really neat. Thank you.

! and !!! autocompleted, but never expanded

Hello, I have encounter bug, when I use ! and !!!, it do show autocompletation, but it won't autocomplete. The rest of emmet runs fine, like doc or div even with some variable.

Is there anyway to know what cause it? Thank you