ecmel / vscode-html-css Goto Github PK

Add support for .phtml files

Add possibility to go to class definition in sass / less files

Thank you!!! Your extension really helps me a lot. It works great! And I have a few questions to ask.

1. I notice that the CSS color decorators attached to color values inside style tags in html files seem not working in vscode 1.3.
   
   May your extension help fix this problem in future updates?
2. If there is any possibility to fix the JS autocomplete problem inside script tags in html files?
   Thanks again.

OS: win10 X64
editor version:1.17.1
when i after installed this plugin ,the slide scroll bar will active a low react with the mouse scroll.

Hi @ecmel ,

Im using ur extension together with PHP intelisence, it make a little mess together.

Your extension should have limitation only for HTML / CSS context, in PHP it should not live in PHP at all

See example: Im finding some internal methods in PHP
with your extension: https://goo.gl/dzGYpA (its wrong, its offer local variables etc, this has to be solved by PHP intelisence)
without your extension: https://goo.gl/2c1j7G (explanation in previous point)

Thx for feedback.

PS. Im missing your answer at #55

Hi,

I'm from the VS Code team and I'm reaching out with some additional resources for adopting multi-root workspaces.

But first let me say thank you for working on and maintaining HTML CSS Support for VS Code which is one of the most popular extensions we really appreciate the work you have done to make VS Code better.

The purpose of this issue is that we are very close to releasing a significant new feature for VS Code - Multi-root Workspaces - which is the most requested missing feature. If you have not heard of multi-root workspaces we have described this in several of our recent updates. Today it's only enabled in our insiders release but our intent is to enable it for all users in our next update, targeted for release in the first week of November.

This is a pretty significant change and over the last four months we have updated pretty much all of VS Code to be Multi-root aware as well as updated all of our own extensions. In the process of doing this we have created a set of guidelines for Extension Authors to follow to ensure their extension can fully leverage the awesomeness that is Multi-root workspaces.

Our Request:

Having looked at your extension we think changes are required in how:

• You contribute or change settings, specifically you need to review whether some of the settings can be applied on a resource (= file location) level instead of being global (= workspace level).
• Your extension makes use of the (now deprecated) workspace.rootPath property, there is a proposed migration path and sample for this case.

How Can We Help/Resources:

We realize we are asking for your help here - our goal is to make sure that your extensions works well with multi-root and continues to be loved by the community. The guide above outlines the changes that are required and we have a samples as well.

But we are sure you will have questions and we thought one way we could look to help is by getting a number of the team members (myself included) to be ready to respond to questions on a Slack Channel that we will dedicate to this issue. To join that channel simply follow this link.

Again thank you for being part of the VS Code community - we appreciate everything you have done. With the release of Multi-root Workspaces we will be shipping our most requested feature, together we can really help this feature light up for users.

Happy Coding!
Sean McBreen

// cc @bpasero @aeschli

I have set emmet.useNewEmmet to true and the expandabbreviations hotkey to ctrl+alt+z.

This issue is not present when using other extension.

Thank you.

I have the blade plugin, so it would be nice if the blade language id was supported too.

Now that resource.json is deprecated, I can't figure out how to reference a css file installed inside my node_modules folder.

For example:
node_modules/tachyons/css/tachyons.css

I'm not sure if this is a bug or if there's something else that I need to configure now that resource.json is deprecated.

I'd like for tab completion to stop after a dash (and ideally only if there is more than one choice). Would that be feature request for this project or for VS Code itself?

.vue files can be simply treated as .html. please~ :)

VSC: 1.5.0-insider
OS: macOS 10.12

1.5.0-insider new settings

// Configures if the built-in HTML language support suggests Angular V1 tags and properties.
"html.suggest.angular1": true,

// Configures if the built-in HTML language support suggests Ionic tags, properties and values.
"html.suggest.ionic": true,

// Configures if the built-in HTML language support suggests HTML5 tags, properties and values.
"html.suggest.html5": true,

when I use the extension, then html suggest can not working in 1.5.0-insider

vscode supports zen coding:

div.my-class.my-other-class

Then when you press Tab when you are at the end of the line it creates this:

<div class="my-class my-other-class"></div>

It would be nice to have intellisense for this.

Hello,

I'm using Vue.js 2 together with scss.
I'd like to have scss instead of css intellisense(suggestion, errors) inside my <style lang="scss"> tags.
(Or just globally in all style tags).

Is it already possible somehow? An if not, can you please add a support for this?

Many thanks!

I am trying to use the extension with .php files that have html code mixed in, no auto complete is coming up. I renamed the files to .html (just to test), and none of the completion is showing up (it has some <?php tags in it).

I waited a long time for css definitions to load, still not working.

Is there a reason the .php files and .html files with php in them are not auto-completing the classes or ids?

I am having difficulty getting this to work. I am using VS Code on MacOS with Dotnet Core 1.1 (cshtml/razor).

I installed the plugin as per "ext install vscode-html-css" but my CSS classes do not show when inside a .cshtml file and typing class="" or similar.

I tried adding an external CSS reference to .vscode/settings.json also but that hasn't worked:

"css.remoteStyleSheets": [
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
]

I installed "npm install -g --save vscode-css-languageservice" also.

I have tried uninstalling and reinstalling to no avail. Could another plugin be causing issues? Or have I missed a blatantly obvious step?

$ code --install-extension vscode-html-css
Server returned 400

...Is that vscode's problem?

The suggestions list doesn't appear automatically, only if pressing ctrl + space.

• macOS 10.12.4
• VSCode 1.11.1

when i enable Html-CSS-support with the lasted version vscode, after a period of operation, there is a chance to cause cpu to use overflow. In activity monitor, it shows the cpu usage of search process override. After disable Html-CSS-support, this problem never happened again.

Hi,

thank you for a great plugin, I have been using it for a while!

Problem:

• Yesterday, I moved to a new Win10 machine and I can't get it working. That means the plugin does not pick local scss nor external stylesheet and does not show them after ctrl+ space. I work in Jade mostly but tried also HTML.
• Project and settings are exactly the same as on my old machine where it works like a charm. The only difference is that I was running 32bit install of Code and now I have the 64bit version.

Solutions I tried:

I tried literally everything I could think of:

• disable other plugins
• reinstall plugin
• reinstall VS code - tried both 32 bit and 64 bit again 😄

Can you advise me what else could I try to get it working?

Thank you,

Ondrej

Need to use a parser. https://github.com/isaacs/sax-js seems ok.

• VSCode Version: Code 1.18.0 (dcee2202709a4f223185514b9275aa4229841aa7, 2017-11-08T21:22:49.932Z)
• OS Version: Windows_NT x64 10.0.16299
• Extensions:

(1 theme extensions excluded)

Steps to Reproduce:

1. Install dva-cli and create a project with dva new demoProject,
2. Low cpu cost if I disable all extensions,
3. High cpu cost if I enable HTML CSS Support only.

Reproduces without extensions: No

When Im looking for a class in a PHP/HTML file (which exists in CSS or SCSS), then its found - works perfect.
See screenshot: https://goo.gl/6BHabY (from PHP file) https://goo.gl/bpWVqg (SCSS file)

But vice versa it doesnt work, Im looking for HTML class or ID in SCSS/CSS file, but it doesnt find anything.
See screenshot: https://goo.gl/23AnEQ (html class defined in PHP file) and im trying to complete in SCSS file (not found) see: https://goo.gl/C1HDmb

Can it be set or what am I doing wrong?

There are multiple blade extensions, and I have the following blade extension installed:

https://marketplace.visualstudio.com/items?itemName=onecentlin.laravel-blade

This doesn't work with that extension, could you please add support for it?

github: https://github.com/onecentlin/laravel-blade-snippets-vscode

He there!
I was wondering if there's a way to add .pug files class names autocompletion.
The extension works perfectly in a pure HTML file, but would be awesome if it can support and pugjs. Is there a way I can manually set it up to also include the functionality in other files than just .html.

Thanks!
Keep up the awesome work!

It would be nice if I could place a list of remote css files in the settings of the current project.

So in .vscode/settings.json I could have something like this:

{
    "css.dependencies": [
        "https://cdn.remote.com/bootstrap.css",
        "https://cdn.google.com/mdl/material.css"
    ]
}

Then when I used the plugin, I could get a list of class names from one or more remote cdn's.

Please add razor view (cshtml) support, it seems share all the same functions.

This somehow disables the pipe operator in vs code in Mac OS.

I just edit in /test/test.pug,

a(class='exter')

The expected item external-test1 does not appear,So does test.jade.
It works normally with html.

It'd be nice if you could support Handlebars files.

Hi.

I am working a lot with jekyll for github pages.
This uses the liquid templating syntax.

I think it would be really cool, if this extension would also work with that.
related extension: https://marketplace.visualstudio.com/items?itemName=ginfuru.vscode-jekyll-snippets

When I enable vscode-html-css, the following functionality breaks:

• Show Changes (in top-right) corner doesn't work
• Changes are not highlighted in the left gutter
• Double clicking files on the Source Control pane does nothing

This list is probably incomplete.

• Visual Studio Code: 1.12.2
• Extension 0.1.5

Tried reinstalling and installing again, but extension doesn't suggest any classes from Bootstrap 4 (from node_modules).

When I have a class that I want to change, like this:

<div class="text-left"></div>

I then delete the part I want to change like this:

<div class="text-"></div>

Then type R to bring up intellisense, and select text-right from the list, and what happens is, that it just appends it to the current class instead of replacing it so it looks like this:

<div class="text-text-right"></div>

What really should happen is that it replaces the current item completely so I get this:

<div class="text-right"></div>

-- Sorry for the English, I used Google Translator --

I like its extension, but whenever I have a . And press ctrl + space or type something after the point the same suggests until you change the line.

Example of situation:

<h5> This is a test. </h5>

Just after the . the extension is suggesting.

So my suggestion is: Have an option to disable the suggestion after the . if you are typing in the tag or rather suggesting between the tag.

Example:

<div class = ".anything here can keep suggesting"></div>

<div> Test. No more suggesting </div>

Except between the tag style or another one that I find necessary for css.

I do not know if that's possible. Thanks and congratulations for the extension.

When this plugin is enabled, there is no in-file words suggested.

Pug files, OS X, VS Code 1.11.2

Env

• VSCode Version: 1.12.1
• OS Version: Windows 10 64bit
• Node Version

Problem

The class suggestion work outside of the html in some file. As follows:

Steps to Reproduce

npm install vue-cli 

vue init webpack test

cd test
npm install

4. create a new file named Test.vue in /src/components/

<template>
  <div>test</div>
</template>

<script>
export default {
  name: 'Test'
}
</script>

<style>

</style>

5. this is normal.
   

6. this is abnormal.
   

This problem will appear when I import other files.

In addition, I meet it in Hello.vue. As follows:

However, it is not always.

or

Style tag and attribute completion can be removed when upstream issue microsoft/vscode#8938 and microsoft/vscode#8928 are resolved.

http://ejs.co/

When typing a -, the suggestion box closes.

Sometimes when I first launch VS Code I do not yet have an internet connection. If this happens, HTML CSS Support completions are not available, even after I connect to the internet and I must restart VS Code to get the completions working again.

• Optimally the remoteStyleSheets would be cached and available even in offline situations.
• Alternatively a menu/keyboard action would be available to force re-attempting the download of remoteStyleSheets.

Hello, thanks for creating this practice extension.
I'm using react so there are many possible ways to add css style in js(x) file, most of them use normal css syntax. For example, styled-jsx, styled-components...

Is there any possibility to add support for such project? Or, I can fork this repo to create respective extensions for those.

This may seem odd but it is pretty common to combine html in *.md files. This plugin would be incredibly helpful if it happens to support *.md files in addition to the several other file types it already supports.

Upstream microsoft/vscode#14920

Support nesting classes like this:

.block {
    // properties;

    &__element {
        //properties;
    }
}