zignd / HTML-CSS-Class-Completion

:chocolate_bar: Visual Studio Code extension that provides CSS class name completion for the HTML class attribute based on the CSS files in your workspace
https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion
MIT License
250 stars 83 forks source link

Please add Pug language support #55

Open ooloth opened 7 years ago

ooloth commented 7 years ago

Hi there,

Happy to see this extension! I write HTML using Pug, though, so it would be great if Pug were supported.

Thanks.

xxDukeMCxx commented 6 years ago

Hi,

I'm very new to VSCODE, Web Dev and not yet trained to javascript... but by playing with source file of the extension it seem's to add partial support for PUG by adding these lines in extension.js :

in "enableEmmetSupport" function (simply add "jade"):

const languageModes = ["html", "razor", "php", "blade", "vue", "twig", "markdown", "erb", "handlebars", "ejs", "typescriptreact", "javascript", "javascriptreact", "jade"];

in "activate" function : // JADE/PUG based extensions ["jade"].forEach((extension) => { context.subscriptions.push(provideCompletionItemsGenerator(extension, /class=["|']([\w- ]*$)/, "."); });

Now in .PUG file css class completion work with the long syntax 😄 a(class="") image

but with the "dot syntax" it didn't work : a.class instead of CSS class, others suggestions are made in VSCODE : image

I tryed by add a new subscription with a new regexp, like that, but it didn't work : context.subscriptions.push(provideCompletionItemsGenerator(extension, /\.$/));

Can any experienced dev give me some advice to try to go further ?

Thanks !

xxDukeMCxx commented 6 years ago

So i go further thanksfull to this post explaining how to setup a dev environnement to debug : https://github.com/zignd/HTML-CSS-Class-Completion/issues/62#issuecomment-323576610

I have now something that work in "long syntax" and "dot syntax", except at this time it didn't detect "Plain Text block in a tag" https://pugjs.org/language/plain-text.html#block-in-a-tag so completion sometime "contaminated" when typing script or plain text with a "dot".

However, it well detect "Plain Text Inline in a Tag", "Literal HTML" and "Piped Text" so in thoses cases the "dot" caracter isn't contaminated by useless completion...

pipe01 commented 5 years ago

I really need this

hjmtql commented 4 years ago

I might found another useful extension which supports pug. https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css

ParadiseFallen commented 3 years ago

So when it will work?

j2443070 commented 2 years ago

still nothing?

Enubia commented 1 year ago

@zignd is this project even maintained anymore? this feature would be such a huge benefit IMO