Aller au contenu

VSCodium⚓︎

VSCode

Visual Studio Code (VSCode) est un éditeur libre et multiplateforme pour ordinateur, efficace et très complet, produit par Microsoft.

Mais

  1. VSCode inclut de la télémétrie 1 (une sorte de mouchard). On peut certes la désactiver, mais par principe...
  2. Le MarketPlace de VSCode contient des extensions libres, mais aussi d'autres qui ne le sont pas, et qui peuvent inclure de la télémétrie également..

Nous ne pouvons donc pas le recommander.

VSCodium

VSCodium est une version de VSCode distribuée avec une licence libre (MIT) qui est bien plus respectueuse.

  1. Il n'y a pas de télémétrie dans VSCodium.

  2. Le MarketPlace de VSCodium ne contient que des extensions libres, sans télémétrie.

On recommande d'utiliser VSCodium.

La différence d'utilisation

Avec un terminal,

  • pour lancer VSCodium, on entre : codium .
  • Pour lancer VSCode, on aurait entré : code .

Tout comme chromium est la version libre de chrome.

L'aide que l'on peut trouver en ligne sur VSCode se traduit alors en remplaçant code par codium.

La documentation officielle (en anglais)

On peut aussi utiliser l'autocomplétion, on entre $ cod puis TabSpace.Enter

Installation⚓︎

VSCodium est multiplateforme, il suffit de suivre les indications proposées sur le site officiel. Ci-dessous, une traduction rapide.

VSCodium n'est pas disponible pour Android. En 2022, il n'y a pas d'IDE Python correct qui respecte le RGPD.

Sur tablette, on recommande d'utiliser des sites web équipés de Pyodide. Comme Basthon, Capytale ou les productions e-nsi.

Dans un Terminal, l'administrateur entre :

Bash
sudo apt-get install extrepo
sudo extrepo enable vscodium
sudo apt-get update
sudo apt-get install codium
  1. Installer (si ce n'est pas déjà fait) le gestionnaire de paquet Homebrew. Dans un terminal, entrer :
    Bash
    $ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
    

Attention, même si cette méthode d'installation est de plus en plus répandue, elle est sujette à caution. En particulier, elle expose à des vulnérabilités de type « Supply Chain Attack ». 2. Ensuite, on peut installer VSCodium avec :

Bash
$ brew install --cask vscodium 

📋 Texte
Attention, même si cette méthode d'installation est de plus en plus répandue, elle est sujette à questionnement. En particulier, elle expose à des vulnérabilités de type « *Supply Chain Attack* ».

Il existe plusieurs gestionnaires de paquets pour Windows.

Avec Windows Package Manager (WinGet)

  1. À partir de Windows 10 1709 (build 16299), on peut installer le App Installer

  2. Ensuite, on peut installer VSCodium avec :

    Bash
    winget install vscodium 
    

Avec Chocolatey

  1. Installer Chocolatey, si ce n'est pas déjà fait.
  2. Ensuite, on peut installer VSCodium avec :
Bash
choco install vscodium 

Configuration rapide⚓︎

On propose dans cette section, une méthode rapide de configuration commune, avec un script. Vous retrouverez ensuite le détail par extension.

  1. Supprimer toute ligne qui ne vous parle pas,
  2. Lancer ce script dans un terminal
Installation d'extensions pour VSCodium
# Francisation
codium --install-extension MS-CEINTL.vscode-language-pack-fr  # Menus en français
codium --install-extension streetsidesoftware.code-spell-checker  # Correcteur orthographique
codium --install-extension streetsidesoftware.code-spell-checker-french-reforme  # Dictionnaire récent
codium --install-extension valentjn.vscode-ltex  # Correcteur grammatical

# Programmation
codium --install-extension ms-python.python  # Éditeur connecté avec Python(s)
codium --install-extension ms-toolsai.jupyter  # Gestion des carnets Jupyter
codium --install-extension KevinRose.vsc-python-indent  # Meilleures indentation Python
codium --install-extension CoenraadS.bracket-pair-colorizer-2  # Parenthésage en couleur

# Travail avec Markdown
codium --install-extension shd101wyy.markdown-preview-enhanced  # Moteur de rendu pour création rapide
codium --install-extension christian-kohler.path-intellisense  # Chemins proposés
codium --install-extension jock.svg  # Visualisation de s fichiers SVG
codium --install-extension tomoki1207.pdf  # Visualisation des fichiers PDF
codium --install-extension GitLab.gitlab-workflow  # Travail collaboratif sur la forge
codium --install-extension EditorConfig.EditorConfig  # Configuration commune
codium --install-extension mhutchie.git-graph  # Visualisation de l'arborescence

# Travail sur les bases de données
codium --install-extension mechatroner.rainbow-csv  # Visualisation des fichiers CSV
codium --install-extension alexcvzz.vscode-sqlite  # Faire des requêtes SQL
codium --install-extension dineug.vuerd-vscode  # Création de diagramme Entité-Relation

Un jour, celle-ci sera disponible codium --install-extension nhoizey.gremlins # Détection de caractères trompeurs

Ensuite, une fois installées, il faut les configurer.

Premier démarrage⚓︎

Sans extensions, cela ressemble plutôt à

Premier démarrage

Configuration rapide⚓︎

Appuyez sur Ctrl + , et cela ressemble à

Avec extensions

  1. Cliquez en haut à droite, « Afficher les paramètres (en JSON) » comme sur l'image.
  2. Insérez ou adaptez le dictionnaire suivant :
Fichier settings.json
{
    "editor.renderWhitespace": "boudary",
    "editor.parameterHints.enabled": false,
    "workbench.startupEditor": "none",
    "window.zoomLevel": 2,
    "python.terminal.executeInFileDir": true,
    "python.terminal.launchArgs": [
        "-m",
        "IPython",
        "--no-autoindent",
    ],
    "markdown.updateLinksOnFileMove.enabled": "prompt",
}

Un fichier JSON est un dictionnaire, on étudie cela en NSI en première, il y a un fonctionnement par clé-valeur. À chaque clé, correspond une valeur.

Explication par "clé": "valeur"

"editor.renderWhitespace": "boudary"
Contrôle la façon dont l'éditeur doit restituer les caractères espaces. Avec boundary, tous sauf les espaces uniques entre mots. Très utile.
"editor.parameterHints.enabled": false
Empêche l'ouverture intempestive de fenêtre de documentation quand on tape du code. Très utile. Mais, certains aiment bien cette fenêtre...
"workbench.startupEditor": "none"
Contrôle quel éditeur s'affiche au démarrage, si aucun n'est restauré de la session précédente.
"window.zoomLevel": 2
Modifiez le niveau de zoom de la fenêtre. La taille d'origine est 0. Chaque incrément supérieur (exemple : 1) ou inférieur (exemple : -1) représente un zoom 20 % plus gros ou plus petit. Vous pouvez également entrer des décimales pour changer le niveau de zoom avec une granularité plus fine. À régler suivant votre préférence.
"python.terminal.executeInFileDir": true
Exécute les fichiers Python dans un terminal depuis le dossier où ils se trouvent, et non depuis le dossier de travail de VSCodium. Très utile, en particulier lorsqu'on travaille avec des fichiers externes
"python.terminal.launchArgs": [...]
Avec les bons arguments permets d'avoir IPython dans le terminal quand on sélectionne du code et qu'on souhaite le tester immédiatement avec Shift + Enter

Configuration complémentaire

Ajouter les "clé": "valeur" suivantes, si le sens est limpide pour vous :

suite du fichier settings.json
{
    "cSpell.language": "fr-FR",
    "ltex.language": "fr",
    "editor.fontFamily": "'Fira Code'",
    "editor.fontLigatures": true,
    "security.workspace.trust.untrustedFiles": "open",
    "markdown-preview-enhanced.previewTheme": "atom-light.css",
    "markdown-preview-enhanced.mermaidTheme": "dark",
    "markdown-preview-enhanced.printBackground": true,
    "svg.preview.mode": "svg",
    "git.enableSmartCommit": true,
    "git.confirmSync": false,
    "git.autofetch": true,
}

Pour Fira Code, excellente police à chasse fixe pour coder, on ne recommande pas les ligatures aux élèves, mais seulement aux habitués.

Avant cela, pour installer Fira Code, on suivra ces instructions

Installation manuelle d'extension⚓︎

Inutile

Si vous avez suivi les étapes précédentes 😉

Mais il y a d'autres extensions présentées.

⚠ Il faudra regarder aussi, les configurations à apporter.

Sinon, au premier démarrage de VSCodium, on peut aller dans le gestionnaire d'extensions avec (Ctrl+Maj+X), ou alors en cliquant (au milieu à gauche) sur le carré coupé en quatre, dont un morceau est détaché.

extensions

Pour franciser VSCodium :

  1. Rechercher french dans le gestionnaire d'extension.
  2. Installer French Language Pack for VS Code
  3. Redémarrer VSCodium.

Correction orthographique et grammaticale⚓︎

Pour les variables du code et les commentaires. ⚠ Penser à la configuration.

  1. Rechercher et installer French - Code Spell Checker
  2. Configuration
    • Appuyer sur F1 taper spell et choisir Spell Checker configuration info
    • Choisir l'onglet USER, et décocher English, puis cocher French.

Pour les fichiers LaTeX et Markdown. ⚠ Penser à la configuration.

  1. Rechercher et installer LTeX
  2. LTeX n'est pas automatiquement configuré pour le français, ainsi
    1. Une fois installée, cliquer sur la roue dentée de LTeX (paramètres d'extensions)
    2. Dérouler vers le bas, et chercher la section Ltex: language
    3. Dans le menu déroulant, choisir fr pour french.

Enjoliveurs, au choix⚓︎

  1. Des thèmes sombres
    1. Chercher et installer l'extension Material Theme ; pour un thème sombre complet.
    2. Ou alors, chercher et installer l'extension Nord
  2. Chercher et installer l'extension Bracket Pair Colorizer 2 ; pour mieux voir vos parenthèses.

Python⚓︎

Rechercher Python et installer l'extension de Microsoft. Ceci n'installe pas Python, mais fera le lien entre Python déjà installé et VSCodium. Il faut donc avoir fait l'installation de Python sur votre ordinateur pour utiliser cette extension.

Rappel

Quand on installe Python pour Windows, il faut bien penser à cocher la case « Inclure Python dans le PATH ».

py_win

Une fois installé, vous pouvez tester.

  1. Créez un fichier test.py de type Python.
  2. En bas, à gauche, devrait être affichée votre version de python.
  3. Éditez print("Salut à tous !")
  4. Appuyez sur CtrlF5.
  5. Une fenêtre devrait s'ouvrir, avec le résultat attendu de votre script.

D'autre part, on peut aussi exécuter seulement un extrait de code.

  1. Ajoutez des lignes de Python à votre fichier test.py
  2. Sélectionnez quelques lignes
  3. Appuyez sur Shift + Enter

Meilleure indentation avec Python⚓︎

Rechercher et installer l'extension Python Indent

Données en table (.csv)⚓︎

En classe de première, on manipule des fichiers .csv, et on peut faire aussi les toutes premières expériences avec SQL.

Rechercher et installer l'extension Rainbow CSV

Langage SQL⚓︎

En terminale, on fait une initiation au langage SQL.

Rechercher et installer l'extension SQLite Rechercher et installer l'extension ERD Editor

Extensions utiles pour le professeur⚓︎

Complétion automatique de noms de fichier⚓︎

Rechercher et installer l'extension Path Autocomplete ; pour compléter automatiquement les noms de fichiers.

Bash
codium --install-extension ionutvmi.path-autocomplete

Markdown⚓︎

Pour créer des pages HTML grâce au langage Markdown, et visualiser en direct le rendu HTML.

Au choix :

Rechercher et installer l'extension Markdown Preview Enhanced

Bash
codium --install-extension shd101wyy.markdown-preview-enhanced

Rechercher et installer l'extension Markdown All in One

Bash
codium --install-extension yzhang.markdown-all-in-one

Langage HTML⚓︎

Pour prévisualiser en direct votre rendu HTML/JavaScript.

Il faut avoir le navigateur Chromium déjà installé.

Rechercher et installer l'extension Browser Preview

Bash
codium --install-extension auchenberg.vscode-browser-preview

Édition de documents LaTeX⚓︎

Rechercher et installer l'extension LaTeX Workshop

Bash
codium --install-extension james-yu.latex-workshop

Autres extensions Python⚓︎

Bash
codium --install-extension ms-pyright.pyright
codium --install-extension hbenl.test-adapter-converter
codium --install-extension hbenl.vscode-test-explorer
codium --install-extension littlefoxteam.vscode-python-test-adapter

Compléments⚓︎

Suggestions d'extensions⚓︎

  • Ouvrir un fichier avec une extension particulière, puis le gestionnaire d'extensions.
  • Des suggestions sont proposées...

Par exemple avec un fichier .asy, l'extension supakornras.asymptote intéressera les enseignants qui dessinent avec ce logiciel.

Où sont les extensions ?⚓︎

Les extensions sont stockées dans le répertoire :

  • Windows : %USERPROFILE%\.vscode-oss\extensions
  • Linux (tout comme macOS) : ~/.vscode-oss/extensions

Il est possible de lancer VSCodium en ligne de commande avec un autre répertoire d'extensions avec le paramètre : --extensions-dir <dir>

Installer une extension qui n'est pas (encore) sur le MarketPlace libre⚓︎

Il est possible de :

  • visiter le MarketPlace de VSCode,
  • d'y repérer une extension libre intéressante,
  • de la télécharger (chercher Download et cliquer sur le lien vers un fichier .vsix),
  • de l'installer pour VSCodium en ligne de commande, comme ci-dessous.

codium --install-extension mon_extension_toute_choupinou.vsix

Exercice

  1. Chercher sur le MarketPlace de VSCode : Subtitles Editor
  2. L'installer pour VSCodium
  3. Vous pourrez alors éditer des fichiers de sous-titres facilement (traduction automatique, décalage, ...)

Gremlins, une extension indispensable

L'extension enhoizey.gremlins est à chercher et installer.

Elle détection et affiche les caractères trompeurs.

  • Il existe aussi de quoi jouer avec emoji.

D'autres avis⚓︎


  1. Télémétrie dans VSCode, commentaire d'un développeur VSCode ; en anglais.