Extensions de code et touches de raccourci de Visual Studio / Blogs / Perficient

Extensions de code Visual Studio et touches de raccourci pour simplifier le codage

L’efficacité est la clé en matière de codage. Un flux de travail bien organisé a un impact significatif sur le résultat et sur votre plaisir à coder. Le célèbre éditeur de code Microsoft Visual Studio Code (VS Code) est devenu très apprécié des développeurs en raison de ses performances, de son adaptabilité et de la richesse de ses options de personnalisation via des extensions et des touches de raccourci.

Extensions : amélioration des fonctionnalités de VS Code

Grâce à son vaste écosystème d’extensions, les développeurs peuvent personnaliser leur environnement de développement pour répondre à leurs besoins. Les extensions notables suivantes peuvent améliorer votre expérience de codage :

Cliquer sur cette icône dans le code VS ouvrira une fenêtre vous permettant d’accéder à l’extension et d’ajouter toutes les extensions répertoriées ci-dessous.

1.GitLens

GitLens est une extension puissante qui renforce les fonctionnalités de Git dans VS Code. Il fournit un éventail de fonctionnalités telles que des annotations de blâme ligne par ligne, des détails de validation, la paternité du code et une navigation intuitive dans l’historique de votre base de code.

Blâme, CodeLens et survols :

function gitLens(code: string){
                                            return supercharged(code); 
                                      }

Passez la souris sur les annotations de blâme pour révéler des détails et des actions riches.

2. Coloriseur de paire de supports

Cette extension simplifie la lisibilité du code en colorisant les crochets correspondants dans votre code. C’est un petit ajout qui facilite grandement l’identification des blocs de code, en particulier dans les projets complexes.

3. Serveur en direct

Live Server change la donne pour les développeurs Web. Il vous permet de voir facilement les modifications en temps réel tout en travaillant sur des fichiers HTML, CSS et JavaScript en lançant un serveur de développement local avec une fonctionnalité de rechargement en direct.

Ouvrez un projet et cliquez sur Go Live dans la barre d’état pour activer/désactiver le serveur.

4. Plus jolie

Garder le formatage du code cohérent tout au long d’un projet peut être difficile, mais Prettier fait ce travail automatiquement. Il garantit un code propre et cohérent en prenant en charge plusieurs langues et en formatant automatiquement votre code en fonction de paramètres prédéfinis ou personnalisés.

Using Command Palette (CMD/CTRL + Shift+P)
1) CMD + Shift + P  --Format Document
OR
1) Select the text you want to prettify
2) CMD + SHIFT + P  --Format Selection

5. ESLint/TSLint

Ces extensions fournissent un peluchage et une mise en évidence en temps réel des erreurs de code qui permettent de maintenir la qualité du code et le respect des normes de codage. Le développeur intègre TSLint ou ESLint directement dans VS Code.

• Un outil très apprécié pour rechercher et signaler des modèles dans le code JavaScript et ECMAScript s’appelle ESLint. Vous pouvez suivre les normes de codage et maintenir la qualité du code dans votre environnement de développement en intégrant ESLint dans Visual Studio Code (VS Code). Pour configurer ESLint dans Visual Studio Code, procédez comme suit :
  • Configurer l’extension ESLint: Appuyez sur Ctrl+Shift+X pour ouvrir VS Code, puis cliquez sur l’icône carrée dans la barre latérale pour ouvrir la vue Extensions. Recherchez « ESLint » dans Extensions Marketplace pour installer l’extension de Dirk Baeumer.
  • Installez ESLint localement ou globalement : Utilisez Extensions Marketplace pour trouver « ESLint » et installez le plugin ESLint de Dirk Baeumer.
  • Installer ESLint localement ou globalement: Pour installer ESLint localement, vous devez avoir installé Node.js et npm.

Exécutez la commande suivante dans votre terminal : npm installer eslint –save-dev

• Créer un fichier de configuration ESLint : ESLint nécessite un fichier de configuration (.eslintrc.js, .eslintrc.json ou .eslintrc.yaml) pour définir des règles de peluchage de votre code. Vous pouvez générer un fichier de configuration de base en exécutant : npx eslint –init
• Configurez VS Code pour utiliser ESLint : ouvrez vos paramètres VS Code (Fichier > Préférences > Paramètres) et recherchez « eslint.validate ». Assurez-vous que l’option « Eslint : Valider » est activée.
• Recharger VS Code : après avoir installé ESLint et l’avoir configuré, rechargez-le pour vous assurer que les modifications prennent effet.

Lorsque ESLint est lié à Visual Studio Code, vos fichiers JavaScript sont automatiquement lintés selon les critères définis dans votre fichier de configuration ESLint. Les erreurs et avertissements de peluchage seront marqués au fur et à mesure que vous saisirez le code dans l’éditeur, ce qui facilitera l’identification et la correction des problèmes. Pour garantir la qualité et la cohérence du code dans tous vos projets, maintenez régulièrement à jour votre configuration et vos règles ESLint.

Conseils rapides : augmenter la production

La maîtrise des touches de raccourci peut augmenter considérablement la productivité en réduisant le recours aux clics de souris et en permettant une navigation et une exécution rapides des commandes. Voici quelques touches de raccourci essentielles dans VS Code :

1. Navigation de base

• Ctrl + P (Cmd + P sur Mac) : recherche rapide de fichiers par nom.
• Ctrl + Tab (Cmd + Tab sur Mac) : basculer entre les fichiers ouverts.
• Ctrl + G (Cmd + G sur Mac) : accédez à un numéro de ligne spécifique.

2. Édition et sélection

• Ctrl + D (Cmd + D sur Mac) : sélectionnez la prochaine occurrence du mot actuel.
• Alt + Haut/Bas (Opt + Haut/Bas sur Mac) : déplace la ligne actuelle vers le haut ou vers le bas.

3. Gestion des codes

• Ctrl + / (Cmd + / sur Mac) : basculer le commentaire de ligne.
• Ctrl + Shift + L (Cmd + Shift + L sur Mac) : sélectionnez toutes les occurrences de la sélection actuelle.

4. Terminal

• Ctrl + (Cmd + sur Mac) : basculer le panneau de connexion.

5. Débogage

• F5 : démarrez le débogage.
• F10 : passez au débogage.

Visual Studio Code est un outil préféré des développeurs de plusieurs secteurs en raison de son adaptabilité et de son efficacité. Vous pouvez améliorer votre codage en apprenant à utiliser ses nombreuses extensions et en maîtrisant les raccourcis essentiels. Quelle que soit votre expérience, apprendre et utiliser ces ressources augmentera le rendement, rationalisera les processus et, en fin de compte, rendra le codage plus agréable.