how to add Intellisense to Visual Studio Code for bootstrap

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

in the settings.json

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.

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>

enter image description here

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

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

enter image description here

how to add Intellisense to Visual Studio Code for bootstrap

Related

Recent Posts