Aller au contenu
PROXIAD - LOGO DEF VALIDÉ - 201123 blanc-01 (1)
BLOG TECH
PRÊT À DÉCOLLER ?
Rechercher
Close this search box.

FR

|

EN

ARTICLE

Tips & Tricks pour Visual Studio Code

Visual studio code

Il est fort probable que vous utilisiez ou que vous connaissiez quelqu’un qui utilise Visual Studio Code. Le but de cet article sera d’aborder des tips sur l’outil. On parlera de choses basiques, mais aussi un peu plus avancées, toujours dans l’idée de rendre le développement plus confortable mais aussi plus productif.

Si vous ne connaissez malheureusement pas ce superbe IDE, je vous recommande cette vidéo de Fireship (au passage, abonnez-vous, son contenu est incroyable).

Raccourcis

Le classique Ctrl + Space (Cmd + Esc sur mac) permet de faire de la suggestion sur votre instruction courante, sans avoir à l’effacer puis la réécrire.

Pour changer de fichier rapidement, utilisez Ctrl + P (ou Cmd + P sur Mac), et tapez un nom de fichier.

Rajouter Shift à l’instruction précédente permet d’exécuter des commandes (ex: Restart TypeScript Server), mais surtout d’accéder à des paramètres sans avoir à naviguer dans les multiples onglets.

Ctrl + P et Ctrl + Shift + P

Avec Ctrl + Shift + [UP/DOWN] (Cmd + Option + [UP/DOWN] sur Mac), vous pouvez activer le multi-curseur. Cela permet d’écrire le même contenu en même temps sur plusieurs lignes.

Après avoir surligné un pattern, chaque utilisation de Ctrl + D (Cmd + D sur Mac) vous permettra d’ajouter à la sélection la prochaine occurrence de ce même pattern, et donc de l’éditer en même temps !

Configuration de base

Theme, icônes et police

Quand on installe Visual Studio Code, la première chose qui saute aux yeux, c’est l’absence d’icônes dans l’arborescence de fichier (surtout si vous utilisez couramment les outils de JetBrains).

Il existe différentes extensions pour les icônes. A titre personnel, j’utilise Helium Icon Theme (mettre le lien ?). Sinon, vous avez vscode-icons (mettre e lien aussi ?) qui est le plus connu et très apprécié de la communauté.

Pour le thème, c’est vraiment selon votre choix ! Il en existe des centaines : light, dark, inspiré de GitHub, de intellij ou encore custom… Bref il y en a pour tous les goûts !

D’ailleurs, vous pouvez noter que la modification du thème et des icônes se fait rapidement avec le shortcut Ctrl + Shift + P dont je vous parlais plus haut !

Pour la police de caractère, c’est aussi à la carte ! J’utilise depuis plus d’un an Fira Code qui rajoute un petit quelque chose grâce a ses ligatures. Pour l’installer, il y a une page dédiée sur leur GitHub, avec des instructions selon l’OS mais aussi selon l’IDE !

Helium Icons + Darcula Theme from IntelliJ + Fira Code

Extensions

Il n’y a pas vraiment d’extensions « must have ». Cela dépend de votre stack technique, de vos besoins et de vos habitudes.

Néanmoins, on retrouve souvent les mêmes : eslint, prettier, auto import, import cost, git lens…

Cette liste n’est évidemment pas exhaustive ! Il existe énormément de vidéos YouTube, d’articles Medium et autres qui présentent des extensions VS Code.

Je voudrais cependant vous faire découvrir quelques extensions que j’affectionne particulièrement :

  • Git Graph: pour visualiser son graphe git et agir dessus ;
  • Thunder Client: un Postman-like embarqué dans VS Code ;
  • Color Highlight: pour surligner les couleurs webs (Hex, rbg, basic…) ;
  • Live Share: Pour se connecter en remote au workspace de quelqu’un, très utile pour du peer-programming notamment.

Fichier settings.json

Avec Ctrl + Shift + P, on peut accéder au fichier settings.json. Il s’agit du fichier contenant vos paramètres utilisateurs. Vous pouvez y retrouver notamment les paramètres lié à l’UI dont je parlais plus haut.

C’est dans ce fichier qu’on indique la configuration pour eslint, les formateurs par défaut selon le type d’extensions. On peut aussi y indiquer un terminal par défaut. Par exemple, sur windows, j’utilise :

"terminal.integrated.defaultProfile.windows": "Git Bash"

pour forcer l’utilisation de Git Bash.

Je vous recommande aussi :

"workbench.sideBar.location": "right"

qui permet de mettre la sidebar sur la droite. Au début, ça peut sembler contre intuitif, mais cela permet au code de ne pas bouger lorsque l’on ouvre, ferme ou redimensionne la fenêtre.

Sidebar à droite vs à gauche

On peut aussi configurer vscode afin qu’il formatte le fichier et fix les erreurs eslint « basiques ». Pour cela vous pouvez utiliser une configuration proche de la suivante :

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.formatOnSave": true,
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "ms-vsliveshare.vsliveshare"
  },
  "[graphql]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

J’ai défini un formatter selon le type de fichier. Vous pouvez faire de même en fonction de vos languages et extensions utilisées au quotidien !

Configuration avancée

Synchronisation

En entreprise, et plus particulièrement en ESN, on peut être amené à changer souvent de PC : nouveau matériel, nouveau client, nouveau projet…

Il existe plein de solutions permettant d’éviter de réinstaller l’ensemble de sa configuration. VS Code propose une feature de synchronisation via un compte Microsoft ou GitHub. Elle comprend vos paramètres, shortcuts, snippets, extensions et configurations d’interface. Chacun de ces éléments peut être synchronisé ou non.

Ainsi, vous pouvez récupérer la configuration de votre poste, même celle de votre poste personnel !

Workspace configuration

Dans un projet, une différence de configuration entre deux développeurs peut s’avérer problématique. Il est possible de surcharger la configuration de l’utilisateur avec le dossier .vscode.

Ce dossier est à placer à la racine de votre projet (workspace). La configuration sera donc propre au projet.

La documentation vscode l’expliquera bien mieux que moi, mais en résumé, vous pouvez avoir des paramètres propre à votre projet (configuration eslint, ruler…), des snippets, une configuration de debug ou encore une recommandation d’extension à utiliser pour le projet. Ainsi, quand un nouveau développeur intégrera votre projet, vscode lui suggéra une liste d’extension à installer. Il est aussi possible de les consulter en cliquant sur l’icônes des extensions et en ajoutant le filtre @recommended.

Extensions recommandées
extensions.json & settings.json

Merci beaucoup d’avoir lu cet article, j’espère qu’il vous a plu et surtout qu’il vous a appris des choses !

Il reste encore évidemment beaucoup de sujets à aborder : intégration avec WSL, docker, debug avec points d’arrêts…

Dans un futur article, j’approfondirai la gestion de git avec VS Code qui, pour moi, est un sujet tellement large qu’il mérite un article dédié ! En attendant, testez Git Graph qui vous facilitera forcément la vie !

Clément Drouin
Ingénieur d’Etude et Développement
Proxiad Axe Seine

PROXIAD - LOGO DEF VALIDÉ - 201123 blanc-01 (1)
  • Applicatif
  • Infrastructures
  • Cybersécurité
  • DevOps
  • Contact

PARIS

47 Rue de Ponthieu
75008 Paris
France
contact.idf@proxiad.com

LILLE

19 Avenue Le Corbusier
59800 Lille
France
contact.nord@proxiad.com

ROUEN

4 Passage de la Luciline,
76000 Rouen
France
contact.normandie@proxiad.com

NANTES

275 Boulevard Marcel
Paul, 44800 Saint-
Herblain, France
contact.ouest@proxiad.com

STRASBOURG

3 Avenue de l'Europe,
67300 Schiltigheim
France
contact.est@proxiad.com

AIX-MARSEILLE

Europarc de Pichaury - 1330
av Guillibert de la Lauziére,
13290 Aix-en-Provence
contact.aixmarseille@proxiad.com

SOPHIA ANTIPOLIS

930 route des Dolines
06560 Valbonne
France
sophiantipolis@proxiad.com

LYON

170 Bd de Stalingrad
2e étage
69006 Lyon
contact.lyon@proxiad.com

BORDEAUX

Mama Works,
51 Quai Lawton, Bâtiment G4
33300 Bordeaux
contact.bordeaux@proxiad.com

SOFIA

59 Boulevard G.M. Dimitrov,
1700 Sofia,
Bulgaria
contact.bulgaria@proxiad.com

PLOVDIV

6 Belgrad St,
4000 Plovdiv
Bulgaria
contact.bulgaria@proxiad.com

GREEN SI &
GREEN SI CONSULTING

47 rue de Ponthieu,
75008 Paris, France
contact.greensi@proxiad.com

SKOPJE

13 Maksim Gorki str,
Nastel Business Center
1000 Skopje
Macédoine du Nord 
contact.macedonia@proxiad.com

RENNES

801 Av. des Champs Blancs
35510 Cesson-Sévigné
contact.bretagne@proxiad.com

© 2023 PROXIAD

  • MENTIONS LéGALES
  • POLITIQUE DE CONFIDENTIALITé
  • siège social, 47 rue de ponthieu, 75008 paris, france
  • +33 1 44 83 83 70
Facebook Linkedin Twitter Instagram Youtube
En poursuivant votre navigation sur ce site, vous acceptez l’utilisation de cookies à des fins de statistiques de visites. En savoir plusRéglages cookiesREJETERACCEPTER
Manage consent

Présentation de la confidentialité

Ce site Web utilise des cookies pour améliorer votre expérience lorsque vous naviguez sur le site Web. Parmi ces cookies, les cookies classés comme nécessaires sont stockés sur votre navigateur car ils sont essentiels pour le fonctionnement des fonctionnalités de base du site Web.
Nous utilisons également des cookies tiers qui nous aident à analyser et à comprendre comment vous utilisez ce site Web. Ces cookies ne seront stockés dans votre navigateur qu'avec votre consentement.
Vous avez également la possibilité de désactiver ces cookies. Mais la désactivation de certains de ces cookies peut avoir un effet sur votre expérience de navigation.
Necessary
Toujours activé
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Non-necessary
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
Enregistrer & appliquer
Gérer le consentement aux cookies
Pour offrir les meilleures expériences, nous utilisons des technologies telles que les cookies pour stocker et/ou accéder aux informations des appareils. Le fait de consentir à ces technologies nous permettra de traiter des données telles que le comportement de navigation ou les ID uniques sur ce site. Le fait de ne pas consentir ou de retirer son consentement peut avoir un effet négatif sur certaines caractéristiques et fonctions.
Fonctionnel Toujours activé
Le stockage ou l’accès technique est strictement nécessaire dans la finalité d’intérêt légitime de permettre l’utilisation d’un service spécifique explicitement demandé par l’abonné ou l’utilisateur, ou dans le seul but d’effectuer la transmission d’une communication sur un réseau de communications électroniques.
Préférences
Le stockage ou l’accès technique est nécessaire dans la finalité d’intérêt légitime de stocker des préférences qui ne sont pas demandées par l’abonné ou l’utilisateur.
Statistiques
Le stockage ou l’accès technique qui est utilisé exclusivement à des fins statistiques. Le stockage ou l’accès technique qui est utilisé exclusivement dans des finalités statistiques anonymes. En l’absence d’une assignation à comparaître, d’une conformité volontaire de la part de votre fournisseur d’accès à internet ou d’enregistrements supplémentaires provenant d’une tierce partie, les informations stockées ou extraites à cette seule fin ne peuvent généralement pas être utilisées pour vous identifier.
Marketing
Le stockage ou l’accès technique est nécessaire pour créer des profils d’utilisateurs afin d’envoyer des publicités, ou pour suivre l’utilisateur sur un site web ou sur plusieurs sites web ayant des finalités marketing similaires.
Gérer les options Gérer les services Gérer les fournisseurs En savoir plus sur ces finalités
Voir les préférences
{title} {title} {title}
Logo Proxiad
  • Accueil
  • Expertises
  • Prêts à décoller
  • Actualités
  • BLOG TECH
  • Accueil
  • Expertises
  • Prêts à décoller
  • Actualités
  • BLOG TECH

NOUS REJOINDRE

Voir nos offres d'emploi   →

CONTACTEZ-NOUS

Envoyez-nous un message   →

SUIVEZ-NOUS

Facebook Linkedin Twitter Instagram Youtube
RAPPORT RSE