如何将智能感知添加到 VisualStudio 代码中用于引导

我想有智力引导特别是对于我写在我的项目的 CSS 样式。我在一个项目 t.json 和一个 Bower.json 中找到了参考资料，但他们似乎没有提供参考资料。

136989 次浏览
小开

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.

小开

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

小开

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>
小开

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.

小开
  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 :-)
小开

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

enter image description here

小开

enter image description here

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

小开

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

小开

I am using Latest version of VS Code 2022 1.72.2. I have installed below Extension all the HTML, CSS and Bootstrap intelligence working fine.

IntelliSense for CSS class names in HTML

enter image description here

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

"editor.quickSuggestions": {
"comments": true,

提交答案