1. Environnement de travail
  2. Visual Studio Code

Visual Studio Code

Welcome Page

L'index utile pour :

  • Ouvrir un nouveau répertoire
  • Voir les répertoire récemment utilisés
  • Sa rubrique d'aide
  • Les réglages de base notamment pour les raccourcis clavier
  • un rapide coup d'oeil sur l'interface

Installer des extensions

  • "Live server"
  • "html css support", 
  • "auto rename tag",
  • "duplicate selection or line"
  • "Prettier - Code formatter"
  • "html tag wrapper",
  • "Add jsdoc comments" pour créer automatiquement les commentaires des fonctions en js
  • "IntelliJ IDEA Keybindings" pour récupérer les raccourcis de phpstorm
  • ...

Tester Installer project manager via l'icône de gauche (carré)

Tester "html tag wrapper" (Sélectionner le code à encapsuler puis "ctrl+i" )

Tester "Live server" (click droit sur le fichier html dans l'explorer de gauche > open with Live Server)
(alt+L, alt+C) to Stop the server

Raccourcis clavier : 

"Settings ans keybindings" de la homepage > others > Intellij IDEA keybindings pour récupérer les raccourcis de phpstorm

 

Fonction

Combinaison de touches

permet d'accéder à la console

F1

Formater le code

Ctrl + shift + P  ou Ctrl shift Alt F (perso)

Déplacer un block de code

Sélectionner Alt Flèche bas ou haut

Déplacer une ligne de code

Ctrl + shift + ↑

Faire apparaître le terminal pour entrer des lignes de commande

Alt + F12

Go to file

ctrl +  shift + n :

import react component

irmc

create class

cc
Multi sélection : Add Selection To Nex Find Match  ctrl +  shift + Alt + n

Modifier ses propres raccourcis : 

File > preferences > keyboard shortcuts 

Toggle terminal :

Chercher "view: Toggle Integrated Terminal" et donner la combinaison de touches qui vous convient. Ex : Alt + F12

Snippet custom

Il faut parfois écrire directement dans le fichier keybindings.json (click sur icone {} en haut à droite ou ouverture de /home/yvan/.config/Code/User/keybindings.json)

[
    {
        "key": "ctrl+shift+alt+b",
        "command": "editor.action.insertSnippet",
        "when": "editorTextFocus",
        "args": {
          "snippet": "border: 1px solid red;"
        }
    },
    {
        "key": "ctrl+shift+alt+q",
        "command": "editor.action.insertSnippet",
        "when": "editorTextFocus",
        "args": {
          "snippet": "@media screen and (min-width: $$sm) and (max-width: $$xl) {\n  \n}"
        }
    },
    {
        "key": "ctrl+shift+alt+l",
        "command": "editor.action.insertSnippet",
        "when": "editorTextFocus",
        "args": {
          "snippet": "console.log(`${TM_SELECTED_TEXT}$1`)$2;"
        }
      }
]

Ouvrir un répertoire depuis la console

cd ~/dev/formation/html

code .

Le cas de windows 11 :

 setx PATH "%PATH%;C:\Users\YvanDOUENEL\AppData\Local\Programs\Microsoft VS Code"

Emmet : le html à la vitesse de l'éclair !

Voir la documentation complète d'Emmet

Ctrl N puis taper "!" dans le code pour avoir la possibilité de créer la structure du code html via Emmet
Ex :
ul#mydiv>li.myli*5>a{Texte de lien $}
a[alt="Voir la page"]
table>caption{titre du tableau}+#row$*4>#td$.classic{Ceci est un de la donnée}*3
ul#myul>li#myli$.li-item*8>a{Texte de lien $}
form>label{nom}input:text