1 – Activer la sauvegarde automatique

Quoi de plus frustrant que de perdre son travail suite à un bug ou à une panne d’électricité prenez l’article que vous êtes en train de lire par exemple. Celui-ci à été rédigé depuis l’interface Gutemberg de WordPress, ne disposant pas de sauvegarde automatique à du être réécrit à cause justement d’une panne de courant.

N’hésitez donc pas à activer cette option le plus tôt possible afin de vous assurer de toujours garder la version la plus récente de votre travail. Il vous sera possible de configurer dans les menus le déclenchement de cet sauvegarde (délai, changement de bloc ou de fenêtre). Si jamais vous aviez peur d’enregistrer des erreurs, ne vous en faites pas, activer l’auto-save ne vous empêche pas de réaliser des « Ctrl + Z » ou des « Ctrl + Maj + Z » afin de naviguer dans votre historique de modifications.

Attention toutefois, cette option vous sauvera dans bien des situations, néanmoins, en cas d’invasion zombie, de catastrophe nucléaire ou d’attaque de dragon, elle ne vous sera d’aucune utilté…

2 – Les abréviations « Emmet »

VS Code simplifie beaucoup de choses dans la rédaction de code grâce a ce qu’ils appellent les « Abréviations Emmet ». En effet pour créer une « div » par exemple, vous ne serez pas obligé d’écrire manuellement « <div></div> ». Au fur et a mesure que vous entrerez des caractères dans votre code, VS Code vous ferra apparaitre un petit menu contextuel a proximité du curseur de saisie, dans lequel il vous affichera touts les éléments existants correspondant à ce que vous avez écrit. Vous pourrez alors naviguer dedans soit a la souris soit a l’aide des flèches du clavier afin de sélectionner l’option qui vous convient.

Petite précision, VS Code retient votre dernier choix, et donc si vous avez créé une div après avoir entré la lettre « d » dans votre code, ils vous sera possible pour la suivante, d’écrire un « d » suivi de la touche « Tabulation » et votre div sera créée en deux pressions sur votre clavier, magique.

3 – Raccourcis de création des éléments HTML.

Comme le représente plutôt bien le Screenshot associé à ce paragraphe, VS Code vous permet de créer de façon extrêmement rapide une multitude d’éléments HTML avec et sans classes ou ID.

Ici donc assez peu d’explications tant l’image réalisée est complète et parlante.

Néanmoins j’attirerais votre attention sur les lignes

« .votreClasse#votreID*2 »
valable aussi pour « #votreID*2 »

En effet, l’Id d’un élément html étant à usage unique, il faudra faire attention à ce type d’usage et à le réserver pour la création d’Id proches mais différents.

Exemple:
#bloc*3, vous donnera ceci:
<div id= »bloc »></div>    
<div id= »bloc »></div>    
<div id= »bloc »></div>

Qu’il vous suffira de modifier de la sorte:
<div id= »bloc1″></div>    
<div id= »bloc2″></div>    
<div id= »bloc3″></div>

Dans le cas de la ligne:
« #votreID1#votreID2 »
Cet exemple n’est là que pour vous aider à comprendre le fonctionnement des Id, mais en effet cela ne s’écrit pas, un élément ne pouvant bénéficier que d’un seul Id. Par défaut il prendra le dernier Id renseigné.

4 – L’Indentation

Vous vous apercevrez très rapidement qu’une indentation claire et structurée est primordiale à l’élaboration d’un code lisible et compréhensible. Sur vos premières pages ce détail ne vous sautera probablement aux yeux, mais à mesure que le code se complexifie, si votre indentation n’est pas impeccable, vous aurez beaucoup de mal a vous y retrouver. Alors imaginez quand vous reprenez votre code après plusieurs mois ou années…

Là aussi, VS Code intègre des raccourcis ayant pour but de vous faciliter grandement le travail. La touche « Tabulation » deviendra vite une alliée de choix afin de placer vos lignes façon tiroir. Mais quand il s’agit de faire le mouvement inverse (reculer une ligne vers la gauche) celà peut vitre devenir un méchant casse tête et vous ne compterez plus le nombre de pressions sur la touche « Del » de votre clavier.

Fort heureusement VS Code intègre un raccourci, « Maj + Tab » vous permettant de faire de l’indentation vers l’arrière.

Mieux encore, si c’est tout un bloc qu’il vous faut déplacer, chose courante après la suppression d’un ou plusieurs conteneurs parents ou enfants, faites une sélection du bloc à l’aide de la souris (ou du clavier comme nous le verrons dans l’astuce suivante) et utilisez « Tab » ou « Maj + Tab » pour déplacer le bloc entier en avant ou en arrière.

5 – L’organisation de vos conteneurs tout au clavier

Dans l’astuce précédente, nous avons vu comment déplacer rapidement et facilement des éléments sur l’axe X de votre code, ici, nous allons voir ce qu’il en est pour l’axe Y.

Le premier réflexe quand il faut déplacer des éléments de haut en bas dans le code sera évidemment d’utiliser le copier/coller. Avec cette astuce, vous allez vous en servir bien moins souvent.

En utilisant « Alt + ↑ » ou « Alt + ↓ » vous pourrez déplacer la ligne active, c’est a dire celle ou se situe le curseur de saisie, de haut en bas, vous permettant ainsi de déplacer une ligne à l’endroit hiérarchique que vous souhaitez avec en bonus, une indentation automatique de la ligne que vous déplacez.

En parallèle de cela et comme teasé à l’astuce précédente, l’utilisation de « Maj + ↑ » ou « Maj + ↓« , vous permet d’ajouter des lignes à votre sélection et donc de sélectionner des blocs entiers à faire monter ou descendre dans votre code.

Petite précision pratique, pas besoin que tous les caractères d’une ligne soient sélectionnés pour effectuer le déplacement, la simple présence de la sélection sur un seul caractère de la ligne vous permettra d’en déplacer tout le contenu.