VS : marre de toujours taper les même trucs !

  Vous voulez afficher une variable dans la console !

Aucun problème vous savez faire : 

const x = 2;

console.log(`x = ${x}`);

Découvrez les snippets

En quoi VS code peut me simplifier la vie ! Les "snippets" vont me faire gagner un temps fou ! Allez dans préférence->extraits utilisateur ( user snippet )

Création d'un snippet global

1. "Print to console": {
2.         "scope": "javascript,typescript",
3.         "prefix": "cl",
4.         "body": [
5.             "console.log(`${2:name} = ${${1:value}}`);",
6.             "$0"
7.         ],
8.         "description": "Log output to console"
9.     }

Comme indiqué dans les commentaire 1,2 ... représentent la Tabulation.

Il vous suffit de taper cl puis ↹ (tab)

simple snippet

Création d'un raccourcis

Allez dans préférence-> raccourcis clavier -> (en haut à droite) ouvrir les raccourcis clavier

Tapez une combinaison de touche ctrl+shift+q (par exemple)

ctrl+shift+q

Ecrirez ensuite

1. {
2.       "key": "ctrl+shift+q",
3.       "command": "editor.action.insertSnippet",
4.       "when": "editorTextFocus",
5.       "args": {
6.         "name" : "Print to console"
7.       }
8.   }

"name" est le nom donné à votre snipper.

Ecrivons le snippet !

1.   "Print to console": {
2.         "scope": "javascript,typescript",
3.         "prefix": "cl",
4.         "body": [
5.             "console.${2|log,table|}(${TM_SELECTED_TEXT: `${1:value}`})",
6. "${0}"
7.         ],
8.         "description": "Log output to console"
9.     }

Vous afficher soit la sélection soit le curseur avec comme placeholder value :

${TM_SELECTED_TEXT: `${1:value}`}

Vous pourrez ajouter les consoles de error et dir comme suit :  

${2|log,table,error,dir|}

En action

Sélectionnez le code que vous voulez afficher puis tapez ctrl+shift+q

Notez que vous pouvez toujours sélectionner le code que vous voulez afficher  puis tapez cl !

Vous pouvez également tapez cl↹ sans sélection !

Last one !

Ajouter un autre snippet à la suite 

{

...

},

1. "console.time": {
2. "scope": "javascript,typescript",
3. "prefix": "ct",
4. "body": [
5. "console.time('$1')",
6. "${TM_SELECTED_TEXT: $2}",  
7. "console.end('$1')",
8.                         "$0",
9. ],
10. "description": "wrap selection with console.time"
11. }

Lig. 6 : Ajoute le code sélectionné TM_SELECTED_TEXT ou le curseur $2.

Lig. 7 : Vous réutilisez $1 pour placez un second curseur ! 

En action

Sélectionnez le code que vous voulez encadrez par console.time puis tapez ct

Je vous laisse écrire  et tester un dernier "snippet"

"Print to console": {

    "scope": "javascript,typescript",     "prefix": "cl",     "body": [         "console.${3|log,info,error,table|}(`${2:info} = ${${TM_SELECTED_TEXT:${1:value}}}`)", "$0"     ],     "description": "Log output to console" }

Conclusion

C'est sur ce même principe que vous pourrez installer des extensions pour des langages.

Voici ce qu'il est proposé par DigitalBrainstem.javascript-ejs-support

Une fois installé, créez un fichier .ejs et tapez ctrl space pour voir les snippets disponibles.

ctrl space

EJS TAG For Loop