Setup VSCode

Setup VSCode

12/12/2020

Au​‌‍​‌​‌‍​‍ quotidien, tant pour du perso que du pro, j’utilise VSCode. Pour ceux qui ne connaisent pas, c’est un IDE léger créé par microsoft. J’ai un ensemble d’extensions que je partage ici.

LiveShare

C’est l’outil indispensable pour le pair programming et notamment en ces temps de covid ou tout ce fait à distance. Une fois l’extension installée et votre compte créé (via Github par exemple), vous pouvez ouvrir une session de collaboration et y inviter une ou plusieurs personnes.

LiveShare

Vous voyez le curseur des autres membres connectés, pouvez éditer les sources en parrallèle, partager un terminal ou une session de debugage…

Sous le capot, WebRTC est utilisé, la connexion est donc de pair à pair et ne passe par aucun serveur. Je vous invite vivement à aller voir la présentation officielle, c’est un super outil qui fonctionne aussi avec Visual Studio.

Bracket Pair Colorizer

Je travaille principalement avec des langages qui ont hérité de la syntaxe du C, donc avec des parenthèses, des accolades et des crochets. Pas toujours simple de retrouver la bonne paire au milieu de tout ça.

L’outil affecte une couleur différente à chaque paire permettant en un clin d’œil de retrouver le bon groupe. Il est sur le marketplace.

Import Cost

Extension simple et diablement efficace qui vous permet de visualiser l’impact que vas avoir l’import d’une librairie dans votre projet final. Ca s’adresse plutôt aux développeurs Ecmascript (Javascript, Typescript…).

Vous verrez par exemple rapidement la différence d’impact entre dayjs et moment 👼. Il est sur le marketplace.

Mermaid

Mermaid est un langage “à la markdown” qui permet de décrire différents types de graphiques et d’en générer un affichage, c’est particulièrement utile quand on travaille sur de la documentation. Exemple avec ce diagramme de flux.

1
2
3
4
5
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;

J’utilise deux extensions pour en créer :

En vrac

Quelques extensions très utiles mais non détaillées :

  • ESLint intégration de l’outil de validation de code,
  • Jest visualisation de l’état de vos tests,
  • Vuln Cost intégration du scan de sécurité sur vos dépendances,
  • Vetur car je fais du Vuejs,

Ce que je ne fais plus

Il y a aussi quelques extensions que je n’utilise plus maintenant :

  • Prettier génial pour un code propre et uniforme, je ne le mets pas sur mon poste, mais dans l’environnement d’intégration continue,
  • ESLint configuration sans règle de formatage, Prettier fais déjà le job et je veux pouvoir écrire mon code comme il m’en chante. Encore une fois, la CI (intégration continue) gère cet aspect.

Automatisation

Je change régulièrement d’environnement et de machine, je me suis donc fait un script pour installer tout ça en “one shot”.

1
2
3
4
5
6
7
8
9
10
#!/bin/bash
code --install-extension CoenraadS.bracket-pair-colorizer
code --install-extension wix.vscode-import-cost
code --install-extension dbaeumer.vscode-eslint
code --install-extension Orta.vscode-jest
code --install-extension snyk-security.vscode-vuln-cost
code --install-extension octref.vetur
code --install-extension ms-vsliveshare.vsliveshare-pack
code --install-extension vsls-contrib.spaces
code --install-extension lostintangent.vsls-pomodoro