web-dev-qa-db-fra.com

comment ajouter Intellisense à Visual Studio Code pour bootstrap

J'aimerais avoir intellisense pour bootstrap spécifiquement mais même pour les styles css que j'écris dans mon projet. J'ai des références dans un project.json et un bower.json mais ils ne semblent pas rendre les références disponibles.

visual-studio-code
25
Honorable Chow

Vous pouvez installer HTML CSS Support Extension . En ajoutant un fichier resource.json dans votre dossier .vscode ou project root, vous pouvez configurer les chemins d'accès aux feuilles de style utilisées.

ext install vscode-html-css

resource.json:

{
  "css": {
    "style": [
      "bower_components/bootstrap/dist/bootstrap.css"
    ]
  }
}

Cela ajoutera Intellisense dans vos fichiers HTML:

 Bootstrap Intellisense

52
dwonisch

Voici les étapes courantes (pas uniquement pour Bootstrap)} pour activer css IntelliSense dans VS Code:

Étape 1: Allez à https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion

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

((Les étapes d'installation sont déjà là)} _

Étape 2: Cliquez sur le bouton Installer qui apparaît en haut du site Web (capture d'écran ci-dessous).

 enter image description here

Étape 3: Après avoir cliqué, le navigateur affiche une fenêtre contextuelle permettant d'accéder à VS Code. Ouvrez-le avec VS Code.

Étape 4: Cliquez à nouveau sur le bouton "installer" qui apparaît dans le code VS.

Étape 5: Après avoir redémarré le logiciel, cliquez sur l'icône en bas à gauche indiquée dans l'image ci-dessous:

 enter image description here

Étape 6: Appuyez sur "ctrl + [espace]" dans les guillemets de classe, vous obtiendrez les noms complets des classes à partir des feuilles de style attachées.

16
vishnu

Dans la dernière version de VS Code, IntelliSense dans les commentaires et les chaînes a été désactivé par défaut. Vous trouverez ci-dessous les deux options pour ramener la fonctionnalité «IntelliSense 24/7» ou la personnaliser à votre guise.

Tout d’abord, assurez-vous d’avoir installé l’extension de support HTML CSS mentionnée ci-dessus par dwonisch.

Ctrl + ',' pour accéder aux paramètres ou cliquez sur Fichier -> Préférences -> Paramètres.

Cliquez sur l'onglet Paramètres de l'espace de travail et entrez le code JSON suivant:

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

L'autre option consiste à appuyer sur ctrl + espace dans les guillemets CSS pour activer l'intelliSense. Exemple: 

<div class="(ctrl+space)"> </div>
15
Jason Hanson

Malheureusement, cette fonctionnalité n'est actuellement pas disponible dans VS Code. Cependant, il a été ajouté en tant que demande de fonctionnalité pour les mises à jour à venir. Vous pouvez suivre le problème sur Github .

1
hxlnt

D'accord.

1. Ouvrez le code Visual Studio.

2. Utilisez CTRL +, pour accéder aux paramètres de l'espace de travail

3. À votre fenêtre de droite, vous verrez quelque chose comme ceci:

 enter image description here

4. Un autre mot Coller cette 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. Profitez du Bootstrap Intellisense :-)

0
Dmitry