web-dev-qa-db-fra.com

VS Code HTML error verification/validation

Je viens de passer à Visual Studio Code pour le développement Web de Netbeans et je me débrouille bien. Dans Netbeans, si j'oublie de fermer un crochet sur une variable, cela indique mon erreur avec un soulignement rouge ondulé et l'alerte dans la marge de gauche.

J'aurais pensé que la vérification d'erreur était une fonction fondamentale dans un éditeur de développement Web tel que vs code. Peut-être que je ne trouve tout simplement pas la bonne option ou extension.

Comment puis-je obtenir le même comportement de vérification d'erreur html, css dans VS Code?

htmlvisual-studio-code
8
Marc

VSCode n'a pas de validation HTML par défaut. Mais cela vous permet d'ajouter des extensions et d'activer ces fonctionnalités. 

Pour ajouter une validation HTML (linting), ouvrez le VSCode, puis appuyez sur Ctrl + P et collez ensuite ext install HTMLHint dans celui-ci, puis appuyez sur entrée. Il va installer un validateur HTML. Vous devrez peut-être recharger VSCode pour charger l'extension.

Maintenant, si vous ouvrez le même document HTML que vous aviez l'erreur de syntaxe, vous devriez voir qu'il y a un problème affiché dans la barre d'état en bas :) et il montrera également les erreurs dans ces lignes. 

17
Nimeshka Srimal

VS Code prend en charge le formatage du code par défaut et assure le suivi de l’erreur syntaxique. Si vous créez un nouveau fichier et essayez directement d’écrire le code, VS Code n’a pas pu comprendre quelle langue ou quel type de syntaxe l’utilisateur souhaite formater/corriger. Donc, vous devez d’abord enregistrer le nouveau fichier avec l’extension appropriée puis visualisez correctement la syntaxe.

Le formatage du code est disponible dans VS Code via les raccourcis suivants:

  • Sur Windows Shift + Alt + F
  • Sur mac Shift + Option + F
  • Sur Ubuntu Ctrl + Shift + I

Vous pouvez ajouter Auto Close Tag à partir du marché VS Code.

Lancez VS Code Quick Open (Ctrl + P), collez la commande suivante et appuyez sur entrée.

  1. Ajouter automatiquement une balise de fermeture HTML/XML, identique à Visual Studio IDE ou au texte Sublime

    ext install auto-close-tag

  2. Intégration de VS Code pour HTMLHint - Un outil d’analyse de code statique pour HTML

    ext install HTMLHint

  3. Fournit l'achèvement du nom de classe CSS pour l'attribut de classe HTML en fonction des fichiers CSS de votre espace de travail. Prend également en charge l'attribut className de React.

    ext install html-css-class-completion
4
eigenharsha

Le code de VS supporte ceci par défaut. Le support Emmet est également activé par défaut, ce qui signifie que vous n'avez pas à vous soucier des balises HTML fermées. Il ajoute automatiquement une balise de fermeture.

1
Ganesh

Ce n'est pas une fonctionnalité intégrée de VsCode ... Cependant, il y a beaucoup de plugins disponibles. Je vous recommanderais le plugin HTMLHint. C'est ce que j'ai utilisé. 

Vous pouvez l'installer en utilisant: ext install HTMLHintcommand

0
user8197826

J'ai constaté que cette extension (sans vous permettre d'étendre les règles intégrées) fonctionne mieux que HTMLHint pour vérifier la validité HTML.

Nom: Validation W3C

Id: umoxfo.vscode-w3cvalidation 

Description: Ajoute la prise en charge de la validation W3C au code Visual Studio. 

Version: 2.3.0 

Éditeur: Umoxfo VS 

Lien vers le marché: https://marketplace.visualstudio.com/items?itemName=umoxfo.vscode-w3cvalidation

0
ChekTek