IDE

Qui n’a pas tappé un millier sde fois echo ou console.log? Voir function(){}, ou encore () => {} ?

Grâce aux snippets customisés, vous allez pouvoir vous affranchir de cette corvée et être plus productif.

Trouver le menu des custom snippet dans VSCode

Faites la cmbinaisons de touche CTRL + SHIFT + P (sous Windows) et tpaez « snippet », sélectionnez custom

Ceci va vous amener au fichier csl.code-snippets . Voici un example de code que vous pouvez faire :

	"Print to console": {
		"scope": "javascript,typescript",
		"prefix": "cls",
		"body": [
			"console.log('$1','$2');",
		],
		"description": "Log output to console"
	}

Vous tapez le prefix « cls » et le body s’affichera. Notez les placeholder $1 et $2, vous pourrez basculer de l’un à l’autre avec la touche TAB.

Un site pour générer le code pour vos snippets.

Les snippets par framework ou langage

Il existe déjà dans la marketplace, des plugin où les snippets sont déjà définis. Allez dans la marketplace et tapez « snippet ».

ALT est souvent remplacé par OPTION dans Mac. CTRL est remplacé par COMMAND (ou pomme) . On ne traitera pas de Linux pour l’instant.

Augmentez votre productivité avec les raccourcis claviers

C’est un aspect complètement ignoré des débutants, mais ne pas connaitre les raccourcis clavier peut à la longue vous faire perdre beaucoup de temps. Il y a les raccourcis (peu) qu’un débutant doit connaitre dès la première heure, ce sont des raccourcis propre au système d’exploitation (ou à l’informatique), il y a les raccourcis du logiciel, et c’est ce que nous allons voir de suite et enfin nous allons mettre les raccourcis clavier un peu plus avancé, qu’il faudra acquérir dans les jours suivants

Les raccourcis clavier fondamentaux

• copier : CTRL + C
• coller : CTRL + V
• chercher dans le fichier : CTRL + F
• chercher et remplacer : CTRL + SHIFT + H
• chercher dans le projet : CTRL + SHIFT + F
• sélectionner un mot : double click souris sur le mot

Les raccourcis clavier de VSCode (débutant)

• dupliquer une ligne : CTRL + C + V (appuyer sur C puis V tout en maintenant CTRL) ou CTRL + SHIFT + FLECHE vers le bas
• chercher et remplacer :
• indenter le document : SHIFT + ALT + F
• chercher un fichier : CTRL + P
• bouger une ligne vers le haut ou bas : ALT + UP ou DOWN (flèche)
• Effacer une ligne : CTRL + X
• Réindenter le code : SHIFT + ALT + F

Pour ne pas avoir à réindenter le code, vous pouvez paramétrer l’éditeur pour qu’il réindente à chaque sauvegarde de fichier (CTRL +S), ou mieux encore à chaque mise à jour. Je vous montre néanmoins la méthode 1 seulement largement suffisante.

Aller dans File (ou Fichier) > Preferences,

Puis cherchez format et cliquez sur format on save.

Plus de raccourcis clavier (intermédiaire)

• Edition multi curseur : CTRL + ALT + UP ou DOWN
• Naviguer entre les onglets : CTRL + SHIFT + TAB ou CTRL + TAB
• Bracket matching : CTRL + SHIFT + \
• Aller au début du fichier : CTRL + HOME
• Aller à la fin du fichier : CTRL + END
• Modifier toutes le occurences d’un mot : CTRL + F2

Usages avancés

• GOTO Type definition
• GOTO Implementation
• GOTO Symbol

Document officiel (pdf) pour Windows : Raccourcis clavier VSCode

Configuration avancées mais pratique :

Formatage du code automatique lors de la sauvegarde :

Allez dans Préférence, taper "format on save", cocher la case.

Raccourcis personnalisés dans SublimeText

[
 { "keys": ["f1"], "command": "reindent" },
 { "keys": ["shift+space"], "command": "move", "args": {"by": "characters", "forward": true} },
 { "keys": ["ctrl+space"], "command": "move", "args": {"by": "lines", "forward": true} },
 { "keys": ["shift+alt+space"], "command": "move", "args": {"by": "characters", "forward": false} },
 ]

Package Controller de SublimetText

Le package Controller est le point d’entrée à vos besoins de personnalisation de SublimetText, et je vous promets que pour augmenter cet IDE qui bien que performant, n’est pas un IDE intégré.

Lorsque vous avez installé SublimeText 2, la première chose à faire est de customiser le logiciel, non pas qu’il lui manque des fonctions cool, mais vous allez le trouver encore plus puissant !

Installer le package manager

Un peu comme Firefox, Sublimet Text accepte des plugins ou package. Pour faciliter la gestion de l’installation des package, il faut installer le Package Manager. Pour ce faire aller sur cette page de développement de ce package manager, et copier coller le bout de code fourni dans la ligne de commande. Pour faire apparaitre le prompt de la ligne de commande il faut aller dans View > Show Console.

Coller le texte dans le champs texte du bas (et non dans la fenêtre de log) et appuyez sur ENTREE, vous devez avoir un message qui vous invite à redémarrer SublimeText.

Pour faire apparaitre les packages dorénavant disponibles à l’installation (il y en a des tonnes) faite la commande CTRL + SHIFT + P dans Windows. Note : il faut fermer tous les fichier pour que ça marche et cliquer Discover PAackage.

Installer un package

C’est le but de cet article ! Il existe une multitude de package, pour ce faire faites apparaitre la fenêtre du Package Manager CTRL + SHIFT + P, et sélectionnez Install Package, une fenêtre à la Google Suggest fait apparaître des package, avec l’autocomplétion tapez le nom du package voulue, par exemple je vais installer le commenteur de fonction et classes pour PHP DocBlokr. (devant function tapez /** et ENTREE !)

Chaque package est souvent dans un repository Github, mais vous pouvez installer facilement en tapant une commande dans le champ commande de Discover PAckage et cliquer sur le nom du package. Utiliser un git clone permet d’avoir la toute dernière version.

C’est fait ! je vous invite à explorer les autres packages sur cette page (obtenue en cliquant sur Discover PAckage) :

Pour aller plus loin avec SublimeText:

Configurez SublimeText 2 (ST2 pour les intimes) pour développer en PHP.

Emmet pour le CSS et les tags HTML

Le meilleur plugin pour les développeur intégrteur front-end, il permet d’entrer les codes html et css beaucoup plus rapidement et vous pouvez faire vos raccourcis personnalisés.