how to add Intellisense to Visual Studio Code for bootstrap

Question

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 the

Answer 1

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)

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:

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

Answer 2

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>

Answer 3

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.

Answer 4

You can install HTML CSS Support Extension.

ext install vscode-html-css

This will add Intellisense in your HTML files:

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.remoteStyleSheets": [
  "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
]

in the settings.json

Answer 5

Okay.

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:

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"
		  ]
		
	}


}

5. Enjoy The Bootstrap Intellisense :-)