Comments (19)
Yes i'll do that! Thank you for your time and effort!
from vscode-html-css.
Could you provide a link for other extension?
from vscode-html-css.
I use Angular profile built into VSCode + your extension.
from vscode-html-css.
What is exactly broken? can you provide more info
from vscode-html-css.
IntelliSsense doesn't pop up automatically when i start typing some css class in html code. It happens only when your extension is on. I'm able to trigger it by ctrl+space and it works correctly. I use legacy colors.
from vscode-html-css.
Can you share your .vscode/settings.json file? This extension is named "HTML CSS Support" as well so can you provide the file you are working on?
from vscode-html-css.
Sorry for the late replay. Here are files you've asked for.
This is just html in an angular project.
<div>
<h1>{{ recipe.title }}</h1>
<div class="card">
<img class="card-img-top" [src]="recipe.imgUrl" alt="Card image cap" />
<div class="card-body">
<p class="card-text">
{{ recipe.description }}
</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Submited by: nick | updated on:</li>
<li class="list-group-item">Tested by:</li>
</ul>
<div class="card-body">
<button mat-raised-button color="warn">
Save <span><mat-icon>favorite</mat-icon></span>
</button>
<a class="card-link">Another link</a>
</div>
</div>
<div class="mt-4">
<mat-accordion class="example-headers-align" multi>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title class="mat-panel-title-custom-style">
Ingredients
</mat-panel-title>
</mat-expansion-panel-header>
<ul>
@for (item of recipe.ingredients; track $index) {
<li>{{ item.ingredient }}</li>
<hr />
}
</ul>
</mat-expansion-panel>
</mat-accordion>
</div>
<div class="recipe-box mt-4">
<div class="row g-3">
@for (item of recipe.prepTime; track $index) {
<div class="col-sm-4">
<span class="recipe-header">{{ item.name }}:</span>
{{ item.amount }} mins
</div>
}
</div>
<hr />
<a href="#nutrition-facts" class="jump-link">Jump to Nutrition Facts</a>
</div>
<div class="card mt-4">
<div class="card-body">
<h1 class="card-header">Directions</h1>
<div class="col m-2">
@for (item of recipe.steps; track $index) {
<div class="card-body">
<h3 class="card-title">Step {{ $index }}</h3>
<p class="card-text">{{ item.directionStep }}</p>
</div>
}
</div>
</div>
</div>
</div>
from vscode-html-css.
Can you also tell me where is your css located? e.g in which file card
class is defined in your project?
from vscode-html-css.
Class card is a bootstrap class and it is acknowledged by HTML extension in .vscode.settings.json as well as all of css files references.
"css.styleSheets": [
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css",
"src/**/*.css",
// "SRC/Frontend/RecipeRhapsody/src/**/*.css",
],
On top of that in angular.json project file i provide:
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"@angular/material/prebuilt-themes/deeppurple-amber.css",
"src/styles.css"
],
from vscode-html-css.
With the same settings:
"css.styleSheets": [
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css",
"src/**/*.css",
// "SRC/Frontend/RecipeRhapsody/src/**/*.css",
],
Completion works in the html file.
Which Angular extension are you using?
from vscode-html-css.
Oh i'm sorry i didn't specify
vscode-angular-html
extension for highlighting angular syntax. When it's enabled the intellisense doesn't work for css html.
from vscode-html-css.
I installed vscode-angular-html but no matter I tried the completion worked.
from vscode-html-css.
Can you switch to Angular profile built in vscode install the vscode-angular-html and try again cause there's bunch of extensions installed there? Did you run the command 'vscode-angular-html: Set legacy color customizations' from the command pallette?
from vscode-html-css.
Created a new profile based on Angular template now the completion stopped working. At last. :)
from vscode-html-css.
You should install this extension again in that profile and the completions will start working again. Hope this helps.
from vscode-html-css.
Unfortunately i've done that and it still doesn't work. Only ctrl+space trigger the intellisense.
from vscode-html-css.
I replicated the bug, everything works in angular default profile but if I install the following extension only ctrl space triggers completions. Something in that extension is interfering:
https://marketplace.visualstudio.com/items?itemName=ghaschel.vscode-angular-html
Can you disable that extension and try again to confirm?
from vscode-html-css.
Yes that's exactly the case. When i disable the vscode-angular-html it works properly. However the thing is that i need that extansion haha
from vscode-html-css.
Can you file a bug report in vscode-angular-html extension's github page referencing this issue since not much I can think of to do in this extension to fix the problem.
from vscode-html-css.
Related Issues (20)
- Opportunity
- Intelisense Not Working HOT 3
- 拓展无法使用
- conflict with Django v1.10.0 HOT 1
- HTML end tag not coming automatically HOT 1
- Images in another folder HOT 1
- .erb files not working HOT 1
- css not HOT 1
- Nested selectors highlighting HOT 10
- v1.14.1 Suddenly Stopped Working HOT 9
- Class completion destroys trailing markup HOT 9
- realative link is not working HOT 1
- autocompletion not working HOT 6
- Why not add save verification HOT 1
- Autocomplete not working for CSS or Bootstrap HOT 6
- Not working on PHP script HOT 1
- ability to set css.enabledLanguages property in "./vscode/setting.json" or in the ".workspace" file
- html css is snippets
- Work with Astro?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vscode-html-css.