Introduction de VSCode :
VSCode est un éditeur de textes comme Notepad++.
Pour installer VSCode, il faut cliquer sur ce lien de téléchargement.
On peut également modifier quelques paramètres du logiciel qui permettent les couleurs syntaxiques. On peut également installer des extensions qui permettent de voir s'il n'y a pas de fautes dans le code, voir des auto-complétions dans tels ou tels languages de programmation (voir ci-dessous).
VSCode : Paramètres et "settings.json" :
Le fichier "settings.json" représente notre configuration. Pour le trouver, il faut aller dans l'onglet "File", puis dans "Preferences" et ensuite dans "Settings Configuration". Dans ce menu, on peut modifier ce qu'on veut (les extensions, ce qui est lié à Git (voir plus loin), etc.).
Normalement, il faut trouver le "Edit settings.json" dans ce menu pour modifier ce fameux fichier.
Ce fichier est, comme son nom l'indique, en format JSON (voir ci-dessous).
Raccourcis VSCode :
Pour pouvoir votre productivité avec VSCode, il faut utiliser des raccourcis géniaux.
Multiplier les curseurs avec VSCode :
Pour sortir d'un multiplicurseur, vous devez faire la touche "Esc".-
[ctrl + alt + down|up] permet d'écrire partout où on a sélectionné le même texte.
-
[ctrl + d] permet de trouver les occurences car très souvent on a envie de changer un nom de balises mais aussi un nom de fonction si on est en JavaScript (JS), mais aussi un nom de composants si on était avec React, etc. Ca arrive très souvent.
-
[ctrl + shift + l] permet de trouver toutes les occurences d'un coup.
-
[alt + click] permet de créer des multiplicurseurs personnalisés où l'on veut.
-
[ctrl + k + c|u] permet de commenter/décommenter la partie du code sélectionnée.
-
[alt + down|up] permet de déplacer en bas ou en haut un élément.
-
[ctrl + h] permet de chercher toutes les occurences d'un élément (par exemple: une div) et ca change un par un avec un Enter.
-
[ctrl + alt + Enter] permet de changer toutes les occurences d'un élément d'un coup.
-
[F12] permet, dans un fichier JavaScript, en cliquant sur un appel de fonction de retrouver la déclaration de la fonction appelée.
-
[ctrl + "+"|"-"] permet de zoomer/dézoomer le code.
Pour apprendre tous ces raccourcis, je vous conseille de faire un fichier "raccourci" avec tous les raccourcis que vous trouviez intéressant évidemment. Bien évidemment, dans la configuration de VSCode, on peut trouver tous les raccourcis, mais en général il y a des raccourcis qu'on va pas utiliser ou pas trop aimer utiliser et donc on va pas tous les apprendre par coeur.
Extensions VSCode :
Ici, je vais vous parler de 5 extensions de VSCode qui valent vraiment le coup. Ces extensions pour la plupart sont disponibles également sur d'autres éditeurs de textes ou alors avec des noms différents, mais qui fait plus ou moins la même chose. Ces cinq extensions ci-dessous n'ont pas besoin de trop de configuration pour pouvoir ces propres fonctionnalités à mettre en place.
Ces cinq extensions ci-dessous sont très faciles à implémenter car vous devez juste les installer pour qu'elles fonctionnent correctement.
Pour utiliser les extensions sur VSCode, on clique sur l'icône des petits carrés (voir image ci-dessous) et puis on a des tonnes det des tonnnes de petites extensions, recomamndées ou pas.
Chaque extension aura sa petite fiche d'explication sur les fonctionnalités qu'il y a et un bouton d'installation ou de désinstallation (tout dépend si vous l'avez déjà installée ou pas).
La première extension qu'on va voir est "vscode-icons". Elle permet d'afficher des icônes fantastiques pour vos fichiers. Son concurrent est "Material Icon Theme".
La seconde extension est "Live Server" qui, comme son nom l'indique, permet de voir l'évolution de notre site à chaque fois qu'on tape quelques choses dans notre code. Par exemple, on va dans notre fichier "index.html" et on fait un click pour choisir "Open with Live Server". Ca fonctionne seulement sur les fichiers HTML et permet de voir en local tous les changements que je vais faire en direct.
Dans l'onglet "File", il existe l'option "Auto Safe" qui permet d'éviter chaque fois de faire un [ctrl + s]. Attention, avec cette fonctionnalité, lorsque vous faites une boucle while dans un fichier JavaScript et que vous mettez un peu de temps à la fermer et à faire la logique à l'intérieur, ça risque de faire une boucle infinie qui va faire planter votre navigateur.
La prochaine extension est "Bracket Pair Colorizer permet de coloriser nos accolades dans notre fichier JavaScript et quand on clique on voit où l'on est (par exemple, dans quel bloc je suis). C'est plus agréable pour les yeux car on peut répérer facilement les fermetures de bloc par exemple.
L'extension suivante est "Better Comments"
Pour utiliser cette extension, il faut l'écrire comme ça : /** */ ou // (attention le // n'existe pas en CSS). Le ! met en rouge le texte qui suit pour dire de faire attention. Le ? permet de se poser des questions telles que "est-ce que je laisse ce code ou pas ?". On peut avoir "TODO" pour indiquer les choses à faire. Le @param pour indiquer les paramètres que l'on va mettre dedans.
La dernière extension à vous montrer est "Emmet qui est installé de base sur VSCode et sur d'autres éditeurs de code tels que PHPStorm. Sinon, elle est disponible sur tous les éditeurs. Dans "File", "Preferences", "Settings", "Extensions", on voit "Emmet" qui est directement insallée ici. On peut gérer certaines de ces fonctionnalités en éditant son fichier "settings.json".
Cette extension fait des raccourcis en tapant le raccourci suivi d'un "Enter" ou d'un "tab". On va en voir ci-dessous :
! se transforme :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>lorem50 se transforme en 50 mots du "Lorem Ipsum", génralement appelé faux-texte, est, en imprimerie, une suite de mots sans signification utilisée à titre provisoire pour calibrer une mise en page, le texte définitif venant remplacer le faux-texte dès qu'il est prêt ou que la mise en page est achevée.
input se transforme en <input type="text">
ftr se transforme en <footer></footer>
hdr se transforme en <header></header>
bq se transforme en <blockquote></blockquote>
btn se transforme en <button></button>
div.maClasse se transforme en <div class="maClasse"></div>
.maClasse se transforme en <div class="maClasse"></div>
#monId se transforme en <div id="monId"></div>
div.maClasse#monId se transforme en <div class="maClasse" id="monId></div>
div.c1.c2 se transforme en <div class="c1 c2"></div>
div{Je suis le contenu}.c1 se transforme en <div class="c1">Je suis le contenu</div>
On peut le faire avec n'importe quel élément pas forcément un div :
p.c1 se transforme en <p class="c1"></p>
On peut également faire des choses un peu funcky :
div.c1>p.item se transforme en <div class="c1><p class="item"></p></div>
div{Je suis le parent}.items#monId>p.item*3 se transforme en <div class="items" id="monId">Je suis le parent<p class="item"></p><p class="item"></p><p class="item"></p></div>
On peut multiplier plusieurs fois un élément. Par exemple, si on écrit p.item*50, ça écrira cinquante fois le <p class="item"></p>
On peut également additionner plusieurs éléments :
h1.titre+h2.sous-titre se transforme en <h1 class="titre"></h1><h2 class="sous-titre"></h2>
On peut également utiliser "Emmet" pour faire des listes :
ul.liste>li.item*6 se transforme en < ul class="liste"><li class="item"></li><li class="item"></li><li class="item"></li><li class="item"></li><li class="item"></li><li class="item"></li></ul>
div*5.parent+p.item*5 qui permet d'avoir cinq éléménts <div class="parent"></div> suivis de cinq éléments <p class="item"></p>.
h1{Liste des courses :}+ul>li.item.item$*2^button{Payer maintenant} se transforme en <h1>Liste des courses :</h1><ul><li class="item item1"></li><li class="item item2"></li></ul><button>Payer maintenant</button>
On peut également faire des groupes avec les parenthèses.
Vous avez compris qu'Emmet est super cool. Ca fonctionne pas qu'avec le HTML, ça fonctionne également avec le CSS :
h1{bg} se transforme en h1{background: #000;}
c dans le sélecteur CSS se transforme en color: #000;
c#1 dans le sélecteur CSS se transforme en color: #111111;
c#e0 dans le sélecteur CSS se transforme en color: #e0e0e0;
c#fc0 dans le sélecteur CSS se transforme en color: #ffcc00;
fonts dans le sélecteur CSS se transforme en font-size: ;
fontfam dans le sélecteur CSS se transforme en font-family: ;
p10 dans le sélecteur CSS se transforme en padding: 10px;
m10 dans le sélecteur CSS se transforme en margin: 10px;
fw400 dans le sélecteur CSS se transforme en font-wsight: 400;
-wmso-trf dans le sélecteur CSS se transforme en -webkit-transform: ;, -moz-transform: ;, -ms-transform: ;, -o-transform: ; et transform: ;. Ce sont tous les vendors de transform.