zignd / html-css-class-completion Goto Github PK

After upgrading vscode to 1.13.1 on Windows 10 I started experiencing the error:

Extension host terminated unexpectedly. Please reload the window to recover

This appears every time after 2-3 minutes of use after the window reloads. All extensions stop working after this.

I'm not sure if the vscode update caused it or your extension v1.7.0 but it is now unusable on Windows 10 (medium size project).

The only way I have made the issue disappear so I can use vscode is by disabling your extension.

Related #57 (Same Crash but Ubuntu), #58, #35

I know its not an issue but I absolute love the hrml formatting your have in the gif animations? What's the name of the fornatter?

Thanks

Trying to install manually in Visual Studio Code 1.5.2, due to network connectivity restrictions. Per VS Code docs:

code --install-extension path/to/....zip

Cannot install the extension. This fails with the message in the title. Cannot install from the Extensions view due to network restrictions. Is there no other way to manually install this? Any suggestions?

Thank you,
John K.

pls add support for React className

Could you add support for classes defined in Sass files?

Visual Studio Code stop working after update version 1.6.0

Sorry, but your extension creates a large number of performance problems. Many of the issues in the VS Code repository refer to this extension. This is the most popular extension of its kind, so we need to make it better.

We need use Language Server and create background scanner for CSS files.

So, I'll start working on this soon (maybe this week). I create fork and then provide you PR.

In vscode 1.3.0 when open a html file,there is a message show loading css,then the vscode can not click anything and show busy。

Have any configuration file that I can create to define which files/folders I want to cache?
For example:
I have so many css files in node_modules, but I want only the bootstrap.css file to be cached.
How can I define that?

it would be really great to use this plugin with sass files

Hi,
now，I find this plugin only can use in *.html language mode.
what can I do ,if I want use it in Razor Language Mode
i

Ladies and gentlemen good afternoon, I wonder how do I get the VS Code show the class that creates the html in my CSS file?
I installed these extessions and not show the class. But now the reverse works.

https://postimg.org/gallery/15ict8q76/

http://handlebarsjs.com/

When I open a project without a workspace, I get a warning icon on the bottom that says "Failed to cache the CSS classes on the workspace" and when I click on it it gives an error popup that says "Cannot read property 'length' of undefined'. Can you handle the no workspace scenario better, such as silently not doing anything? With multiple CSS extensions enabled, it's not obvious which one is causing this.

This is the Debug Console output:

Found all parseable documents.
Parsing documents and looking for CSS class definitions...
Sumary:
Failed while looping through the documents to cache the classes definitions: TypeError: Cannot read property 'length' of undefined
at async.each (C:\Users\seanmcm.vscode\extensions\Zignd.html-css-class-completion-1.0.2\out\src\extension.js:46:33)
at iteratorSymbol (C:\Users\seanmcm.vscode\extensions\Zignd.html-css-class-completion-1.0.2\node_modules\async\dist\async.js:486:20)
at C:\Users\seanmcm.vscode\extensions\Zignd.html-css-class-completion-1.0.2\node_modules\async\dist\async.js:855:24
at eachOfLimit (C:\Users\seanmcm.vscode\extensions\Zignd.html-css-class-completion-1.0.2\node_modules\async\dist\async.js:915:26)
at FUNC_ERROR_TEXT$1 (C:\Users\seanmcm.vscode\extensions\Zignd.html-css-class-completion-1.0.2\node_modules\async\dist\async.js:920:20)
at eachOf (C:\Users\seanmcm.vscode\extensions\Zignd.html-css-class-completion-1.0.2\node_modules\async\dist\async.js:1052:9)
at Object.eachLimit (C:\Users\seanmcm.vscode\extensions\Zignd.html-css-class-completion-1.0.2\node_modules\async\dist\async.js:3111:7)
at C:\Users\seanmcm.vscode\extensions\Zignd.html-css-class-completion-1.0.2\out\src\extension.js:29:26
at next (native)
at fulfilled (C:\Users\seanmcm.vscode\extensions\Zignd.html-css-class-completion-1.0.2\out\src\extension.js:4:58)
at process._tickCallback (internal/process/next_tick.js:103:7)
Activating extension Zignd.html-css-class-completion failed: Cannot read property 'length' of undefined.
Activating extension Zignd.html-css-class-completion failed: Cannot read property 'length' of undefined
Here is the error stack: TypeError: Cannot read property 'length' of undefined
at async.each (C:\Users\seanmcm.vscode\extensions\Zignd.html-css-class-completion-1.0.2\out\src\extension.js:46:33)
at iteratorSymbol (C:\Users\seanmcm.vscode\extensions\Zignd.html-css-class-completion-1.0.2\node_modules\async\dist\async.js:486:20)
at C:\Users\seanmcm.vscode\extensions\Zignd.html-css-class-completion-1.0.2\node_modules\async\dist\async.js:855:24
at eachOfLimit (C:\Users\seanmcm.vscode\extensions\Zignd.html-css-class-completion-1.0.2\node_modules\async\dist\async.js:915:26)
at FUNC_ERROR_TEXT$1 (C:\Users\seanmcm.vscode\extensions\Zignd.html-css-class-completion-1.0.2\node_modules\async\dist\async.js:920:20)
at eachOf (C:\Users\seanmcm.vscode\extensions\Zignd.html-css-class-completion-1.0.2\node_modules\async\dist\async.js:1052:9)
at Object.eachLimit (C:\Users\seanmcm.vscode\extensions\Zignd.html-css-class-completion-1.0.2\node_modules\async\dist\async.js:3111:7)
at C:\Users\seanmcm.vscode\extensions\Zignd.html-css-class-completion-1.0.2\out\src\extension.js:29:26
at next (native)
at fulfilled (C:\Users\seanmcm.vscode\extensions\Zignd.html-css-class-completion-1.0.2\out\src\extension.js:4:58)
at process._tickCallback (internal/process/next_tick.js:103:7)

My compiled css files sometimes live outside of the workspace. I don't think there's a way yet to specify such files to be included. This would be super helpful in more general cases as well.

Awesome extension!

I don't know if that is even possible. But i write most of my HTML code with Emmet Snippet. It would be nice if we get there the same IntelliSense experience.

I can't test it right now because for some reason the extension is no longer pulling back class names at all - it shows the fetching notification and never ends.

However one thing I noticed is when I begin typing a class with a hyphen at the start, such as -static, that choosing to autocomplete it with your tool does not replace the first hyphen, so you end with --static.

It just doesn't choose to replace that hyphen character at the start.

Typical Angular2 CLI setup, with Bootstrap CSS added via npm, CSS works when tested in code and project compiled, e.g.:

The lightning pressed and shows updated status, but NO autocompletions / Intellisence suggestions

Please advise

This
"Option to allow the user to specify directories in which the extension will look for CSS classes"

Would be very helpful for myself as where I work out CSS and JavaScript is in a different directory.

Look forward for this being implemented

Given having CSS specified in external linked CSS file is best practice, this request is likely low priority enhancement unless others also need/vote for this?

However for some of my projects which are particularly 1st load performance focused I do have instances of projects where the majority of a page's CSS styles are specified directly in the HTML source within a STYLE tag in the HEAD of the page. (To avoid extra HTTP requests of externally linked files)

If this feature was added to the extension I'd guess it would be good to review and cache the contents of all <style type="text/css"> within the HTML document source?

Recently I've noticed that I'm getting a lot of items under the Problems tab in VS Code. All of the files are in node_modules.

Disabling all extensions eliminates these items, and enabling "IntelliSense for CSS class names" causes the items to reappear. Enabling all extensions except "IntelliSense for CSS" once again eliminates these items.

Is this the intended behavior?

Other code completion like for snippets or for attributes inside a HTML-tag is not working. It only displays "Loading". If the extension is removed it works.

The plugin stopped working after updating to 1.6.0. Hovering over divs or classes just keeps saying 'loading', and the extention bar in the buttom either says 'CSS classes chached' or 'Looking for CSS classes on the workspace..' with no effect if clicking on them.
I have tried reloading, deactivating, reinstalling - without any effect.

Great plugin.

I tried using it on a folder containing hundreds of CSS files.

A message appears stating:
"HTML CSS Class Completion: Fetching CSS rules from CSS files, please wait."

The message never goes away.
The CSS intellisense does not function.

It would be great to add custom language support , currently it doesn't support Liquid , Twig, or Blaze templating.

Currently, any time i open any file with css in it, I get this notification

And they never go way until I explicitly close them. I realize this may be an issue with vs code core, but I was hoping that since its so common to go between files with css rules, that there be an option in the settings to not show this notification. Or somehow hide it after a few seconds.

This plugin is great, but it only triggers on html files.
Please, make it work with php files also!

Today I've updated visual studio code to 1.6 version and css completion stopped working

Hi,
Please could you add a command to manually refetch css for opened html, when adding new classes they are not propagated so the only workaroung is to restart the editor.

Not sure what information I can provide, but I thought I'd just report it. This addon freeze vs code for me. I verified this by disabling the extension. This happens every time in at least one of my projects. I have other projects that freeze occasionally but given that nature, there's no way for me to verify this extension is the cause of those. Happy to provide more information if directed.

I'm not able to use the plugin in Code - Insiders 1.11.0

Working in a project that uses standard Bootstrap CSS styles as it's base, it appears this plugin doesn't present ALL standard framework CSS classes in auto complete choices. Possibly related to those classes being within @media queries? (As VS Code plugin status icon says it's fully loaded all CSS)

Specific examples in my project are incomplete offered choices for .hidden-... related responsive utility classes http://getbootstrap.com/css/#responsive-utilities with classes like .hidden-xs and .hidden-sm are missing, while some valid classes like .hidden are presented (see screenshot)

Another specific example is this plugin missing all classes like col-sm-push... or col-md-push- related classes. However does slow full col-xs-... related css class choices like col-xs-push... & col-xs-pull... classes. (see 2x screenshots below)

This is may just be a question, not an issue. (Couldn't find a twitter handle)

Is there a way to configure certain folders to ignore .css files in?

Several of my projects have a template folder within the root that is just for reference. Any actual files being used are moved into a proper public folder. I suppose defining one or multiple folders could be an option as well. This may help speed up the drag on VSCode the extension has when building the cache.

The plugin shows me everytime 99+ problems from node_modules files. In the fetcher you are excluding it. it seams that this works not well. I want to track them because if i use bootstrap e.g. this should work too but i don't want to get 99+ of warnings.

From @blusoul on July 8, 2016 7:8

• VSCode Version: 1.3
• OS Version: windows 10

Steps to Reproduce:

1. vs Code
2. tips html css class completion; Fetching css rules from css files please wait
   

Copied from original issue: microsoft/vscode#8904

Previously been using this extension successfully with previous versions of Visual Studio Code on Windows, but now as of v1.3 (and still with new latest v1.3.1) the CSS extension comes up with initial 'Fetching CSS rules...' message but then whole VS Code editor window hangs.

VS Code becomes entirely unresponsive with no ability to scroll or move text cursor within source code, or to click on any VS Code application left side icons or files in Explorer view tree. Only top File, Edit, View menu item options are still responsive.

Currently having to uninstall this extention until this issue is fixed. Others also having this problem as shown by new 1 star reviews being submitted at https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion bottom User Reviews section.

For instance, I have a folder (node_modules), where most of the folders in there aren't relevant.

It would be awesome if we had gitignore-type ignoring, so I could do something like this:

node_modules/**
!node_modules/material-design-lite/material.*

With this extension installed save button or save event geneally (ctr-save, each button etc) doesn`t work :/

Hi there,

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

Thanks.

While opening a big project and switch to a huge html page, I got a message on top that say fetching css etc. After that vscode become unresponsive and crash in a while. Unistalling the plugin solved my problem.

if one css file contains a parsing error the hole process crash.
An error handling method would be better...

I experienced a slowdown when saving js files and also the intellisense is not working while this extension is enabled.
More info microsoft/vscode#15105

It seems that this extension doesn't fetch all css classes available. For example, from bootstrap (which is in bootstrap/dist/css/bootstrap.css) some classes like .btn are fetched, but some like .input-group are not.

I hope you don't mind me posting a feature suggestion.

It would be great if you can interface with the API to provide a "view definition" link when clicking on a CSS class name. This would work much like Visual Studio and C# Models work. You could pull up the resulting CSS file (or SCSS if there is a map) to the right.

When looking css classes, I added the classes folder and bower npm not interested.

Thank you very much

Add a workspace configuration option to filter css classes from style sheets found in the same folder.

For example, given the following folder structure. component1 styles would only be available from the component1.template.html

/component1
    component1.template.html
    component1.styles.css
/component2
    component2.template.html
    component2.styles.css

This would be useful for any component style architecture, specifically Angular.

My css file is (build with scss) 7563 lines..
When i open a html template the first time vscode stuck when fetching css classe.
I musst uninstall it to be able to do my work. :(.
Any hints?

Since markdown files support HTML, and a lot of Jekyll sites tend to mix them up together with YAML frontmatter, it would be really useful to extend this plugin to support .md files as well.