106

I'd like to have intellisense for bootstrap specifically but even for the css styles I write in my project. I've got references in a project.json and a bower.json but they do not seem to be making the references available.

Improve this question

10 Answers 10

Reset to default
180

You can install HTML CSS Support Extension.

ext install vscode-html-css

This will add Intellisense in your HTML files:

Bootstrap Intellisense

You don't need to configure anything for local files, just close and reopen vscode after installing. For remote css files, you can add the following

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

in the settings.json

Improve this answer
Sign up to request clarification or add additional context in comments.

10 Comments

is it possible to see icons in intellisense? for example for font awesome
It really needs an extension for VSC to provide css intellisense?! And how in hell would you know that you need that and css intellisense isn't just a configuration setting? And how would you then know which extension to use? Seems to be totally obscure and unusable if you are not friends with the VSC developers. Same problem seems to apply to about everything in the realm of software development these days.
This doesn't work anymore probably after VScode update
Can confirm it still works as of writing this comment.
need to change "css.remoteStyleSheets" to >> "css.styleSheets" and it will work
|
90

Here is the common steps (not only for Bootstrap) to enable css IntelliSense in VS Code:

Step 1: Go to https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion

or https://marketplace.visualstudio.com/items?itemName=gencer.html-slim-scss-css-class-completion

(Installation steps are already there)

Step 2: Click Install button that appear on the top of the website (screenshot below)

enter image description here

Step 3: After click, browser will show a pop-up window to access VS Code. Open it with VS Code.

Step 4: Click again the "install" button that appear inside the VS Code.

Step 5: After restarting the software, click the bottom left icon shown in the below image:

enter image description here

Step 6: Press "ctrl+[space]" inside the class quotes, you will get the complete class names from the attached stylesheets.

Improve this answer

3 Comments

As always, nothing worked. I installed the extension, restarted VSC, clicked the flash, it said "CSS/SCSS classes cached". In an editor for an html file I edited a tag '<h1></h1>' to '<h1 class=""></h1>' put the cursor between the ", held Ctrl and pressed Space. And all VSC could find was "class", "h1" and "title". None of which makes sense btw. Any actual classes didn't appear. It is so enormously tiring that today nothing is ever working and 99% of your time goes to configuring things or understanding tools you will never use again.
Also code.visualstudio.com/docs/editor/intellisense says VSC would support Intellisense for css out of the box. But it just doesn't. How astronomically stupid is all of that?
not working all the time,if I select form vs code suggestion list 'class' then I got class="",next I put cursor inside "" and type there is no css suggest,only if I click Ctrl+space or I press space,If I delete class name and leave again "",when i first type it works
35

In the latest version of VS Code the IntelliSense in comments and strings have been disabled by default. Below are the two options to bring back "24/7 IntelliSense" functionality or customize it to your own liking.

First make sure you have installed the HTML CSS Support Extension mentioned by dwonisch above.

Control + ',' to go to settings or click File -> Preferences -> Settings.

Click workspace settings tab and enter the following JSON code:

{
    "editor.quickSuggestions": {
        "comments": false, // <- no 24x7 IntelliSense in comments
        "strings": true, // but in strings and the other parts of source files
        "other": true
    }
}

The other option is to hit ctrl + space within the CSS quotes to activate the intelliSense. Example: 

<div class="(ctrl+space)"> </div>
Improve this answer

1 Comment

it is working in 08-2024
25

enter image description here

just add this 2 packeges and you are done.. !!!

Improve this answer

4 Comments

Do I have to restart vs code to make it working?
It works fine without restarting VS code.
Real heroes don't wear capes. They know the extensions.
These do the same thing as far as I can tell; why do you need both?
10

Just install this extension in VS Code. IntelliSense for CSS class names in HTML

enter image description here

Improve this answer

Comments

1

Unfortunately, this feature is not currently available in VS Code. However, it has been added as a feature request for upcoming updates. You can track the issue on Github.

Improve this answer

Comments

1

For React use install this extension in VS Code

1: install IntelliSense for CSS class names in HTML

enter image description here

but this extension works on class property as default so update the settings to work on className.

2: create a extensions.json file in .vscode folder and add the below object

{
    "recommendations": [
        "Zignd.html-css-class-completion",
        "html-css-class-completion.JavaScriptLanguages"
    ]
}
  • "Zignd.html-css-class-completion" for class property
  • "html-css-class-completion.JavaScriptLanguages" for className property

enter image description here

Improve this answer

Comments

1

Use extension IntelliSense for CSS class names in HTML for all the HTML, CSS and Bootstrap intelligence.

I am using Latest version of VS Code, intelligence is working fine.

enter image description here

Turn comments on if required in setting by pressing ctrl+,

"editor.quickSuggestions": {
        "comments": true,
Improve this answer

Comments

0
  1. Open Visual Studio Code.
  2. Use CTRL+, to get to the Workspace Settings
  3. At your Right side window you will see something like this: enter image description here
  4. Another words paste this URL
{
  "folders": [
    {
      "path": "D:\\Visual Studio\\AndreyCourse\\the-complete-web-developer-in-2018\\DocumentObjectModel"
    }
  ],
  "settings": {
    "css.remoteStyleSheets": [
      "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
    ]
  }
}
  1. Enjoy The Bootstrap Intellisense :-)
Improve this answer

2 Comments

this does not work, as there is no setting called css.remoteStyleSheets are you using an extension that does provide such a setting?
@DanielHabenicht right: marketplace.visualstudio.com/…
0

Name: IntelliSense for CSS class names in HTML Id: Zignd.html-css-class-completion Description: CSS class name completion for the HTML class attribute based on the definitions found in your workspace. Version: 1.20.0 Publisher: Zignd VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion

Use this

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.