Comment configurer vs code pour la programmation

Visual Studio Code (VS Code) est l'un des éditeurs de code les plus aimés par les développeurs. Votre personnalisation élevée vous permet d'adapter exactement l'environnement de développement à vos besoins.

De l'installation à la configuration des thèmes du clavier, des extensions et des raccourcis, VS Code offre de nombreuses options pour améliorer votre productivité.

Cet article vous guidera par les étapes essentielles pour configurer VS Code pour la programmation.

Installation du code vs

Télécharger le programme d'installation

Pour commencer à configurer VS Code, la première étape consiste à télécharger l'installateur. Visitez le site Web officiel vs code et cliquez sur le bouton de téléchargement.

Le site identifiera automatiquement son système d'exploitation et fournira le bon installateur.

Exécution de l'installation

Une fois le téléchargement terminé, cliquez sur le fichier téléchargé pour démarrer l'installation. Suivez les instructions à l'écran en cliquant sur «Suivant» dans les étapes.

N'oubliez pas d'accepter les conditions d'utilisation. Choisissez le dossier où le code vs sera installé et continuez.

Configuration du chemin

Dans la dernière étape de l'installation, vérifiez l'option "Ajouter au chemin". Ceci est essentiel pour vous d'ouvrir le code VS directement via le terminal, en utilisant la commande code.

Après avoir marqué cette option, cliquez sur «Installer» et lorsque l'installation est terminée, cliquez sur «Terminer» pour terminer.

Prêt! Maintenant, le code vs est installé et configuré sur votre système. Passons à l'étape suivante et commençons à explorer les fonctionnalités de cet outil de programmation puissant.

Choisir des thèmes et des schémas de couleurs

Accès aux préférences

Pour personnaliser le code vs, accédez aux préférences. Aller au menu Fichier> Préférences> Thème de couleur ou simplement taper Préférences: thème de couleur Dans la palette de commande. Cela ouvrira une liste de thèmes disponibles pour que vous puissiez choisir.

Thèmes populaires

Il existe de nombreux thèmes populaires qui peuvent personnaliser l'éditeur à votre goût. Certains des plus connus sont:

• Un Dark Pro: Un thème sombre très populaire parmi les développeurs.
• Atome une lumière: Idéal pour ceux qui préfèrent un thème clair.
• Dracula: Un thème sombre développé par Zeno Rocha, un Brésilien.
• Thème d'icône de matériel: En plus des thèmes de couleur, vous pouvez modifier les icônes de fichier en style de conception de matériau.

Personnaliser votre thème

Si aucun des thèmes standard ne vous plaît, vous pouvez personnaliser votre propre thème. Accéder Fichier> Préférences> Paramètres et cherchez Workbench.colorcustomalisations.

Ici, vous pouvez ajuster les couleurs de différents éléments de l'interface de code vs.

Conseil: Vous pouvez ajouter des personnalisations de couleurs au titre et aux barres d'état dans la section Cololomalisations.

Avec ces conseils, vous pouvez faire du code contre votre chemin et rendre le programme encore plus agréable!

Installation des extensions essentielles

Explorer le marché

Pour installer des extensions sur le code vs, visitez le marché. Marketplace est l'endroit où vous trouvez toutes les extensions disponibles pour le code vs. Pour y accéder:

1. Ouvrez le code vs.
2. Cliquez sur l'icône d'extensions dans la barre latérale gauche ou appuyez sur Ctrl + shift + x.
3. Utilisez la barre de recherche pour trouver les extensions que vous souhaitez.
4. Cliquer sur Installer Pour ajouter l'extension à votre code VS.

Extensions recommandées

Voici quelques extensions qui peuvent améliorer considérablement votre productivité:

• TAG TAGNE AUTO: Renommez automatiquement les balises HTML correspondantes lorsque vous en modifiez l'une.
• Couleur en surbrillance: Met en évidence les couleurs de votre code CSS, ce qui facilite la visualisation des couleurs utilisées.
• Serveur en direct: Crée un serveur local qui met automatiquement à jour votre page de navigateur chaque fois que vous enregistrez un fichier.
• Plus joli: Former automatiquement votre code, en assurant un style cohérent.
• Eslint: Analyse votre code JavaScript à la recherche d'erreurs et de problèmes de style.
• Gitlens: Améliore l'intégration GIT dans le code VS, montrant des informations détaillées sur les commits et les auteurs.

Gérer vos extensions

Après avoir installé des extensions, vous voudrez peut-être les gérer. Pour cela:

1. Ouvrez le panneau d'extension (Ctrl + shift + x).
2. Cliquez sur l'icône du matériel à côté de l'extension que vous souhaitez gérer.
3. Vous pouvez désactiver, désinstaller ou configurer l'extension selon les besoins.

Souviens-toi: Moins c'est plus. Installez uniquement les extensions que vous utiliserez vraiment pour éviter de surcharger votre éditeur.

Configuration du formatage du code

Ajustement des préférences de mise en forme

Vous pouvez ajuster vos préférences de formatage de code sur le code vs. Accéder aux configurations en appuyant Ctrl (cmd) +, Et recherchez "Formatage lors de la sauvegarde".

Activez cette option afin que le code soit automatiquement formaté chaque fois que vous enregistrez un fichier.

Formatage lors de l'enregistrement

L'une des fonctionnalités les plus utiles du code vs est le formatage automatique lors de l'enregistrement. Cela garantit que votre code est toujours propre et organisé.

Pour activer cette option, ajoutez la ligne suivante à votre fichier sets.json:

{
    "Editor.formatonsave": true
}

Utiliser des outils plus jolis et autres

Pittier est un outil de mise en forme de code populaire. Il aide à maintenir un style cohérent tout au long de votre projet. Pour l'utiliser, suivez ces étapes:

1. Installez l'extension plus jolie sur le code vs.
2. Ajoutez les paramètres les plus jolis à votre sets.json:

{
    "editor.defaultFormter": "esbenp.prettier-vscode",
    "[Javascript]": {
        "editor.defaultformatter": "esbenp.prettier-vscode"
    }
}

Désormais, chaque fois que vous enregistrez un fichier, plus joli forme le code automatiquement.

Le maintien du code bien formel améliore non seulement la lisibilité, mais aide également à éviter les erreurs inutiles.

Essayez différents outils et trouvez celui qui correspond le mieux à votre flux de travail.

Personnalisation des raccourcis clavier

Accéder aux paramètres de raccourci

Pour personnaliser vos raccourcis clavier sur le code vs, accédez à la palette de commande en appuyant sur Ctrl + shift + p et taper Préférences: ouvrir les raccourcis clavier.

Cela ouvrira un nouvel onglet où vous pouvez voir et modifier tous les raccourcis disponibles.

Création de nouveaux raccourcis

Créer de nouveaux raccourcis est assez simple. Dans l'onglet Raccourci, cliquez sur l'icône du crayon à côté de la commande que vous souhaitez modifier et appuyez sur la combinaison des touches que vous souhaitez utiliser.

N'oubliez pas de choisir des combinaisons qui ne sont pas en conflit avec d'autres commandes importantes.

Paramètres d'importation et d'exportation

Si vous utilisez VS Code dans différentes machines, il peut être utile d'exporter vos paramètres de raccourci. Aller à F1> Préférences: Paramètres ouverts (JSON) et copiez les paramètres souhaités.

Pour importer, collez simplement ces paramètres dans le fichier sets.json de la nouvelle machine.

La personnalisation de vos raccourcis clavier peut augmenter considérablement votre productivité, vous permettant de travailler plus efficacement et confortablement.

Intégrer avec Git

Configuration de Git dans VS Code

Visual Studio Code a une intégration native avec des systèmes de contrôle de version comme Git.

Pour commencer, ouvrez le panneau «Contrôle de la source» sur le côté gauche ou utilisez les commandes sur la barre d'état inférieure.

Vous pouvez initialiser un référentiel GIT, effectuer des engagements, pousser et tirer, et afficher et gérer les modifications directement dans l'éditeur.

• Initialiser un référentiel GIT: Cliquez sur l'icône GIT dans la barre latérale puis le bouton de démarrage du référentiel.
• Ajouter des fichiers pour commettre: Souris sur les fichiers modifiés et cliquez sur «Étape» pour les ajouter pour commettre.
• S'engager: Cliquez sur «Commitation en mise en scène» pour confirmer les modifications.
• Poussez le référentiel distant: Utilisez la commande push git dans le terminal intégré ou via l'interface graphique.

Utilisation de gitlens

Gitlens est une extension puissante qui améliore l'intégration GIT dans le code VS. Avec lui, vous pouvez voir l'histoire des commits, comparer les changements et plus encore.

Pour installer des gitlens:

1. Accédez à l'onglet Extension de code vs.
2. Recherchez les gitlens et cliquez sur Installer.
3. Après l'installation, explorez les nouvelles fonctionnalités disponibles sur le panneau de configuration source.

Effectuer des engagements et pousser

Pour effectuer des engins et pousser sur le code vs:

1. Apporter des modifications dans le code: modifiez vos fichiers normalement.
2. Ajoutez les modifications à l'étape: dans le panneau de configuration source, cliquez sur «Mettez en scène tout» pour ajouter toutes les modifications.
3. Écrivez un message à partir de commit: Dans le champ Message, décrivez les modifications apportées.
4. Commit Commit: Cliquez sur l'icône de vérification pour confirmer.
5. Envoyez les modifications au référentiel distant: utilisez la commande push git Dans le terminal intégré ou cliquez sur le bouton Push sur l'interface graphique.

L'intégration de Git avec VS Code facilite considérablement le contrôle de la version, vous permettant de gérer votre code efficacement et organisé, le tout en un seul endroit.

En utilisant le terminal intégré

Ouvrant le terminal

Pour ouvrir le terminal intégré du code vs, utilisez le raccourci `ctrl + \

(Windows / Linux) ouCMD + `(Mac). Cela ouvrira le terminal en bas de la fenêtre de code vs, vous permettant d'exécuter des commandes sans quitter l'éditeur.

Commandes de voile et de course

Le terminal intégré fonctionne comme tout autre terminal. Vous pouvez naviguer entre les répertoires, exécuter des scripts, installer des packages et plus encore. Voici quelques commandes utiles:

• CD Pour changer le répertoire.
• LS ou diron Pour répertorier les fichiers et les répertoires.
• Installation de NPM Pour installer les installations d'un nœud.js. projet.
• python script.py Pour exécuter un script Python.

Le terminal intégré vous permet d'avoir plus de contrôle sur votre environnement de développement sans changer entre différentes fenêtres ou applications.

Conclusion

La définition du code Visual Studio pour la programmation est un processus intéressant, car l'éditeur offre une large gamme de fonctionnalités et d'options de personnalisation.

De l'installation à la configuration des thèmes, des extensions et des raccourcis clavier, chaque étape contribue à un environnement de travail plus productif et plus agréable.

Profitez des conseils et transformez le code vs en votre allié principal lors de la programmation!