Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Provide css emmet abbr suggestions when inside style attribute in non html files #45275

Closed
Kcko opened this Issue Mar 8, 2018 · 17 comments

Comments

Projects
None yet
3 participants
@Kcko
Copy link

Kcko commented Mar 8, 2018

See short video please https://goo.gl/5uGtFB (suggestion for emmet not works in latte file with inline style. In html file it works, settings. Emmett settings are complete in editor settings.

@vscodebot

This comment has been minimized.

Copy link

vscodebot bot commented Mar 8, 2018

(Experimental duplicate detection)
Thanks for submitting this issue. Please also check if it is already covered by an existing one, like:

@vscodebot vscodebot bot added the emmet label Mar 8, 2018

@ramya-rao-a

This comment has been minimized.

Copy link
Member

ramya-rao-a commented Mar 10, 2018

Do you use any extensions for the latte files? What language mode are these files mapped to? What language do you see in the bottom right corner of the editor?

@Kcko

This comment has been minimized.

Copy link
Author

Kcko commented Mar 10, 2018

Hi,
at first thank you for reply:
now to our problem:

  1. I see latte in the right bottom corner (https://goo.gl/wCsGYQ) , so see too my settings https://goo.gl/xDgPRV
  2. I have installed extension by martin kase Nette + Latte (https://marketplace.visualstudio.com/items?itemName=Kasik96.latte), but when i disable it, so it has no effect, still not works.
  3. See short video (in html file/lang emmet at inline style works, in latte not) https://goo.gl/h4X3Q5

Thank you for your willingness to solve the problem.

@ramya-rao-a

This comment has been minimized.

Copy link
Member

ramya-rao-a commented Mar 11, 2018

For filetypes that do not have emmet support by default, you can use the setting emmet.includeLanguages setting get emmet completions.

Css Emmet completions in the inline style attribute can only be provided in html files by parsing the html files to find the right position for the inline style attributes.

In non html files, this is not possible.

One option for you is to add the below setting

    "files.associations": {
        "*.latte": "html"
    }

This will ensure all latte files get treated as html, so you will get all the features that you get in html files

@Kcko

This comment has been minimized.

Copy link
Author

Kcko commented Mar 11, 2018

Thx, works!

But dont understand what directive emme.includeLanguages doing.
https://goo.gl/93zFCC (second directive (by you), works).

There is exist one big problem. Latte is very specific templating system, with ur directive gets the behavior as ordinary HTML and that's not good.

@Kcko Kcko changed the title Emment not works in Latte file with inline style Emment not works in Latte file with inline style - not solved. Mar 11, 2018

@Kcko Kcko changed the title Emment not works in Latte file with inline style - not solved. NOT SOLVED - Emment not works in Latte file with inline style Mar 11, 2018

@ramya-rao-a

This comment has been minimized.

Copy link
Member

ramya-rao-a commented Mar 12, 2018

Mapping latte to html in the emmet.includeLanguages setting lets you do the below:

  • Use completions for html emmet abbreviations in the auto-completion list
  • Use the Emmet: Expand Abbreviation command to expand the html emmet abbreviations
  • If you set emmet.triggerExpansionOnTab to true, then it lets you expand html emmet abrbeviations by pressing the tab key.

What it does not do is parse the file to find inline styles to provide css emmet completions.

Your expectation here is to get css emmet completions when inside the inline style attribute in an html like file. This is only possible if there is a parser that is able to parse the latte file to find inline styles. By mapping latte to html in the files.associations setting, the html parser gets triggered and does the needful.

In short, mapping latte to html in emmet.includeLanguages lets you expand html emmet abbreviations. Mapping latte to html in files.associations treats the latte files as html files giving you ALL the features that you see in a normal html file.

Hope this clarifies everything

@ramya-rao-a

This comment has been minimized.

Copy link
Member

ramya-rao-a commented Mar 12, 2018

I'll re-open this issue to investigate if there is anything more we can do from our side to include css emmet completions in the inline style attribute in non html files

@ramya-rao-a ramya-rao-a reopened this Mar 12, 2018

@ramya-rao-a ramya-rao-a changed the title NOT SOLVED - Emment not works in Latte file with inline style Css Emmet completions not works in Latte file with inline style Mar 12, 2018

@Kcko

This comment has been minimized.

Copy link
Author

Kcko commented Mar 12, 2018

Hi @ramya-rao-a , thx for explanation

With mapping latte to html in files.associations I will lose all Latte properties and behavior so I can not use it.

Only solutions is creating Latte syntatic parser which can have same behavior like a html syntatic parser (your words).

@ramya-rao-a

This comment has been minimized.

Copy link
Member

ramya-rao-a commented Mar 13, 2018

Only solutions is creating Latte syntatic parser which can have same behavior like a html syntatic parser (your words)

Yes, thats the ideal solution.

But I think we can do a best guess by traversing left from the current position to determine if the current position is inside a style attribute or not and then provide the emmet css completions

@ramya-rao-a ramya-rao-a changed the title Css Emmet completions not works in Latte file with inline style Provide css emmet abbr suggestions when inside style attribute in non html files Mar 13, 2018

@ramya-rao-a ramya-rao-a added this to the March 2018 milestone Mar 13, 2018

@Kcko

This comment has been minimized.

Copy link
Author

Kcko commented Mar 13, 2018

Not so important, inline styles are often not used. Thank you for your consultation. We can close now ;-)

@ramya-rao-a

This comment has been minimized.

Copy link
Member

ramya-rao-a commented Mar 13, 2018

We can close now

Not at all :) Now I am all excited to get that feature. It may not be used often, but it is do-able. It makes the feature "complete". In the latest release of VS Code, you can get css emmet completions inside style attributes in html files. Its only fair that we extend this to non html files that have html markup if we can.

@Kcko

This comment has been minimized.

Copy link
Author

Kcko commented Mar 13, 2018

I will see roadmap or changelog :-) and i hope i see this feature soon.

Im programmer & coder, im flew from SublimeText ,and im worried about other things than this.
VSC doesnt invoke used classes and identifier in css / scss when I'm in HTML and vice versa. (Non existing intelisense between CSS/SCSS/LESS and HTML, this is a real problem. But it will not be your circuit probably.

@ramya-rao-a

This comment has been minimized.

Copy link
Member

ramya-rao-a commented Mar 13, 2018

@Kcko Check existing feature requests for html and css/scss/less. There must be some already that cover what you are looking for. Upvote those feature requests and add your comments.

@Kcko

This comment has been minimized.

Copy link
Author

Kcko commented Mar 14, 2018

@ramya-rao-a Unfortunately nothing. I tried a few extensions, but without positive results.
Moreover I think, that could be a native property of editor. Whats your opinion?

If you try a PHPStorm, you will see a luxury behavior and intelisense.

@ramya-rao-a

This comment has been minimized.

Copy link
Member

ramya-rao-a commented Mar 14, 2018

@Kcko We have feature request tracking what you need. See #28442. Upvote and add your comments there.

@Kcko

This comment has been minimized.

Copy link
Author

Kcko commented Mar 15, 2018

Thx for link, i will make some vote or add comment :-), we really can close this topic.

@ramya-rao-a

This comment has been minimized.

Copy link
Member

ramya-rao-a commented Mar 15, 2018

Alright

@ramya-rao-a ramya-rao-a removed this from the March 2018 milestone Mar 27, 2018

@vscodebot vscodebot bot locked and limited conversation to collaborators Apr 29, 2018

@vscodebot vscodebot bot unassigned gushuro Apr 29, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.