18041 sujets

Questions générales et questions de débutants

Visual Studio Code, snippet HTML avec la touche clavier [!] [Résolu]

Bonjour tout le monde !

Connaissez-vous Visual Studio Code ? J'ai un petit souci avec lui, et mes recherches sur le web n'ont pas données de résultats.

Lorsque l'on créé un fichier HTML, il est possible d'utiliser la touche [ ! ] du clavier (azerty chez moi) pour créer la structure de base d'une page HTML. Je procède comme suit : J'appuis sur la touche [ ! ] puis sur [ tab ] pour que l'éditeur développe la syntaxe :
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

J'aimerais modifier le code créé de cette manière. Je souhaite changer la langue "en" en "fr", supprimer le titre "document" par défaut et ajouter un lien vers une feuille de style css mais impossible de trouver comment le faire.

Quelqu'un a-t-il une idée ? Merci d'avance. =)
Modifié par SilverFox (12 Sep 2016 - 11:37)
Bonjour,

Une idée comme ça et ça vaut que ça vaut mais si tu lance une recherche dans le contenu des fichiers depuis le dossier d'installation en saisissant comme mot clé "<title>Document</title>" tu trouvera peut-être le template de base ?!
Hello

Pour répondre a Greg en premier, c'est ce que j'ai fais Smiley smile mais malheureusement c'est un snippet, donc du contenue générer (et donc, c'est rare de trouver directement la balise html)

par contre j'ai réussi à tous changer. en effectuant plusieurs recherche je suis tomber sur le fichier snippets.json dans le dossier \resources\app\node_modules\emmet\lib

C'est ce fichiers qu'il va falloir modifier :

tout en haut tu as : 

	"variables": {
		"lang": "en",
		"locale": "en-US",
		"charset": "UTF-8",
		"indentation": "\t",
		"newline": "\n"
	},


tu peux deja changer la lang en fr

Ensuite tu as : 
"doc": "html>(head>meta[charset=${charset}]+title{${1:Document}})+body",


et là, tu peux modifier 1:Document et mettre ce que tu veux. j'ai juste remplacer par le mot test, pour mettre un lien, va falloir que tu fasse cette fois tes propres recherches.

Voila Smiley biggrin
moi même a écrit :

Une idée comme ça et ça vaut que ça vaut
Donc ça vaut rien !

Merci Jencal d'avoir corrigé le tir Smiley lol
Merci de vos réponses.

En effet, le fichier snippets.json contient les éléments qui m'intéresse. Le hic c'est que je ne suis pas vraiment fan à l'idée de modifier les fichiers originaux de l'éditeur.

Je pense avoir trouver la solution mais je dois essayer : Si nous allons dans Fichier -> Préférences -> Extraits de code utilisateur -> HTML, on tombe sur un fichier html.json pour ajouter des snippets personnels.

Je pense que c'est ici qu'il faut personnaliser les snippets.
Personnellement, je coderais directement dans les fichiers originaux.

Mais bien entendu tu peux créer tes propres snippets bien entendu.
donc tout ce que je peux faire c'est te renvoyer sur le site officiel
Modifié par JENCAL (12 Sep 2016 - 14:19)
Ok, j'ai insérer ce snippet là dans preference html 


"HTML Struct Start": {
        "prefix": "doctype",
        "body": [
            "<!DOCTYPE html>",
			"<html lang=\"en\">",
			"<head>",
				"<meta charset=\"UTF-8\">",
				"<title>Document</title>",
			"</head>",
			"<body>",
				
			"</body>",
			"</html>"
        ],
        "description": "HTML Structure for start coding"
    }


maintenant quand, dans un fichier html, je saisi "doctype" + tab, tout fonctionne correctement.
à toi de remplacer ce que tu désire.
Modifié par JENCAL (12 Sep 2016 - 14:28)
J'allais poster la même chose. Tu m'a pris de vitesse !! Smiley cligne
Note que si on utilise le préfixe [ ! ], ça ne fonctionne pas. L'éditeur complète avec le snippet d'Emmet. Il est également possible d'utiliser \t et \n pour faire respectivement une tabulation et un retour à la ligne. Ça m'a permit d'éviter de devoir indenter violemment mon snippet.

Voici ce que j'ai réalisé (je ne sais pas trop si c'est la meilleure façon de faire mais elle fonctionne !) :
{
    "Basic HTML5 template": {
        "prefix": "!D",
        "body": [
            "<!DOCTYPE html>",
            "<html lang=\"fr\">",
            "<head>",
            "\t<meta charset=\"UTF-8\">",
            "\t<title></title>\n",

            "\t<!--[if lt IE 9]>",
            "\t\t<script src=\"//html5shim.googlecode.com/svn/trunk/html5.js\"></script>",
            "\t<![endif]-->\n",

            "\t<link rel=\"stylesheet\" href=\"\">",
            "</head>",
            "<body>",
            "\t",
            "</body>",
            "</html>\n",
        ],
        "description": "A basic HTML5 template for any project."
    }
}

Merci encore pour vos réponses.
Modifié par SilverFox (12 Sep 2016 - 15:01)
Merci Jencal et SilverFox pour votre réponse Smiley merci

3 précisions :
La première : Configurez bien le préfixe . Dans le code de Jencal le préfixe est doctype et dans le code de SilverFox le préfixe est !d. Je dis ça parce que j'ai mis un moment avant de me rendre compte de quel préfixe taper pour que MON modèle HTML s'affiche. Pendant longtemps, je tapais juste ! en pestant "Mais ça marche pas leur truc !". Quand on est un boulet comme moi... Smiley lol Smiley langue

La seconde : (c'est peut-être évident pour certains, mais bon ...) Quand, dans votre modèle HTML, vous avez des guillemets (exemple src="" ou href="" ou encore name="") pensez à mettre un anti-slash devant vos guillemets (exemple src=\"\" ou href=\"\" ou encore name=\"\")

La troisième : si (comme moi) vous avez dans votre modèle HTML un \n pensez à mettre un anti-slash devant pour avoir ceci \\n , autrement bah, ça vous fait sauter une ligne Smiley langue

J'espère que ça en aidera d'autres
Modifié par spip93 (08 Nov 2019 - 15:30)
Sujet clos
Aller à