====== VSCode / VSCodium (OLD PAGE) ======



===== Installation sous Debian 10 =====

  * Aller sur [[https://code.visualstudio.com/docs/setup/linux]]
  * Télécharger le fichier depuis le lien **.deb package (64-bit)**
  * Installer avec la commande suivante :

<code bash>
su
cd /home/marc/Téléchargements
apt install ./code_1.40.2-1574694120_amd64.deb
</code>

===== Extensions que j'utilise =====

==== Bracket Pair Colorizer ====

{{:divers:screenshot_20211010_072020.png|}}

==== SQLite ====

{{:divers:screenshot_20201225_161153.png|}}

Pour qu'elle fonctionne sous **Ubuntu 20.04** il faut installer le paquet **sqlite**

<code bash>
sudo apt install sqlite
</code>

Source: [[https://github.com/AlexCovizzi/vscode-sqlite/issues/119]]

==== Database Client ====

Supporte MySQL/MariaDB, Microsoft SQL Server, PostgreSQL, SQLite, MongoDB, Redis, et ElasticSearch.

{{:divers:screenshot_20211115_235702.png|}}

==== Git History ====

{{:divers:screenshot_20211010_072232.png|}}

==== Live Sass Compiler ====

{{:divers:screenshot_20211010_072334.png|}}

==== Live Server ====

{{:divers:screenshot_20211010_072428.png|}}

==== Twig ====

{{:divers:screenshot_20211010_072538.png|}}

  * Ouvrir un fichier **html**
  * Dans la barre de status, le type de fichier **HTML** est indiqué
  * Cliquer sur ce type de fichier et sélectionner la commande **Configure file association for '.html'**
  * Sélectionner **HTML (Twig)**

==== Jinja 2 ====

{{:divers:screenshot_20211129_070558.png|}}

Pour l'associer aux fichiers **html**, ajouter ceci dans les paramètres :

<code javascript>
"files.associations": {
  "*.html": "jinja-html"
},
</code>

{{:divers:screenshot_20211129_070925.png|}}


==== Python ====

{{:divers:screenshot_20210428_064723.png|}}

==== Prettier - Code Formatter ====

{{:divers:screenshot_20211010_072803.png|}}

==== Rainbow CSV ====

{{:divers:screenshot_20211010_072932.png|}}

==== XML ====

{{:divers:screenshot_20211010_073029.png|}}



===== Activer Emmet =====

**Emmet** est actif par défaut pour le langage **HTML**

==== Fichiers TWIG ====

Il faut dire à Emmet que les fichiers avec extension **twig** sont à
considérer comme étant dans le langage **html** :

  * **Ctrl+Shift+P** (command palette) > Preferences: Open Settings (JSON)
  * Dans **settings.json**, ajouter ou compléter cette section :

<code javascript>
"emmet.includeLanguages": {
    "twig": "html",
},
</code>

==== Fichiers HTML si ''Better Jinja'' est installé ====

Emmet ne fonctionne plus dans les fichiers **html** puisqu'un setting a été
modifié pour associer cette extension au langage **jinja-html**.

<code javascript>
"files.associations": {
    "*.html": "jinja-html"
},
</code>

Il faut donc indiquer à Emmet qu'il doit être actif pour le langage **jinja-html** 
comme pour le langage **html**, en complétant cette section :

<code javascript>
"emmet.includeLanguages": {
    "html": "html",
    "jinja-html": "html"
}
</code>

**Note:** les paramètres sont appliqués dès qu'on sauvegarde le fichier **settings.json**.


===== Indentation de l'arbre (File Explorer) =====

L'indentation par défaut est de **8** pixels. Pour plus de clarté je l'augmente
un peu.

**Settings** > **Workbench** > **Appearance** > **Tree: Indent**

{{:divers:screenshot_20201213_190655.png?nolink|}}

===== Configurer le terminal par défaut =====

Sous Windows c'est par défaut **PowerShell**

  * ''Ctrl+Shift+P'' puis **Terminal: Select Default Profile** :

{{:divers:capture_d_ecran_2022-11-30_161443.jpg|}}

  * Ensuite sélectionner le terminal désiré :

{{:divers:capture_d_ecran_2022-11-30_161548.jpg|}}

===== Mes raccourcis clavier personnalisés =====

| View: Toggle Integrated Terminal ^  Ctrl+T Ctrl+T  ^
| View: Toggle Maximized Panel     ^  Ctrl+M Ctrl+M  ^

Fichier de configuration :

<code javascript /home/marc/.config/Code/User/keybindings.json>
// Place your key bindings in this file to override the defaultsauto[]
[
    {
        "key": "ctrl+t ctrl+t",
        "command": "workbench.action.terminal.toggleTerminal"
    },
    {
        "key": "ctrl+m ctrl+m",
        "command": "workbench.action.toggleMaximizedPanel"
    }
]
</code>

===== Cacher les dossiers __pycache__ de Python =====

Ajouter ceci à **settings.json** :

<code javascript>
"files.exclude": {
    "**/*.pyc": {"when": "$(basename).py"},
    "**/__pycache__": true,
}
</code>

===== Mon fichier settings.json =====

Depuis la **Command Palette** (''Ctrl+Shift+P'') sélectionner **Preferences: Open Settings (JSON)**

<code javascript /home/marc/.config/Code/User/settings.json>
{
    "files.associations": {
        "*.html": "jinja-html"
    },
    "workbench.tree.indent": 24,
    "emmet.triggerExpansionOnTab": true,
    "emmet.includeLanguages": {
        "html": "html",
        "jinja-html": "html"
    },
    "files.exclude": {
        "**/*.pyc": {"when": "$(basename).py"},
        "**/__pycache__": true,
    }
}
</code>