1 – Activer la sauvegarde automatique<\/h2>\n\n\n\n
Quoi de plus frustrant que de perdre son travail suite \u00e0 un bug ou \u00e0 une panne d’\u00e9lectricit\u00e9 prenez l’article que vous \u00eates en train de lire par exemple. Celui-ci \u00e0 \u00e9t\u00e9 r\u00e9dig\u00e9 depuis l’interface Gutemberg de WordPress, ne disposant pas de sauvegarde automatique \u00e0 du \u00eatre r\u00e9\u00e9crit \u00e0 cause justement d’une panne de courant.<\/p>\n\n\n\n
N’h\u00e9sitez donc pas \u00e0 activer cette option le plus t\u00f4t possible afin de vous assurer de toujours garder la version la plus r\u00e9cente de votre travail. Il vous sera possible de configurer dans les menus le d\u00e9clenchement de cet sauvegarde (d\u00e9lai, changement de bloc ou de fen\u00eatre). Si jamais vous aviez peur d’enregistrer des erreurs, ne vous en faites pas, activer l’auto-save ne vous emp\u00eache pas de r\u00e9aliser des \u00ab\u00a0Ctrl + Z\u00a0\u00bb ou des \u00ab\u00a0Ctrl + Maj + Z\u00a0\u00bb afin de naviguer dans votre historique de modifications.<\/p>\n\n\n\n
Attention toutefois, cette option vous sauvera dans bien des situations, n\u00e9anmoins, en cas d’invasion zombie, de catastrophe nucl\u00e9aire ou d’attaque de dragon, elle ne vous sera d’aucune utilt\u00e9…<\/p>\n<\/div>\n\n\n\n
![\"Menu](\"http:\/\/www.pallies-productions.com\/wp_sites\/geekcreatif\/wp-content\/uploads\/2021\/05\/VSCode_Screen_Autosave.png\")
2 – Les abr\u00e9viations \u00ab\u00a0Emmet\u00a0\u00bb<\/h2>\n\n\n\n
VS Code simplifie beaucoup de choses dans la r\u00e9daction de code gr\u00e2ce a ce qu’ils appellent les \u00ab\u00a0Abr\u00e9viations Emmet\u00a0\u00bb. En effet pour cr\u00e9er une \u00ab\u00a0div\u00a0\u00bb par exemple, vous ne serez pas oblig\u00e9 d’\u00e9crire manuellement \u00ab\u00a0<div><\/div>\u00a0\u00bb. Au fur et a mesure que vous entrerez des caract\u00e8res dans votre code, VS Code vous ferra apparaitre un petit menu contextuel a proximit\u00e9 du curseur de saisie, dans lequel il vous affichera touts les \u00e9l\u00e9ments existants correspondant \u00e0 ce que vous avez \u00e9crit. Vous pourrez alors naviguer dedans soit a la souris soit a l’aide des fl\u00e8ches du clavier afin de s\u00e9lectionner l’option qui vous convient.<\/p>\n\n\n\n
Petite pr\u00e9cision, VS Code retient votre dernier choix, et donc si vous avez cr\u00e9\u00e9 une div apr\u00e8s avoir entr\u00e9 la lettre \u00ab\u00a0d\u00a0\u00bb dans votre code, ils vous sera possible pour la suivante, d’\u00e9crire un \u00ab\u00a0d\u00a0\u00bb suivi de la touche \u00ab\u00a0Tabulation\u00a0\u00bb et votre div sera cr\u00e9\u00e9e en deux pressions sur votre clavier, magique.<\/p>\n<\/div>\n\n\n\n
![\"Menu](\"http:\/\/www.pallies-productions.com\/wp_sites\/geekcreatif\/wp-content\/uploads\/2021\/05\/emmetAbreviation.png\")
3 – Raccourcis de cr\u00e9ation des \u00e9l\u00e9ments HTML.<\/h2>\n\n\n\n
Comme le repr\u00e9sente plut\u00f4t bien le Screenshot associ\u00e9 \u00e0 ce paragraphe, VS Code vous permet de cr\u00e9er de fa\u00e7on extr\u00eamement rapide une multitude d’\u00e9l\u00e9ments HTML avec et sans classes ou ID.<\/p>\n\n\n\n
Ici donc assez peu d’explications tant l’image r\u00e9alis\u00e9e est compl\u00e8te et parlante.<\/p>\n\n\n\n
N\u00e9anmoins j’attirerais votre attention sur les lignes <\/p>\n\n\n\n
\u00ab\u00a0.votreClasse#votreID*2\u00a0\u00bb
valable aussi pour \u00ab\u00a0#votreID*2\u00a0\u00bb<\/p>\n\n\n\n
En effet, l’Id d’un \u00e9l\u00e9ment html \u00e9tant \u00e0 usage unique, il faudra faire attention \u00e0 ce type d’usage et \u00e0 le r\u00e9server pour la cr\u00e9ation d’Id proches mais diff\u00e9rents.<\/p>\n\n\n\n
Exemple:
#bloc*3, vous donnera ceci:
<div id=\u00a0\u00bbbloc\u00a0\u00bb><\/div>
<div id=\u00a0\u00bbbloc\u00a0\u00bb><\/div>
<div id=\u00a0\u00bbbloc\u00a0\u00bb><\/div>
Qu’il vous suffira de modifier de la sorte:
<div id=\u00a0\u00bbbloc1″><\/div>
<div id=\u00a0\u00bbbloc2″><\/div>
<div id=\u00a0\u00bbbloc3″><\/div><\/p>\n\n\n\n
Dans le cas de la ligne:
\u00ab\u00a0#votreID1#votreID2\u00a0\u00bb
Cet exemple n’est l\u00e0 que pour vous aider \u00e0 comprendre le fonctionnement des Id, mais en effet cela ne s’\u00e9crit pas, un \u00e9l\u00e9ment ne pouvant b\u00e9n\u00e9ficier que d’un seul Id. Par d\u00e9faut il prendra le dernier Id renseign\u00e9.<\/p>\n<\/div>\n\n\n\n
![\"Raccourcis](\"http:\/\/www.pallies-productions.com\/wp_sites\/geekcreatif\/wp-content\/uploads\/2021\/05\/raccourcisCreationElement.png\")
4 – L’Indentation<\/h2>\n\n\n\n
Vous vous apercevrez tr\u00e8s rapidement qu’une indentation claire et structur\u00e9e est primordiale \u00e0 l’\u00e9laboration d’un code lisible et compr\u00e9hensible. Sur vos premi\u00e8res pages ce d\u00e9tail ne vous sautera probablement aux yeux, mais \u00e0 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\u00e8s plusieurs mois ou ann\u00e9es…<\/p>\n\n\n\n
L\u00e0 aussi, VS Code int\u00e8gre des raccourcis ayant pour but de vous faciliter grandement le travail. La touche \u00ab\u00a0Tabulation\u00a0\u00bb deviendra vite une alli\u00e9e de choix afin de placer vos lignes fa\u00e7on tiroir. Mais quand il s’agit de faire le mouvement inverse (reculer une ligne vers la gauche) cel\u00e0 peut vitre devenir un m\u00e9chant casse t\u00eate et vous ne compterez plus le nombre de pressions sur la touche \u00ab\u00a0Del\u00a0\u00bb de votre clavier.<\/p>\n\n\n\n
Fort heureusement VS Code int\u00e8gre un raccourci, \u00ab\u00a0Maj + Tab\u00a0\u00bb vous permettant de faire de l’indentation vers l’arri\u00e8re.<\/p>\n\n\n\n
Mieux encore, si c’est tout un bloc qu’il vous faut d\u00e9placer, chose courante apr\u00e8s la suppression d’un ou plusieurs conteneurs parents ou enfants, faites une s\u00e9lection du bloc \u00e0 l’aide de la souris (ou du clavier comme nous le verrons dans l’astuce suivante) et utilisez \u00ab\u00a0Tab\u00a0\u00bb ou \u00ab\u00a0Maj + Tab\u00a0\u00bb pour d\u00e9placer le bloc entier en avant ou en arri\u00e8re.<\/p>\n<\/div>\n\n\n\n
![\"Indentation\"](\"http:\/\/www.pallies-productions.com\/wp_sites\/geekcreatif\/wp-content\/uploads\/2021\/05\/indentation.png\")
5 – L’organisation de vos conteneurs tout au clavier<\/h2>\n\n\n\n
Dans l’astuce pr\u00e9c\u00e9dente, nous avons vu comment d\u00e9placer rapidement et facilement des \u00e9l\u00e9ments sur l’axe X de votre code, ici, nous allons voir ce qu’il en est pour l’axe Y.<\/p>\n\n\n\n
Le premier r\u00e9flexe quand il faut d\u00e9placer des \u00e9l\u00e9ments de haut en bas dans le code sera \u00e9videmment d’utiliser le copier\/coller. Avec cette astuce, vous allez vous en servir bien moins souvent.<\/p>\n\n\n\n
En utilisant \u00ab\u00a0Alt + \u2191<\/strong>\u00a0\u00bb ou \u00ab\u00a0Alt + \u2193<\/strong>\u00a0\u00bb vous pourrez d\u00e9placer la ligne active, c’est a dire celle ou se situe le curseur de saisie, de haut en bas, vous permettant ainsi de d\u00e9placer une ligne \u00e0 l’endroit hi\u00e9rarchique que vous souhaitez avec en bonus, une indentation automatique de la ligne que vous d\u00e9placez.<\/p>\n\n\n\n En parall\u00e8le de cela et comme teas\u00e9 \u00e0 l’astuce pr\u00e9c\u00e9dente, l’utilisation de \u00ab\u00a0Maj + \u2191<\/strong>\u00a0\u00bb ou \u00ab\u00a0Maj + \u2193<\/strong>\u00ab\u00a0, vous permet d’ajouter des lignes \u00e0 votre s\u00e9lection et donc de s\u00e9lectionner des blocs entiers \u00e0 faire monter ou descendre dans votre code.<\/p>\n\n\n\n Petite pr\u00e9cision pratique, pas besoin que tous les caract\u00e8res d’une ligne soient s\u00e9lectionn\u00e9s pour effectuer le d\u00e9placement, la simple pr\u00e9sence de la s\u00e9lection sur un seul caract\u00e8re de la ligne vous permettra d’en d\u00e9placer tout le contenu.<\/p>\n<\/div>\n\n\n\n Et voil\u00e0, gr\u00e2ce \u00e0 ce petit tuto, vous ne serez certes pas un expert en codage mais les quelques fonctionnalit\u00e9s que vous aurez pu y apprendre vous aideront a gagner un temps tr\u00e8s pr\u00e9cieux dans l’apprentissage que vous envisagez.<\/p>\n\n\n\n Toutes ces astuces sont valables pour tous les langages que VS Code vous permet d’\u00e9crire.<\/p>\n\n\n\n Si cet article vous \u00e0 plu, qu’il vous \u00e0 appris quelque chose ou que vous pensez qu’il pourrait aider quelqu’un de votre entourage, n’h\u00e9sitez pas \u00e0 le partager et \u00e0 le propager autour de vous.<\/p>\n[\/et_pb_text][\/et_pb_column]\n\t\t\t[\/et_pb_row]\n\t\t[\/et_pb_section]","protected":false},"excerpt":{"rendered":" Nous n’allons pas nous int\u00e9resser ici \u00e0 la programmation mais plut\u00f4t \u00e0 toutes les petites astuces et aux raccourcis \u00e0 conna\u00eetre avant de commencer dont certains vous feront gagner du temps de fa\u00e7on cons\u00e9quente.<\/p>\n","protected":false},"author":2,"featured_media":124,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"\n Bienvenue voyageur des internets, vous vous lancez dans le d\u00e9veloppement web ou le webdesign, alors vous avez forc\u00e9ment entendu ou lu au moins une fois le nom de Visual Studio Code. Logiciel incontournable par excellence pour d\u00e9veloppeur, avec lui vous pourrez \u00e9crire dans une multitude de langages orient\u00e9s web comme le HTML, le CSS ou encore le JavaScript mais pas seulement, avec la prise en charge (moyennant extensions) de pr\u00e8s de 60 langages de programmation.<\/p>\n\n\n\n Cependant, nous n'allons pas nous int\u00e9resser ici \u00e0 la programmation mais plut\u00f4t \u00e0 toutes les petites astuces et aux raccourcis \u00e0 conna\u00eetre avant de commencer dont certains vous feront gagner du temps de fa\u00e7on cons\u00e9quente.<\/p>\n\n\n\n Quoi de plus frustrant que de perdre son travail suite \u00e0 un bug ou \u00e0 une panne d'\u00e9lectricit\u00e9 prenez l'article que vous \u00eates en train de lire par exemple. Celui-ci \u00e0 \u00e9t\u00e9 r\u00e9dig\u00e9 depuis l'interface Gutemberg de Wordpress, ne disposant pas de sauvegarde automatique \u00e0 du \u00eatre r\u00e9\u00e9crit \u00e0 cause justement d'une panne de courant.<\/p>\n\n\n\n N'h\u00e9sitez donc pas \u00e0 activer cette option le plus t\u00f4t possible afin de vous assurer de toujours garder la version la plus r\u00e9cente de votre travail. Il vous sera possible de configurer dans les menus le d\u00e9clenchement de cet sauvegarde (d\u00e9lai, changement de bloc ou de fen\u00eatre). Si jamais vous aviez peur d'enregistrer des erreurs, ne vous en faites pas, activer l'auto-save ne vous emp\u00eache pas de r\u00e9aliser des \"Ctrl + Z\" ou des \"Ctrl + Maj + Z\" afin de naviguer dans votre historique de modifications.<\/p>\n\n\n\n Attention toutefois, cette option vous sauvera dans bien des situations, n\u00e9anmoins, en cas d'invasion zombie, de catastrophe nucl\u00e9aire ou d'attaque de dragon, elle ne vous sera d'aucune utilt\u00e9...<\/p>\n<\/div>\n\n\n\n VS Code simplifie beaucoup de choses dans la r\u00e9daction de code gr\u00e2ce a ce qu'ils appellent les \"Abr\u00e9viations Emmet\". En effet pour cr\u00e9er une \"div\" par exemple, vous ne serez pas oblig\u00e9 d'\u00e9crire manuellement \"<div><\/div>\". Au fur et a mesure que vous entrerez des caract\u00e8res dans votre code, VS Code vous ferra apparaitre un petit menu contextuel a proximit\u00e9 du curseur de saisie, dans lequel il vous affichera touts les \u00e9l\u00e9ments existants correspondant \u00e0 ce que vous avez \u00e9crit. Vous pourrez alors naviguer dedans soit a la souris soit a l'aide des fl\u00e8ches du clavier afin de s\u00e9lectionner l'option qui vous convient.<\/p>\n\n\n\n Petite pr\u00e9cision, VS Code retient votre dernier choix, et donc si vous avez cr\u00e9\u00e9 une div apr\u00e8s avoir entr\u00e9 la lettre \"d\" dans votre code, ils vous sera possible pour la suivante, d'\u00e9crire un \"d\" suivi de la touche \"Tabulation\" et votre div sera cr\u00e9\u00e9e en deux pressions sur votre clavier, magique.<\/p>\n<\/div>\n\n\n\n Comme le repr\u00e9sente plut\u00f4t bien le Screenshot associ\u00e9 \u00e0 ce paragraphe, VS Code vous permet de cr\u00e9er de fa\u00e7on extr\u00eamement rapide une multitude d'\u00e9l\u00e9ments HTML avec et sans classes ou ID.<\/p>\n\n\n\n Ici donc assez peu d'explications tant l'image r\u00e9alis\u00e9e est compl\u00e8te et parlante.<\/p>\n\n\n\n N\u00e9anmoins j'attirerais votre attention sur les lignes <\/p>\n\n\n\n \".votreClasse#votreID*2\" En effet, l'Id d'un \u00e9l\u00e9ment html \u00e9tant \u00e0 usage unique, il faudra faire attention \u00e0 ce type d'usage et \u00e0 le r\u00e9server pour la cr\u00e9ation d'Id proches mais diff\u00e9rents.<\/p>\n\n\n\n Exemple: Dans le cas de la ligne: Vous vous apercevrez tr\u00e8s rapidement qu'une indentation claire et structur\u00e9e est primordiale \u00e0 l'\u00e9laboration d'un code lisible et compr\u00e9hensible. Sur vos premi\u00e8res pages ce d\u00e9tail ne vous sautera probablement aux yeux, mais \u00e0 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\u00e8s plusieurs mois ou ann\u00e9es...<\/p>\n\n\n\n L\u00e0 aussi, VS Code int\u00e8gre des raccourcis ayant pour but de vous faciliter grandement le travail. La touche \"Tabulation\" deviendra vite une alli\u00e9e de choix afin de placer vos lignes fa\u00e7on tiroir. Mais quand il s'agit de faire le mouvement inverse (reculer une ligne vers la gauche) cel\u00e0 peut vitre devenir un m\u00e9chant casse t\u00eate et vous ne compterez plus le nombre de pressions sur la touche \"Del\" de votre clavier.<\/p>\n\n\n\n Fort heureusement VS Code int\u00e8gre un raccourci, \"Maj + Tab\" vous permettant de faire de l'indentation vers l'arri\u00e8re.<\/p>\n\n\n\n Mieux encore, si c'est tout un bloc qu'il vous faut d\u00e9placer, chose courante apr\u00e8s la suppression d'un ou plusieurs conteneurs parents ou enfants, faites une s\u00e9lection du bloc \u00e0 l'aide de la souris (ou du clavier comme nous le verrons dans l'astuce suivante) et utilisez \"Tab\" ou \"Maj + Tab\" pour d\u00e9placer le bloc entier en avant ou en arri\u00e8re.<\/p>\n<\/div>\n\n\n\n Dans l'astuce pr\u00e9c\u00e9dente, nous avons vu comment d\u00e9placer rapidement et facilement des \u00e9l\u00e9ments sur l'axe X de votre code, ici, nous allons voir ce qu'il en est pour l'axe Y.<\/p>\n\n\n\n Le premier r\u00e9flexe quand il faut d\u00e9placer des \u00e9l\u00e9ments de haut en bas dans le code sera \u00e9videmment d'utiliser le copier\/coller. Avec cette astuce, vous allez vous en servir bien moins souvent.<\/p>\n\n\n\n En utilisant \"Alt + \u2191<\/strong>\" ou \"Alt + \u2193<\/strong>\" vous pourrez d\u00e9placer la ligne active, c'est a dire celle ou se situe le curseur de saisie, de haut en bas, vous permettant ainsi de d\u00e9placer une ligne \u00e0 l'endroit hi\u00e9rarchique que vous souhaitez avec en bonus, une indentation automatique de la ligne que vous d\u00e9placez.<\/p>\n\n\n\n En parall\u00e8le de cela et comme teas\u00e9 \u00e0 l'astuce pr\u00e9c\u00e9dente, l'utilisation de \"Maj + \u2191<\/strong>\" ou \"Maj + \u2193<\/strong>\", vous permet d'ajouter des lignes \u00e0 votre s\u00e9lection et donc de s\u00e9lectionner des blocs entiers \u00e0 faire monter ou descendre dans votre code.<\/p>\n\n\n\n Petite pr\u00e9cision pratique, pas besoin que tous les caract\u00e8res d'une ligne soient s\u00e9lectionn\u00e9s pour effectuer le d\u00e9placement, la simple pr\u00e9sence de la s\u00e9lection sur un seul caract\u00e8re de la ligne vous permettra d'en d\u00e9placer tout le contenu.<\/p>\n<\/div>\n\n\n\n Et voil\u00e0, gr\u00e2ce \u00e0 ce petit tuto, vous ne serez certes pas un expert en codage mais les quelques fonctionnalit\u00e9s que vous aurez pu y apprendre vous aideront a gagner un temps tr\u00e8s pr\u00e9cieux dans l'apprentissage que vous envisagez.<\/p>\n\n\n\n Toutes ces astuces sont valables pour tous les langages que VS Code vous permet d'\u00e9crire.<\/p>\n\n\n\n Si cet article vous \u00e0 plu, qu'il vous \u00e0 appris quelque chose ou que vous pensez qu'il pourrait aider quelqu'un de votre entourage, n'h\u00e9sitez pas \u00e0 le partager et \u00e0 le propager autour de vous.<\/p>\n","_et_gb_content_width":"793","footnotes":""},"categories":[2],"tags":[10,4,6,5,8,9,7],"class_list":["post-1","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tuto","tag-guide","tag-tuto","tag-tutorial","tag-tutoriel","tag-virtual-studio-code","tag-vs-code","tag-vsc"],"_links":{"self":[{"href":"http:\/\/www.pallies-productions.com\/wp_sites\/geekcreatif\/index.php?rest_route=\/wp\/v2\/posts\/1","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.pallies-productions.com\/wp_sites\/geekcreatif\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.pallies-productions.com\/wp_sites\/geekcreatif\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.pallies-productions.com\/wp_sites\/geekcreatif\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.pallies-productions.com\/wp_sites\/geekcreatif\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1"}],"version-history":[{"count":25,"href":"http:\/\/www.pallies-productions.com\/wp_sites\/geekcreatif\/index.php?rest_route=\/wp\/v2\/posts\/1\/revisions"}],"predecessor-version":[{"id":270,"href":"http:\/\/www.pallies-productions.com\/wp_sites\/geekcreatif\/index.php?rest_route=\/wp\/v2\/posts\/1\/revisions\/270"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.pallies-productions.com\/wp_sites\/geekcreatif\/index.php?rest_route=\/wp\/v2\/media\/124"}],"wp:attachment":[{"href":"http:\/\/www.pallies-productions.com\/wp_sites\/geekcreatif\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.pallies-productions.com\/wp_sites\/geekcreatif\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.pallies-productions.com\/wp_sites\/geekcreatif\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"\"](\"http:\/\/www.pallies-productions.com\/wp_sites\/geekcreatif\/wp-content\/uploads\/2021\/05\/deplacementsAuClavier.png\")
1 - Activer la sauvegarde automatique<\/h2>\n\n\n\n
2 - Les abr\u00e9viations \"Emmet\"<\/h2>\n\n\n\n
3 - Raccourcis de cr\u00e9ation des \u00e9l\u00e9ments HTML.<\/h2>\n\n\n\n
valable aussi pour \"#votreID*2\"<\/p>\n\n\n\n
#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><\/p>\n\n\n\n
\"#votreID1#votreID2\"
Cet exemple n'est l\u00e0 que pour vous aider \u00e0 comprendre le fonctionnement des Id, mais en effet cela ne s'\u00e9crit pas, un \u00e9l\u00e9ment ne pouvant b\u00e9n\u00e9ficier que d'un seul Id. Par d\u00e9faut il prendra le dernier Id renseign\u00e9.<\/p>\n<\/div>\n\n\n\n4 - L'Indentation<\/h2>\n\n\n\n
5 - L'organisation de vos conteneurs tout au clavier<\/h2>\n\n\n\n