Voir le flux RSS

danielhagnoul

Visual Studio Code : création et utilisation d'un snippet

Noter ce billet
par , 03/06/2018 à 12h12 (697 Affichages)
Dans les billets précédents, Form2 et Form3, nous avons souvent utilisé des codes JS qui ont une base commune :

Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
dvjhUtilitiesBoolDebug = true;
 
const elemForm = k$('#myForm');
 
if (kFormNameUnique(elemForm)) {
    const oElemForm = kCreateFormDOMObject(elemForm);
 
    console.log(kLogVars `L'objet oElemForm contient les propriétés : ${ oElemForm }`);
 
    elemForm.addEventListener('submit', ev => {
        ev.stopPropagation();
        ev.preventDefault();
 
        // récupérations des données au format JSON
        let oDatas = kFromToDatas(elemForm);
 
        oDatas['dateTime'] = (new kDvjhDate()).toString(); // ex : 2018-05-18T17:35:02.757+0200
 
        console.log(oDatas);
    }, {
        capture: false,
        passive: false,
        once: false
    });
}

C'est un bon candidat pour en faire un extrait de code utilisateur (un snippet).

Nous allons inclure notre extrait de code dans le fichier : Fichier > Préférences > Extraits de code utilisateur > javascript.json.

Si c'est votre premier snippet, remplacer le contenu du fichier par le contenu suivant :

Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
{
	// Place your snippets for javascript here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	// "Print to console": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
	"Traitement du formulaire": {
		"prefix": "elemForm",
		"body": [
			"dvjhUtilitiesBoolDebug = true;",
			"",
			"const elemForm = k$('#myForm');",
			"",
			"if (kFormNameUnique(elemForm)) {",
				"const oElemForm = kCreateFormDOMObject(elemForm);",
				"",
				"console.log(kLogVars `L'objet oElemForm contient les propriétés : ${ oElemForm }`);",
				"",
				"elemForm.addEventListener('submit', ev => {",
					"ev.stopPropagation();",
					"ev.preventDefault();",
					"",
					"// récupérations des données au format JSON",
					"let oDatas = kFromToDatas(elemForm);",
					"",
					"oDatas['dateTime'] = (new kDvjhDate()).toString(); // ex : 2018-05-18T17:35:02.757+0200",
					"",
					"console.log(oDatas);",
				"}, {",
					"capture: false,",
					"passive: false,",
					"once: false",
				"});",
			"}"
		],
		"description": "Base pour kCreateFormDomObject"
	}
}

Sauvegarder et fermer le fichier javascript.json.

Pour utiliser ce snippet, dans un fichier JS, il suffit de commencer à taper elemForm pour pouvoir inclure le snippet d'un appui sur la touche Tab.

Ensuite, un clic droit sur le code et sélectionné l'option du menu contextuel Metter en forme le document vous restituera le code voulu.

Nom : 88x31.png
Affichages : 100
Taille : 1,4 Ko Licence Creative Commons Attribution 2.0 Belgique

Envoyer le billet « Visual Studio Code : création et utilisation d'un snippet » dans le blog Viadeo Envoyer le billet « Visual Studio Code : création et utilisation d'un snippet » dans le blog Twitter Envoyer le billet « Visual Studio Code : création et utilisation d'un snippet » dans le blog Google Envoyer le billet « Visual Studio Code : création et utilisation d'un snippet » dans le blog Facebook Envoyer le billet « Visual Studio Code : création et utilisation d'un snippet » dans le blog Digg Envoyer le billet « Visual Studio Code : création et utilisation d'un snippet » dans le blog Delicious Envoyer le billet « Visual Studio Code : création et utilisation d'un snippet » dans le blog MySpace Envoyer le billet « Visual Studio Code : création et utilisation d'un snippet » dans le blog Yahoo

Mis à jour 08/06/2018 à 10h24 par danielhagnoul (Licence)

Catégories
Javascript , Développement Web

Commentaires